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

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

Ken Collins
September 11, 2014

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

Ken Collins

September 11, 2014
Tweet

More Decks by Ken Collins

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 14
    Naming
    Things
    And Stuff & Things

    View full-size slide

  3. 22
    SUIT vs. BEM

    View full-size slide

  4. 25
    Single
    Class
    vs. Multi
    Class

    View full-size slide

  5. 26
    (r)ems vs. pixels

    View full-size slide

  6. 27
    theory vs. reality

    View full-size slide

  7. 28
    v3.3 Maps & At Root

    View full-size slide

  8. 29
    Away From Compass

    View full-size slide

  9. 30
    Customizable Grids

    View full-size slide

  10. 31
    There
    is no
    grid!

    View full-size slide

  11. 32
    Simple Media Queries w/Sass

    View full-size slide

  12. 33
    @import “style_bitz”;

    View full-size slide

  13. 34
    @import “style_bitz/style_bitz”;

    View full-size slide

  14. 35
    Bravery Test
    Big Tree Time!

    View full-size slide

  15. 36
    Make
    Change Native
    Tools for Ownership

    View full-size slide

  16. 41
    Make
    Change Visible
    Behavior is Contagious

    View full-size slide

  17. 49
    @CustomInkTech

    View full-size slide

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

    View full-size slide

  19. 52
    SUIT CSS Loves
    Refactoring
    Easily Share UI Components

    View full-size slide

  20. 53
    Pseudo
    Generated UIs
    For The Children

    View full-size slide

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

    View full-size slide

  22. 55
    Putting Sass
    Into Your SUIT
    Easy Performant Selectors

    View full-size slide

  23. 56
    @MetaSkills

    View full-size slide


  24. @inLehmans_Terms
    57

    View full-size slide

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

    View full-size slide