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

Well-Designed Development: Sass for Engineers

Well-Designed Development: Sass for Engineers

Presented at HTML5 Dev Conf in San Francisco, October 2014

Smith Schwartz

October 21, 2014
Tweet

More Decks by Smith Schwartz

Other Decks in Technology

Transcript

  1. Well-Designed Development
    Sass for Engineers

    View Slide

  2. View Slide

  3. We style multiple sites with one codebase

    View Slide

  4. Tempest is a publishing platform and
    CMS for digital magazines

    View Slide

  5. Content focused design for publishers

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. Continuous improvement for
    point of view publishing

    View Slide

  11. Size of our team

    View Slide

  12. Custom Sass variables and assets

    View Slide

  13. Libsass

    View Slide

  14. Writing good Sass is more than overriding
    CSS at the bottom of a file

    View Slide

  15. CSS
    IS
    AWESOME

    View Slide

  16. Naming conventions

    View Slide

  17. Layout ( .l-layoutname )
    !
    Layout classes should only define the structural presentation of container
    elements. Specify size and position apart from the site skin. (.l-full-width)
    !
    Module ( .m-modulename )
    !
    Modules generally represent the core functionality of each element on the page.
    (.m-story)
    !
    Module Component (.m-modulename--component )
    !
    This is used for the subelements inside a self contained module. (.m-story—copy)

    View Slide

  18. Sub-Module ( .m-modulename_submodule )
    !
    These are variants of a module that are different enough to require a submodule.
    Extension of the core module. (m-follow_twitter)
    !
    *potential removal of this category
    !
    Module Modifier ( .m-modulename.mm-modifiername )
    !
    This is used for small chainable changes to a module. Usually combined with
    module. (.mm-has-svg)
    !
    State ( .is-statename )
    !
    State classes are used to represent different states of a module, not changes to the
    module. (.is-disabled)

    View Slide

  19. Order of properties

    View Slide

  20. View Slide

  21. View Slide

  22. Refactor as we go

    View Slide

  23. Check CSS output (Sassmeister)

    View Slide

  24. Why Sass is a slippery slope

    View Slide

  25. Design and CSS workshops

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. Design + Engineering JAMBOREE

    View Slide

  30. Good Sass can not exist separately
    from good design

    View Slide

  31. saydaily.com/2014/09/css-at-say-media
    !
    @smithschwartz

    View Slide