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.

Transcript

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

   View Slide

2. View Slide

3. View Slide

4. 4
   Our Goals
   

   View Slide

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. View Slide

10. View Slide

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. View Slide

18. 18
    Specificity
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. 24
    SUIT Intro
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

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. View Slide

36. 36
    Descendant
    Pain
    To Many Children
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. 40
    Component
    Inception
    Use Wrappers
    

    View Slide

41. View Slide

42. View Slide

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

    View Slide

44. View Slide

45. 45
    Refactoring
    FTW
    Copy Paste Programming
    

    View Slide

46. View Slide

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. View Slide

51. View Slide

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

    View Slide