gistfile1.css

/**
 * @file _grid.scss
 *
 * This file contains the grid definitions for MUSC.
 */


$num_columns: 12;
$column_width: 60px;
$gutter_width: 20px;

.container {
  width: ($column_width * $num_columns) + ($gutter_width * ($num_columns - 1));
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.row {
  @extend .clearfix;
  margin: 0 0 $gutter_width (-$gutter_width);
}

.column {
  float: left;
  display: inline;
  margin: 0 0 0 $gutter_width;
}

@function grid-width($n) {
  @return ($column_width * $n) + ($gutter_width * ($n - 1));
}

@function grid-offset($n) {
  @return ($column_width + $gutter_width) * $n;
}

@for $i from 1 through 12 {
  .grid-#{$i} {
    @extend .column;
    width: grid_width($i);
  }
}