Successfully reported this slideshow.
Your SlideShare is downloading. ×

Organize your assets with Rails

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 51 Ad
Advertisement

More Related Content

Similar to Organize your assets with Rails (20)

Advertisement

Recently uploaded (20)

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!

×