@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
    Made with Slides.com