Structure Your SASS BADcamp 2013
-
Upload
penguininja -
Category
Technology
-
view
113 -
download
0
description
Transcript of Structure Your SASS BADcamp 2013
![Page 1: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/1.jpg)
Structure Your SASS
Drupal.orgGithubTwitter } penguininja
![Page 2: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/2.jpg)
CSS: What’s the Problem?
● Coding Standards● Predictability● Reusability● Semantic Markup
![Page 3: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/3.jpg)
Enter SMACSS
(Scalable and Modular Architecture for CSS)
Jonathan Snook : smacss.com
![Page 4: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/4.jpg)
SMACSS Basics
● General to Specific● Identify Patterns● Modules as Standalone
Components● Increase Semantics
![Page 5: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/5.jpg)
SMACSS Organization
1. Base2. Layout3. Module4. State5. Theme
![Page 6: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/6.jpg)
Still Some Issues...
● Non-Semantic Classes● Not enough control over
Drupal markup
Semantic Class Names : css-tricks.com/semantic-class-names
![Page 7: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/7.jpg)
Make it Better with SASS
Semantic Grids
Zen Gridszengrids.comThe Semantic Grid Systemsemantic.gsSimple Semantic Grid : github.com/penguininja/simple-semantic-grid
![Page 8: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/8.jpg)
Semantic Grids$max-width: 960px;
article {@include column(9);
}
aside {@include column(3);
}
![Page 9: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/9.jpg)
Make it Better with SASS
● Increased Reusability● Cleaner Module Code● Style Tile Integration
Use Mixins
![Page 10: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/10.jpg)
Make it Better with SASS
Use Partials to Reduce Number of Stylesheets While Staying Modular
![Page 11: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/11.jpg)
SASS Partials
@import “base”;@import “layout”;@import “navigation”;@import “widget”;
![Page 12: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/12.jpg)
Make it Better with SASS
● Nest Media Queries● Group All Module Styles
Together
![Page 13: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/13.jpg)
Media Queries.widget {
width: 50%;
@media screen and (max-width: 600px) {width: 100%;
}}
![Page 14: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/14.jpg)
Example: Zen 5.4
![Page 15: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/15.jpg)
Don’t Panic!
![Page 16: Structure Your SASS BADcamp 2013](https://reader034.fdocuments.us/reader034/viewer/2022051210/54c75fdc4a795918288b4575/html5/thumbnails/16.jpg)
Questions?
Drupal.orgGithubTwitter } penguininja