Simple Grid System

grid.sass

/*
 *  File: Grid System
 *  Author: Matt West <matt.west@kojilabs.com>
 */

$gd-container-width: 1200px
$gd-column-width: 100%/12
$gd-padding: 2em

.container
  margin: 0 auto
  width: 100%
  max-width: $gd-container-width

.column,
.columns
  float: left
  display: inline-block
  padding-left: $gd-padding
  padding-right: $gd-padding
  vertical-align: top

  &.twelve
    width: $gd-column-width * 12

  &.eleven
    width: $gd-column-width * 11

  &.ten
    width: $gd-column-width * 10

  &.nine
    width: $gd-column-width * 9

  &.eight
    width: $gd-column-width * 8

  &.seven
    width: $gd-column-width * 7

  &.six
    width: $gd-column-width * 6

  &.five
    width: $gd-column-width * 5

  &.four
    width: $gd-column-width * 4

    &:nth-child(3)
      width: $gd-column-width * 4

  &.three
    width: $gd-column-width * 3

  &.two
    width: $gd-column-width * 2

  &.one
    width: $gd-column-width * 1

  &.centered
    margin: 0 auto
    float: none
    display: block
    clear: both

  &.half-padding
    padding-left: $gd-padding/2
    padding-right: $gd-padding/2

  &.half-padding-left
    padding-left: $gd-padding/2

  &.half-padding-right
    padding-right: $gd-padding/2

  &.no-padding-left
    padding-left: 0

  &.no-padding-right
    padding-right: 0

  &.pad-top-bottom
    padding-top: $gd-padding
    padding-bottom: $gd-padding

  &.padding-top
    padding-top: $gd-padding

  &.padding-bottom
    padding-bottom: $gd-padding

.row
  float: left
  display: block
  width: 100%
  padding-left: 0
  padding-right: 0

.no-padding
  padding-left: 0
  padding-right: 0

.pull-left
  float: left

.pull-right
  float: right


/////////////////////////
// Responsive goodness
/////////////////////////
@media screen and (min-width: 0px) and (max-width: 910px)

  .container
    margin: 0 auto

  .column,
  .columns
    padding-left: 1em
    padding-right: 1em

    &.twelve
      width: $gd-column-width * 12

    &.eleven
      width: $gd-column-width * 12

    &.ten
      width: $gd-column-width * 12

    &.nine
      width: $gd-column-width * 12

    &.eight
      width: $gd-column-width * 12

    &.seven
      width: $gd-column-width * 12

    &.six
      width: $gd-column-width * 12

    &.five
      width: $gd-column-width * 12

    &.four
      width: $gd-column-width * 12

      &:nth-child(3)
        width: $gd-column-width * 12

    &.three
      width: $gd-column-width * 6

    &.two
      width: $gd-column-width * 12

    &.one
      width: $gd-column-width * 12

    &.no-padding
      padding: 0

    &.half-padding
      padding-left: 0
      padding-right: 0

    &.half-padding-left
      padding-left: 0
      padding-right: 0

    &.half-padding-right
      padding-left: 0
      padding-right: 0

    &.no-padding-left
      padding-left: 0
      padding-right: 0

    &.no-padding-right
      padding-left: 0
      padding-right: 0

    &.pad-top-bottom
      padding-top: $gd-padding/2
      padding-bottom: $gd-padding/2

    &.padding-top
      padding-top: $gd-padding/2

    &.padding-bottom
      padding-bottom: $gd-padding/2

@media screen and (min-width: 0px) and (max-width: 560px)

  .column,
  .columns

    &.three
      width: $gd-column-width * 12