Organize your assets with Rails

@happynoff
Organize your assets
with Rails

@happynoff
Simon Courtois
www.tinci.fr
happynoff
simonc

@happynoff
See your design as
components

@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
BEM?
SMACSS?
SUITCSS?

@happynoff
Greatly inspired by Medium
https://gist.github.com/fat/a47b882eb5f84293c4ed

@happynoff
.componentName
.componentName-attributeName
.componentName--variantName

@happynoff
.is-open
.componentName.is-open

@happynoff
sprockets ▸ @import

@happynoff
@import 'components/avatar';
@import 'components/navbar';

@happynoff
Share variables and mixins

@happynoff
@import 'base/colors';

@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
@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
@import 'base/mixins';

@happynoff
@mixin lg {
@media (min-width: 1170px) {
@content;
}
}

@happynoff
.magicBox {
font-size: $fontSize-medium;
@include lg {
font-size: $fontSize-large;
}
}

@happynoff
@import
'base/bootstrap-override';

@happynoff
Find your
conventions!

@happynoff
Try - Fail - Do better

Recommended