organize your assets with rails
TRANSCRIPT
![Page 1: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/1.jpg)
@happynoff
Organize your assets with Rails
![Page 2: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/2.jpg)
@happynoff
Simon Courtois
www.tinci.fr
happynoff
simonc
![Page 3: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/3.jpg)
@happynoff
My CSS is a mess!
![Page 4: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/4.jpg)
@happynoff
Let's tidy up!
![Page 5: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/5.jpg)
@happynoff
See your design as components
![Page 6: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/6.jpg)
@happynoff
![Page 7: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/7.jpg)
@happynoff
![Page 8: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/8.jpg)
@happynoff
![Page 9: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/9.jpg)
@happynoff
![Page 10: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/10.jpg)
@happynoff
![Page 11: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/11.jpg)
@happynoff
![Page 12: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/12.jpg)
@happynoff
Organizing components
![Page 13: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/13.jpg)
@happynoff
app/assets/stylesheets/ components/ _navbar.scss _related-videos-item.scss
![Page 14: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/14.jpg)
@happynoff
using sprockets* *the Rails Asset Pipeline
![Page 15: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/15.jpg)
@happynoff
= require_tree ./components
![Page 16: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/16.jpg)
@happynoff
Conventions?
![Page 17: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/17.jpg)
@happynoff
BEM? SMACSS? SUITCSS?
![Page 18: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/18.jpg)
@happynoff
WIP CSS
![Page 19: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/19.jpg)
@happynoff
Greatly inspired by Medium https://gist.github.com/fat/a47b882eb5f84293c4ed
![Page 20: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/20.jpg)
@happynoff
.componentName
.componentName-attributeName
.componentName--variantName
![Page 21: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/21.jpg)
@happynoff
.is-open
.componentName.is-open
![Page 22: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/22.jpg)
@happynoff
.u-depth1
![Page 23: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/23.jpg)
@happynoff
.js-magicClick
![Page 24: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/24.jpg)
@happynoff
Leverage SCSS
![Page 25: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/25.jpg)
@happynoff
sprockets ▸ @import
![Page 26: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/26.jpg)
@happynoff
@import 'components/avatar'; @import 'components/navbar';
![Page 27: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/27.jpg)
@happynoff
Share variables and mixins
![Page 28: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/28.jpg)
@happynoff
Colors
![Page 29: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/29.jpg)
@happynoff
@import 'base/colors';
![Page 30: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/30.jpg)
@happynoff
Which notation?
![Page 31: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/31.jpg)
@happynoff
#RRGGBB
rgb(1, 2, 3) rgba(1, 2, 3, 0.4)
hsl(1, 2%, 3%) hsla(1, 2%, 3%, 0.4)
![Page 32: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/32.jpg)
@happynoff
hsl: Hue Saturation Lightness
![Page 33: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/33.jpg)
@happynoff
hsl(200, 50%, 50%)
hsl(200, 50%, 70%)
hsl(200, 50%, 30%)
![Page 34: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/34.jpg)
@happynoff
$color-green: hsl(127, 58%, 45%);
$color-green--navbar: hsl(127, 58%, 35%)
![Page 35: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/35.jpg)
@happynoff
Typography
![Page 36: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/36.jpg)
@happynoff
@import 'base/type';
![Page 37: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/37.jpg)
@happynoff
Limit the font sizes
![Page 38: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/38.jpg)
@happynoff
$fontSize-small: 14px; $fontSize-medium: 16px; $fontSize-large: 20px; $fontSize-larger: 27px; $fontSize-jumbo: 80px;
![Page 39: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/39.jpg)
@happynoff
Typefaces may vary!
![Page 40: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/40.jpg)
@happynoff
$fontSize-main-medium: 16px; $fontSize-second-medium: 15px;
![Page 41: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/41.jpg)
@happynoff
$fontWeight-normal: 400; $fontWeight-bold: 700; $fontWeight-extrabold: 900;
![Page 42: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/42.jpg)
@happynoff
Mixins
![Page 43: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/43.jpg)
@happynoff
@import 'base/mixins';
![Page 44: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/44.jpg)
@happynoff
@mixin lg { @media (min-width: 1170px) { @content; } }
![Page 45: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/45.jpg)
@happynoff
.magicBox { font-size: $fontSize-medium;
@include lg { font-size: $fontSize-large; } }
![Page 46: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/46.jpg)
@happynoff
Bootstrap
![Page 47: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/47.jpg)
@happynoff
@import 'base/bootstrap-override';
![Page 48: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/48.jpg)
@happynoff
Find your conventions!
![Page 49: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/49.jpg)
@happynoff
Try - Fail - Do better
![Page 50: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/50.jpg)
@happynoff
Questions?
![Page 51: Organize your assets with Rails](https://reader030.vdocuments.us/reader030/viewer/2022032618/55b5413cbb61eb2c298b4590/html5/thumbnails/51.jpg)
@happynoff
Thank you!