Sass at Say Media

Transcript

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
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
20. Refactor as we go
21. saydaily.com/2014/09/css-at-say-media ! @smithschwartz