Module styles
• Distinct visual elements
• Correspond to your style guide
elements
• Submodules should use a prefix
•
Slide 20
Slide 20 text
Module styles
// a Module can contain elements
.hero-unit { padding: 60px; }
.hero-unit h1 { font-size: 60px; }
// a Module can have Submodules
.btn { display: inline-block; padding: 4px 14px; }
.btn-large { padding: 9px 14px; font-size: 16px }
Slide 21
Slide 21 text
Bootstrap has some
great MODULES
Slide 22
Slide 22 text
State styles
• define state of a Layout or Module
• prefixed with “is-”
• live with their Layout or Module
• correspond to javascript state changes
Slide 23
Slide 23 text
State styles
// Layout states
.is-collapsed { display: none; }
.is-expanded { display: block; }
// Module states
.is-disabled { background: $grey }
.is-active { background-color: $green }
// or prefix the Module name
.btn-is-disabled { background: $grey }
.btn-is-active { background-color: $green }
Slide 24
Slide 24 text
Don’t know what to
write here
Slide 25
Slide 25 text
Theme styles
• Define distinct changes in the style of
the site
• User defined styles
• Dark or Light
Slide 26
Slide 26 text
Theme styles
• Define distinct changes in the style of
the site
• User defined styles
• Dark or Light
Slide 27
Slide 27 text
Theme styles
• Define distinct changes in the style of
the site
• User defined styles
• Dark or Light
Slide 28
Slide 28 text
Forget about
THEMES for now
Slide 29
Slide 29 text
SMACSS
teaches us important practices
Slide 30
Slide 30 text
Avoid Coupling
// the base module
.well { border: 1px $grey; font-size: 14px; }
// this is coupled
#sidebar .well { font-size: 12px }
// create a sub-module instead
.well-small { font-size: 12px; }
Slide 31
Slide 31 text
!important
• if you need to use important DON’T
• a State is the only excusable use
Slide 32
Slide 32 text
Semantic & Specific
// this is bad
.hero-unit div { }
// this is better
.hero-unit .body { }
// this is best
.hero-unit-body { }
Slide 33
Slide 33 text
Maximum depth of 2
// this is bad
.hero-unit header h1 small .icon { }
// this is better
.hero-unit .header-icon { }
// this is worse?
.hero-unit-header-icon { }
Slide 34
Slide 34 text
Module Structure
// base Module
.btn { ... }
// Sub Modules
.btn-large { ... }
// Module states
.btn-is-active { ... }
Slide 35
Slide 35 text
Media Queries
// define the default display
.span {
float: left; margin-left: 20px;
}
// define the changes
@media screen and (max-width: 400px) {
.span {
float: none;
display: block;
width: 100%;
}
}