Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@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: ...
@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!
Upcoming SlideShare
Loading in …5
×

Organize your assets with Rails

463 views

Published on

Slides of my talk at Paris.rb on june, 5th 2015. This talk is about assets organization in a Rails project and how you can see your CSS as components.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Organize your assets with Rails

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

×