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!