16 column grid

@mixin span($num, $gutter_pc, $gutter_px, $padding, $max_columns) {
    $one_col: (100% - ($gutter_pc * ($max_columns - 1))) / $max_columns;
    width:($one_col * $num) + ($gutter_pc * ($num - 1));
    border-left-width:$gutter_px;
    padding:$padding;
    margin-left:$gutter_pc;
}

@mixin offset($num, $gutter_pc, $gutter_px, $padding, $max_columns) {
    $one_col: (100% - ($gutter_pc * ($max_columns - 1))) / $max_columns;
    margin-left:($one_col * $num) + ($gutter_pc * ($num - 1));
}
@mixin offset-right($num, $gutter_pc, $gutter_px, $padding, $max_columns) {
    $one_col: (100% - ($gutter_pc * ($max_columns - 1))) / $max_columns;
    margin-right:($one_col * $num) + ($gutter_pc * ($num - 1));
}

@mixin span_first {
    margin-left:0;
}

  
$max_columns: 16;
$padding: 0 20px;
$gutter_px: 20px;
$gutter_pc: 0;

.row {
    margin-left:-$gutter_px;
    @extend %clearfix;
}

%col {
  border:0px solid rgba(0,0,0,0);
  border-left-width:$gutter_px;
  padding:0 $gutter_px;
  float: left;
  @extend %clearfix;
}
.col {
  @extend %col;
}


.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .span13, .span14, .span15, .span16 {
  width: 100%;
}

@media only screen and (min-width: 768px) {
    
  .span1 {
    @include span(1, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span2 {
    @include span(2, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span3 {
    @include span(3, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span4 {
    @include span(4, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span5 {
    @include span(5, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span6 {
    @include span(6, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span7 {
    @include span(7, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span8 {
    @include span(8, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span9 {
    @include span(9, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span10 {
    @include span(10, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span11 {
    @include span(11, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span12 {
    @include span(9, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span13 {
    @include span(10, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span14 {
    @include span(11, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span15 {
    @include span(11, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .span16 {
    @include span_first;
    width:100%;
    margin-left:0;
  }

  .offset1 {
    @include offset(1, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset2 {
    @include offset(2, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset3 {
    @include offset(3, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset4 {
    @include offset(4, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset5 {
    @include offset(5, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset6 {
    @include offset(6, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset7 {
    @include offset(7, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset8 {
    @include offset(8, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset9 {
    @include offset(9, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset10 {
    @include offset(10, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset11 {
    @include offset(11, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset12 {
    @include offset(11, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset13 {
    @include offset(11, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset14 {
    @include offset(11, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  .offset15 {
    @include offset(11, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
  
  .offset-right1 {
    @include offset-right(1, $gutter_pc, $gutter_px, $padding, $max_columns);
  }
}