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.

Achieving consistency in large CSS projects — FullStackLX #2

884 views

Published on

Video at: https://www.youtube.com/watch?v=1_YdO9uGhYY

We all know CSS’s reputation for being a mess. We’ve all seen Peter Griffin’s GIF. It’s not that tricky but if we let our immediate needs roam wild, our future self will be shaking their fist at our present self. In this talk we’ll cover how we can put in place several mechanisms in our favourite CSS pre-processor to achieve consistency not only in terms of code but also achieving a visually consistent product.

PDF with notes available at http://talks.andr3.net/2016/consistency.pdf

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Achieving consistency in large CSS projects — FullStackLX #2

  1. 1. Achievingconsistency inlarge CSSprojects @andr3 FullStackLX#2 Dec. 7th '2016 http://meet.andr3.net
 me@andr3.net
  2. 2. OH HAI!
  3. 3. CONSISTENCY

  4. 4. CONSISTENCY
 inlargeCSSprojects
  5. 5. consistent
 (adj.) /kənˈsɪst(ə)nt/ acting or done in the same way over time, especially so as to be fair or accurate.
  6. 6. 👀💻 code visuals
  7. 7. 👀💻 code visuals Maintainability
 Predictability
 Stability
  8. 8. 👀💻 code visuals Maintainability
 Predictability
 Stability Usability
 Branding
 Personality
  9. 9. SharedResponsibility
  10. 10. 👀💻 code visuals CSSStats
 
http://cssstats.com
 Gulp/Grunt (with PostCSS) How can we measure?
  11. 11. How can we measure?How can we measure? 2016 2014Fixed layout.
 Using SCSS.
 Before redesign with consistency in mind. Responsive/fixed layout (progressive redesign).
 Using SCSS.
 After redesign.
 A lot more components, content, pages, etc.
 From Fixed to Responsive (medium.com) ➡ seedrs.com seedrs.com cssstats.com cssstats.com
  12. 12. How can we measure?How can we measure? 2016 2014
  13. 13. How can we measure?How can we measure? 43% 22% 31% 29% 29% 40% 57% 46% 8% 34% 55% 28% 2016 2014
  14. 14. How can we measure?How can we measure? 2016 2014
  15. 15. How?
  16. 16. 1.TypographicScale
  17. 17. Robert Bringhurst
  18. 18. Don’tcompose withoutascale Robert Bringhurst
  19. 19. Don’tcompose withoutascale In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. […] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”
 
 —
 in The Elements of Typographic Style
 by Robert Bringhurst
  20. 20. $type-scale-base: 1rem; $type-scale-adjustments: ( extra-small: -0.25, small: -0.125, normal: 0, medium: 0.125, large: 0.5, huge: 1, extra-huge: 2, extra-extra-huge: 3, ); _config.scss // Usually*: // 12px // 14px // 16px // 18px // 24px // 32px // 48px // 64px
  21. 21. @function type-scale($size) { @if map-has-key($type-scale-adjustments, $size) { $adjust: map-get($type-scale-adjustments, $size); $actual-size: $type-scale-base + $adjust; @return $actual-size; } @else { @return $type-scale-base; } } _typography-mixins.scss
  22. 22. font-size: type-scale(extra-small); font-size: type-scale(small); font-size: type-scale(normal); font-size: type-scale(medium); … 
 // If you want, create a mixin for easier use: 
 // @include type-scale(large); Howtouseit:
  23. 23. font-size: type-scale(extra-small); font-size: type-scale(small); font-size: type-scale(normal); font-size: type-scale(medium); … 
 // If you want, create a mixin for easier use: 
 // @include type-scale(large); Howtouseit: padding-top: type-scale(large);
  24. 24. 2.Verticalspacing scale
  25. 25. before after
  26. 26. before after margin margin
  27. 27. before after margin margin padding padding
  28. 28. $vertical-space-values: ( extra-small: 0.5, small: 1, medium: 1.5, large: 2.5, huge: 4, extra-huge: 6 ); _config.scss // In rems. Usually*: // 8px // 16px // 24px // 40px // 64px // 96px
  29. 29. @function vertical-space($space) { $space-value: map-get($vertical-space-values, $space); @return #{$space-value}rem; }
 
 @mixin before-padding($space) { padding-top: vertical-space($space); }
 @mixin before-margin($space) { margin-top: vertical-space($space);
 } _typography-mixins.scss
  30. 30. .example { @include before-padding(small); @include after-padding(small); @include before-margin(large); @include after-margin(large); }
 
 // For convenience, create mixins like: 
 // @include before-and-after-padding(small); // @include before-and-after-margin(large); Howtouseit:
  31. 31. 3.Container paddings(horizontal)
  32. 32. small screens large screens
  33. 33. $container-paddings: ( small: 1, medium: 2, large: 3 ); _config.scss // in multiples // of gutters
  34. 34. @function container-padding($size) { $multiplier: 1; @if map-has-key($container-paddings, $size) { $multiplier: map-get($container-paddings, $size); } @return $multiplier * gutter(); } _grid-mixins.scss
  35. 35. @function container-padding($size) { $multiplier: 1; @if map-has-key($container-paddings, $size) { $multiplier: map-get($container-paddings, $size); } @return $multiplier * gutter(); } _grid-mixins.scss varies depending
 on the context
 (small/large).
  36. 36. @mixin container-padding($size) { $value: container-padding($size); padding-left: $value; padding-right: $value; } _grid-mixins.scss
  37. 37. .example { @include container-paddings(small); } Howtouseit: .another { padding: vertical-spacing(huge) container-paddings(small); }
  38. 38. Semi-manualchecks via bookmarklet
  39. 39. 4.Colorpaletteswithalpha
  40. 40. Name your colors. $color1 $primary-color $color-red
  41. 41. http://chir.ag/projects/name-that-color/#4AA6FF http://vmi.u7.xsl.pt http://sipapp.io/ http://vmi.ud.xsl.pt
  42. 42. $palette: ( "celery-green": ( x-light: #e5f1d5, light: #cce4ac, mid-light: #b2d683, base: #99c95a, mid-dark: #7fbb30, dark: #6fa32b, x-dark: #5c8723 ), "dodger-blue": ( x-light: #e8f4ff, light: #d1e8ff, _colors.scss
  43. 43. @function color($hue, $tone: "base") { $color: rgba(204, 255, 0, 0.2);
 @if map-has-key($palette, $hue) { $palette-color: map-get($palette, $hue); @if map-has-key($palette-color, $tone) { $color: map-get($palette-color, $tone); } } @return $color; } _colors.scss
  44. 44. .example { color: color(celery-green, x-dark); } Howtouseit:
  45. 45. $alpha-palette: ( "black": #000, "white": #fff, "corn-yellow": #edb800, "sky-blue": #1d8fff ); _colors.scss $alpha-levels: ( "0": 0, "10": 0.1, "20": 0.2, "40": 0.4, "60": 0.6, "80": 0.8, "100": 1 );
  46. 46. @function alpha-color($hue, $alpha: "100") { $color: rgba(204, 255, 0, 0.2); @if map-has-key($alpha-palette, $hue) { $palette-color: map-get($alpha-palette, $hue); @if map-has-key($alpha-levels, $alpha) { $color: rgba($palette-color, map-get($alpha-levels, $alpha)); } } @return $color; } _colors.scss
  47. 47. .example { color: alpha-color(black, 80); } Howtouseit:
  48. 48. 5.Namingconvention
  49. 49. 2016 2014
  50. 50. .section { .header { .logo a { … } .image { … } } … } Before
  51. 51. .Component { … } .Component-logo { … } .Component-coverImage { … } After
  52. 52. BEM SUIT block element modifier .block .block__element .block__element--modifier .Component .Component-subComponent .Component--modifier
 .is-transientState
 .u-tilityClasses
  53. 53. BEM SUIT style… for ui… tools… you know. block element modifier .block .block__element .block__element--modifier .Component .Component-subComponent .Component--modifier
 .is-transientState
 .u-tilityClasses
  54. 54. Whichisbest?
  55. 55. Itdepends.
 But use one that lowers specificity.
  56. 56. This next one should go without saying but…
  57. 57. 6.LintyourSCSS/less/css
  58. 58. That’sprettymuchit, lintit.Noexcuses.
  59. 59. That’sprettymuchit, lintit.Noexcuses. Exceptions must be
 followed by a reason. // scss-lint:disable NestingDepth // Reason: This rule depends on the // state of the previous item. No way // to minimize depth here.
  60. 60. CONSISTENCY
 inlargeCSSprojects In conclusion...
  61. 61. “We shape our buildings and afterward our buildings shape us."
 —
 Winston Churchill
  62. 62. We become what we behold. First we shape our tools, thereafter they shape us.
 
 —
 Marshall McLuhan
  63. 63. "SHAPEY0’SELVES."
  64. 64. BeforeIgo...
  65. 65. THANKYOU
  66. 66. Achievingconsistency inlarge CSSprojects @andr3 FullStackLX#2 Dec. 7th '2016 http://meet.andr3.net
 me@andr3.net http://talks.andr3.net/2016/consistency.pdf cbna http://codepen.io/andr3pt/pen/pNVVdG Lalezar, SuperClarendon & Fira Code

×