@gregtarnoff
CSS Processes
& Workflows
What are we
talking about?
- SMACSS
- Sass
- LiveReload
What is SMACSS?
Scalable and Modular
Architecture for CSS
HUH???
Breaks Down CSS
- Base
- Layout
- Module
- State
- Theme
OH! I get That.
Well maybe not...
Base
The foundation.
Establish a clean workspace and build up
- Reset
- Typography rules (not fonts)
Example
html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }
Layout
How will it all look?
- Grid
- Positioning
- Media Queries
Naming Conventions
- .l-fixed
- .l-grid
- .l-flipped
Example
.l-grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.l-grid > li {
display: inline-block;
margin: 0 0 10px 10px;
}
Module
Reusable components.
- Buttons
- Sidebars
- Callouts
- Products
- Modals
Naming Conventions
-
.module
-
.module-headline
-
.module-paragraph
Example
.pod {
width: 100%;
}
.pod input[type=text] {
width: 50%; }
.pod-constrained input[type=text] {
width: 100%;
}
.pod-callout {
width: 200px;
}
.pod-callout input[type=text] {
width: 180px;
}
State
How things look in when not a default case.
- Warnings
- Errors
- Successes
- Messages
- Alerts
- Hover/Focus/Active
Naming Conventions
-
.is-error
-
.is-alert
-
.is-message
-
.is-collapsed
-
.is-expanded
Example
.tab {
background-color: purple;
color: white;
}
.is-tab-active {
background-color: white;
color: black;
}
Theme
Specific styles and colors for this site.
The only piece you'd have to change for a re-skin.
- Colors
- Fonts
- Images
Naming Conventions
- .theme-border
- .theme-background
-
.theme-headline
What is Sass?
Syntactically Awesome Stylesheets
Huh???
Sass is a Pre-Processor
It allows us to use variables, mixins, partials, extensions and nesting effectively in CSS.
It essentially turns CSS into a programming language of its own.
File Conventions
- .scss file extension
- _filename.scss is a "Partial"
- @import "partialname"
- Compiles to CSS
Use With SMACSS
_colors.scss, _fonts.scss, _reset.scss, _grid.scss,
_buttons.scss, _messages.scss, _base.scss, _layout.scss,
_modules.scss, _states.scsss, _theme.scss
Finally, import them to main.scss
Variables
$colorDark : #333333;
$colorLight : #efefef;
$colorPrimary : #0567a4;
$colorSecondary : #cc0000;
$colorTertiary : #a4d218;
$headlineColor : $colorPrimary;
$callToActionColor : $colorTertiary;
Mixins
@mixin button($color, $font-color) {
border-radius:.25em;
font-weight:bold;
text-decoration:none;
padding: .5em 1em;
margin: .5em;
color: $font-color;
border: 1px solid $color;
text-align: center;
display: inline-block;
}
Mixins
@mixin light-gradient($color, $font-color){
background: $color; /* Old browsers */
background: linear-gradient(to bottom, lighten($color, 20%) 0%,darken($color, 16%) 100%); /* W3C */
}
Mixins
@mixin standard-button($color, $font-color) {
@include light-gradient($color, $font-color);
@include button($color, $font-color);
}
.button {
@include standard-button($colorPrimary, $colorDark);
}
Nesting
.nav {
margin: .25em .5em;
text-align:center;
li {
float:left;
display:inline-block;
@media screen and (max-width: $break-small){
display: block;
float:none;
}
}
}
Nesting
.nav { margin: .25em .5em; text-align: center; } .nav li { float: left; display: inline-block;} @media screen and (max-width: 200px) { .nav li { display: block; float: none;
}
}
Extension
.button-cancel {
@extend .button;
@include standard-button($cancel-button-color, $light-text);
&:hover, &:focus {
@include standard-button(darken($cancel-button-color, 20), $light-text);
}
}
Extension
.button-cancel {
background: #777777; /* Old browsers */
background: linear-gradient(to bottom, #aaaaaa 0%, #4e4e4e 100%); /* W3C */
border-radius: .25em;
font-weight: bold;
text-decoration: none;
padding: .5em 1em;
margin: .5em;
color: white;
border: 1px solid #777777;
text-align: center;
display: inline-block; }
Extension
.button-cancel:hover, .button-cancel:focus {
background: #444444; /* Old browsers */
background: linear-gradient(to bottom, #777777 0%, #1b1b1b 100%); /* W3C */
border-radius: .25em;
font-weight: bold;
text-decoration: none;
padding: .5em 1em;
margin: .5em;
color: white;
border: 1px solid #444444;
text-align: center;
display: inline-block; }
WHAT IS
LiveReload?
Javascript hook to live refresh pages in the browser upon changes to code
How does it work?
-
LiveReload is an application that monitors folders.
-
It will compile Sass, Coffeescript and other code when a file is changed.
-
It will then talk to the browser via JS or an extension and update the page.
Thank you!
@gregtarnoff
CSS Processes & Workflows
By gregtarnoff
CSS Processes & Workflows
Introduction to SMACSS, Sass and LiveReload
- 1,572