Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modular CSS & Sass

Ken Collins
October 29, 2014

Modular CSS & Sass

* Why bother with a Modular CSS pattern? - Talk about CSS performance, extensibility, selector specificity, theming, etc.
* Why we chose SUIT vs. BEM or SMACSS. What does SUIT offer us?
* How does modular CSS play with Sass? - Discuss the latest Sass features that make authoring modular CSS fun and easy. We want to share where the patterns have worked and in some cases have broken down and led to other clean solutions.

Ken Collins

October 29, 2014
Tweet

More Decks by Ken Collins

Other Decks in Technology

Transcript

  1. Bootstrapping A Strong Foundation
    Modular CSS & Sass
    1
    Happy Clouds

    View Slide

  2. 2

    View Slide

  3. 3

    View Slide

  4. 4
    Our Goals

    View Slide

  5. 5

    View Slide

  6. 6
    CSS
    for you
    And Others

    View Slide

  7. 7
    Methodology

    View Slide

  8. 8
    SUIT vs. BEM

    View Slide

  9. 9

    View Slide

  10. 10

    View Slide

  11. 11

    View Slide

  12. 12
    Component
    Modularity
    Realize A Specific UI

    View Slide

  13. 13
    No Outer
    Render Context
    Composable

    View Slide

  14. 14
    Your Context
    1
    REM
    1.5 REM

    View Slide

  15. 15
    Loose
    Coupling
    Isolation vs. Code Repetition

    View Slide

  16. 16
    Small
    Components
    Well Documented

    View Slide

  17. 17

    View Slide

  18. 18
    Specificity

    View Slide

  19. 19

    View Slide

  20. 20

    View Slide

  21. 21

    View Slide

  22. 22

    View Slide

  23. 23

    View Slide

  24. 24
    SUIT Intro

    View Slide

  25. 25

    View Slide

  26. 26

    View Slide

  27. 27

    View Slide

  28. 28

    View Slide

  29. 29

    View Slide

  30. 30

    View Slide

  31. 31
    http://stylebitz.customink.com/style_bitz/sass#suit-up

    View Slide

  32. 32
    http://stylebitz.customink.com/style_bitz/sass#suit-up

    View Slide

  33. 33
    http://stylebitz.customink.com/style_bitz/sass#suit-up

    View Slide

  34. 34
    The Details

    View Slide

  35. 35

    View Slide

  36. 36
    Descendant
    Pain
    To Many Children

    View Slide

  37. 37

    View Slide

  38. 38

    View Slide

  39. 39

    View Slide

  40. 40
    Component
    Inception
    Use Wrappers

    View Slide

  41. 41

    View Slide

  42. 42

    View Slide

  43. 43
    File
    Workflow
    Base, Desc, Mod [Desc]

    View Slide

  44. 44

    View Slide

  45. 45
    Refactoring
    FTW
    Copy Paste Programming

    View Slide

  46. 46

    View Slide

  47. 47

    View Slide

  48. 48
    Wrapping Up

    View Slide

  49. http://stylebitz.customink.com/style_bitz/rails#demo-pages
    Demo HTML & Sass
    49

    View Slide

  50. 50

    View Slide

  51. 51

    View Slide

  52. @extend %your-skills;
    THANK YOU!
    52

    View Slide