structure your sass badcamp 2013
DESCRIPTION
So you've heard of SASS, maybe you're using it already. Look how pretty it makes your code! That is until you get a list, in a block, that comes from a view, that also uses some mixins and a media query. How does the SASS code structure fit in with your Drupal theme? What if you want to use your own grid? Should you put those rules in a separate stylesheet or maybe a partial? (Wait, what's a partial??) This session will cover: - How to most effectively use SASS variables, mixins, extends, partials, and more - An intro to how the popular Zen base theme uses SASS out-of-the-box - How to use SASS to make your theme (and your design!) more semantic - An intro to SMACSS (Scalable and Modular Architecture for CSS) - How to easily go from prototype to theme, without duplicating your work And will raise even more questions, such as: - Where did all these media queries come from? And.. - Where did my line numbers go and how do I get them back?! The target audience is proficient in CSS and interested in making the most out of the SASS (Syntactically Awesome Stylesheets) for their next Drupal theme or project.TRANSCRIPT
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