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!
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Speed your Rails app creation with templates
Next
Upcoming SlideShare
Speed your Rails app creation with templates
Next
Download to read offline and view in fullscreen.

Share

Organize your assets with Rails

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • 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!

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.

Views

Total views

640

On Slideshare

0

From embeds

0

Number of embeds

20

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×