@gregtarnoff
tarnoff.info

CSS Processes 

& Workflows

What are we 

talking about?

  • SMACSS
  • Sass
  • LiveReload

What is SMACSS?

Scalable and Modular 

Architecture for CSS

HUH???

Breaks Down CSS 

  1. Base
  2. Layout
  3. Module
  4. State
  5. 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
    tarnoff.info