Grid System

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
.container {
  position: relative;
  margin: 0 auto;
  padding: 0;
  & .alpha {
    margin-left: 0;
  }
  & .omega {
    margin-right: 0;
  }
}

.column, .columns {
  float: left;
  margin-left: $gutter/2;
  margin-right: $gutter/2;
}

.alpha-omega {
  margin-right: 0;
  margin-left: 0;
}

.row {
  margin-bottom: $gutter;
}

Desktop Grid

@include grid($desktop-container-width, $column-count, $gutter);

Tablet Grid

@media only screen and (max-width: $tablet-max-breakpoint) {
  @include grid($tablet-container-width, $column-count, $gutter);

  .container {
    width: $tablet-container-width;
    & .alpha {
      margin-right: 10px;
    }
    & .omega {
      margin-left: 10px;
    }
  }
}

Mobile Grid

Every column element in this grid is the total grid width

@media only screen and (max-width: $mobile-max-breakpoint) {
  .container {
    width: $mobile-container-width;
    & .one,
    & .two,
    & .three,
    & .four,
    & .five,
    & .six,
    & .seven,
    & .eight,
    & .nine,
    & .ten,
    & .eleven,
    & .twelve,
    & .thirteen,
    & .fourteen,
    & .fifteen,
    & .sixteen,
    & .one-third,
    & .two-thirds,
    & .one-half,
    & .one-quarter,
    & .three-quarters
    { width: $mobile-column-width; }

    .column, .columns {
      margin: 0;
    }

    .offset-by-one,
    .offset-by-two,
    .offset-by-three,
    .offset-by-four,
    .offset-by-five,
    .offset-by-six,
    .offset-by-seven,
    .offset-by-eight,
    .offset-by-nine,
    .offset-by-ten,
    .offset-by-eleven,
    .offset-by-twelve,
    .offset-by-thirteen,
    .offset-by-fourteen,
    .offset-by-fifteen { padding-left: 0; }
  }
}

Clearing

Auto-applied clearfix for .container elements

<div class="container"> This element has clearfix applied in browsers that support the :after css selector </div>

General use clearfix class

<div class="clearfix">This haz clearfix</div> Use this clearfix class on parent to clear nested columns, or: wrap each row of columns in a <div class="row">...</div>

Auto-applied clearfix for .row elements

<div class="row"> This element has clearfix applied in browsers that support the :after css selector </div>

Block level clear

You can also use a <br class="clear"> to clear columns

.container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.row:after,
.clearfix:after {
  clear: both;
}

.row, .clearfix {
  zoom: 1;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}