Structure Your SASS
Drupal.orgGithubTwitter } penguininja
CSS: What’s the Problem?
● Coding Standards● Predictability● Reusability● Semantic Markup
Enter SMACSS
(Scalable and Modular Architecture for CSS)
Jonathan Snook : smacss.com
SMACSS Basics
● General to Specific● Identify Patterns● Modules as Standalone
Components● Increase Semantics
SMACSS Organization
1. Base2. Layout3. Module4. State5. Theme
Still Some Issues...
● Non-Semantic Classes● Not enough control over
Drupal markup
Semantic Class Names : css-tricks.com/semantic-class-names
Make it Better with SASS
Semantic Grids
Zen Gridszengrids.comThe Semantic Grid Systemsemantic.gsSimple Semantic Grid : github.com/penguininja/simple-semantic-grid
Semantic Grids$max-width: 960px;
article {@include column(9);
}
aside {@include column(3);
}
Make it Better with SASS
● Increased Reusability● Cleaner Module Code● Style Tile Integration
Use Mixins
Make it Better with SASS
Use Partials to Reduce Number of Stylesheets While Staying Modular
SASS Partials
@import “base”;@import “layout”;@import “navigation”;@import “widget”;
Make it Better with SASS
● Nest Media Queries● Group All Module Styles
Together
Media Queries.widget {
width: 50%;
@media screen and (max-width: 600px) {width: 100%;
}}
Example: Zen 5.4
Don’t Panic!
Questions?
Drupal.orgGithubTwitter } penguininja
Recommended
