Like A Ross! - Building The CustomInk.com Living Style Guide

We would like to share our thoughts and process behind CustomInk's new mobile-first responsive Sass framework. Be prepared for a lively group discussion and bring your a-game of questions as we talk about our process and technical building blocks for our new living style guide.

* Enacting Change with Living Style Guides
* Existing Framework or Building New
* Grid & Technology Choices

Transcript

1. Building The CustomInk Living Style Guide
   Like A Ross!
   1
   Happy Clouds
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. 13
    IS
    AWESOME
    

    View Slide

14. 14
    Naming
    Things
    And Stuff & Things
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. 22
    SUIT vs. BEM
    

    View Slide

23. View Slide

24. View Slide

25. 25
    Single
    Class
    vs. Multi
    Class
    

    View Slide

26. 26
    (r)ems vs. pixels
    

    View Slide

27. 27
    theory vs. reality
    

    View Slide

28. 28
    v3.3 Maps & At Root
    

    View Slide

29. 29
    Away From Compass
    

    View Slide

30. 30
    Customizable Grids
    

    View Slide

31. 31
    There
    is no
    grid!
    

    View Slide

32. 32
    Simple Media Queries w/Sass
    

    View Slide

33. 33
    @import “style_bitz”;
    

    View Slide

34. 34
    @import “style_bitz/style_bitz”;
    

    View Slide

35. 35
    Bravery Test
    Big Tree Time!
    

    View Slide

36. 36
    Make
    Change Native
    Tools for Ownership
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. 41
    Make
    Change Visible
    Behavior is Contagious
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. 49
    @CustomInkTech
    

    View Slide

50. View Slide

51. 51
    Unit Testing
    Sass Frameworks
    With Ruby Here-Doc Strings
    

    View Slide

52. 52
    SUIT CSS Loves
    Refactoring
    Easily Share UI Components
    

    View Slide

53. 53
    Pseudo
    Generated UIs
    For The Children
    

    View Slide

54. 54
    Living Style
    Guides On Rails
    Meta-Mounted Engines
    

    View Slide

55. 55
    Putting Sass
    Into Your SUIT
    Easy Performant Selectors
    

    View Slide

56. 56
    @MetaSkills
    

    View Slide

57. 
    @inLehmans_Terms
    57
    

    View Slide

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

    View Slide