Organize your assets with Rails
-
Upload
simon-courtois -
Category
Technology
-
view
131 -
download
1
Transcript of Organize your assets with Rails
@happynoff
Organize your assets with Rails
@happynoff
Simon Courtois
www.tinci.fr
happynoff
simonc
@happynoff
My CSS is a mess!
@happynoff
Let's tidy up!
@happynoff
See your design as components
@happynoff
@happynoff
@happynoff
@happynoff
@happynoff
@happynoff
@happynoff
Organizing components
@happynoff
app/assets/stylesheets/ components/ _navbar.scss _related-videos-item.scss
@happynoff
using sprockets* *the Rails Asset Pipeline
@happynoff
= require_tree ./components
@happynoff
Conventions?
@happynoff
BEM? SMACSS? SUITCSS?
@happynoff
WIP CSS
@happynoff
Greatly inspired by Medium https://gist.github.com/fat/a47b882eb5f84293c4ed
@happynoff
.componentName
.componentName-attributeName
.componentName--variantName
@happynoff
.is-open
.componentName.is-open
@happynoff
.u-depth1
@happynoff
.js-magicClick
@happynoff
Leverage SCSS
@happynoff
sprockets ▸ @import
@happynoff
@import 'components/avatar'; @import 'components/navbar';
@happynoff
Share variables and mixins
@happynoff
Colors
@happynoff
@import 'base/colors';
@happynoff
Which notation?
@happynoff
#RRGGBB
rgb(1, 2, 3) rgba(1, 2, 3, 0.4)
hsl(1, 2%, 3%) hsla(1, 2%, 3%, 0.4)
@happynoff
hsl: Hue Saturation Lightness
@happynoff
hsl(200, 50%, 50%)
hsl(200, 50%, 70%)
hsl(200, 50%, 30%)
@happynoff
$color-green: hsl(127, 58%, 45%);
$color-green--navbar: hsl(127, 58%, 35%)
@happynoff
Typography
@happynoff
@import 'base/type';
@happynoff
Limit the font sizes
@happynoff
$fontSize-small: 14px; $fontSize-medium: 16px; $fontSize-large: 20px; $fontSize-larger: 27px; $fontSize-jumbo: 80px;
@happynoff
Typefaces may vary!
@happynoff
$fontSize-main-medium: 16px; $fontSize-second-medium: 15px;
@happynoff
$fontWeight-normal: 400; $fontWeight-bold: 700; $fontWeight-extrabold: 900;
@happynoff
Mixins
@happynoff
@import 'base/mixins';
@happynoff
@mixin lg { @media (min-width: 1170px) { @content; } }
@happynoff
.magicBox { font-size: $fontSize-medium;
@include lg { font-size: $fontSize-large; } }
@happynoff
Bootstrap
@happynoff
@import 'base/bootstrap-override';
@happynoff
Find your conventions!
@happynoff
Try - Fail - Do better
@happynoff
Questions?
@happynoff
Thank you!