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

Sass at Say Media

Sass at Say Media


Smith Schwartz

October 03, 2014


  1. Sass at

  2. We style multiple sites with one codebase

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

  4. Content focused design for publishers

  5. None
  6. None
  7. None
  8. None
  9. None
  10. Continuous improvement for point of view publishing

  11. Custom Sass variables and assets

  12. Libsass

  13. Size of our team

  14. Naming conventions

  15. 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)
  16. 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)
  17. Order of properties

  18. None
  19. None
  20. Refactor as we go

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