smacss
DESCRIPTION
TRANSCRIPT
SMACSS
Scalable to…
• Large projects• Large teams•Multiple projects
Modular
Use concepts to simplify CSS and rethink how we code
Categorization
Thinking about the role that a piece of code plays
Naming Convention
Clarifying the intent via a consistent clear selector name.
#navigation ul li span{ background-image: url(‘arrow.png’); color: #CCC; padding-left: 16px;}
.nav-arrow{ background-image: url(‘arrow.png’); padding-left: 16px;}.muted-text{ color: #CCC;}
Scaling CSS for large applications
Base
Layout
Module
State
Theme
a{ color: #039;}a:hover{ color: #03F;}
Base
html,body{ margin: 0; padding: 0;}input[type='text']{ border: 1px solid #999;}
Or, use a pre-made one!http://necolas.github.com/normalize.css/
Layout
body{ width: 960px; margin: 0 auto;}#sidebar{ width: 160px;}#content{ width: 760px;}
#sidebar,#content{ float: left; padding: 10px;}#footer{ clear: both;}
Or, use a pre-made one!http://960.gs/http://blueprintcss.org/http://twitter.github.com/bootstrap/
ModuleHeader
Primary Navigation
Secondary Navigation
Primary/FeaturedContent
Tertiary Content
Secondary Content
Feature Feature Feature
Feature Feature FeatureList
Modules
• <span> and <div> are container that have no meaning.• <img>, <p>, <header>, <footer>
have some semantic meaning• A well named CSS class has even
more meaning
Modules
<div class="folder"> <span>My Folder</span></div><div class="folder"> <span>Another Folder</span></div>
.folder > span{ padding-left: 20px; background: url('icon.png');}
Modules
<div class="folder"> <span>My Folder</span> <span>(31 items)</span></div><div class="folder"> <span>Another Folder</span> <span>(17 items)</span></div>
.folder > span{ padding-left: 20px; background: url('icon.png');}
Modules
<div class="folder"> <span class="folder-name">My Folder</span> <span class="folder-items">(31 items)</span></div><div class="folder"> <span class="folder-name">Another Folder</span> <span class="folder-items">(17 items)</span></div>
.folder-name{ padding-left: 20px; background: url('icon.png');}.folder-items{ color: #999;}
Modules
•Be Specific•Be Meaningful
Resources
• Smacss.com• AppRiver Library Book (at my desk)