Responsive News Grid system

_grid.scss

$bootstrap: false !default;
$scaffold:  true  !default; // Output .span-n classes?
$selector-type: if($scaffold, ".", "%") !default;
$old-ie:   false !default;

$total-columns:   12   !default;
$gutter:          8px  !default;

$container-width: 100%  !default;
$min-width:       240px !default;
$max-width:       976px !default;


//
// Width (in percents) of $n columns
// Usage: `width: span(5);` (5 cols out of the default 12 cols)
// Or: `width: span(3, 5);` (3 main-grid cols inside a 5 cols container)

@function span(
  $n,
  $location: $total-columns,
  $container-width: $container-width
) {
  $width: $container-width / $location * $n;
  $fix-blackberry-os5-rounding-issue: 0.00100066;
  @if $width == 50% {
    @return $width - $fix-blackberry-os5-rounding-issue;
  }
  @return $width;
}


@mixin grid-prevent-collapsing($min-width) {
  body {
    min-width: $min-width;
  }
}

//
// .inner class, used to add gutters between columns

@mixin grid-spacing($gutter) {
  .inner {
    padding: {
      left:  $gutter/2;
      right: $gutter/2;
    }
  }
  .inner-vertical {
    padding: {
      top:    $gutter/2;
      bottom: $gutter/2;
    }
  }
  .inner-large {
    padding: $gutter;
  }
}


@mixin grid-container-bootstrap(
  $gutter,
  $min-width: 0,
  $max-width: 0,
  $container-width: $container-width
) {
  .container {
    @extend .clearfix !optional;

    @if $core {
      padding: {
        left:  4px;
        right: 4px;
      }
      max-width: 976px + 16px;

      margin: {
        left:  auto;
        right: auto;
      }
      
      @media (min-width: 400px) {
        padding: {
          left:  12px;
          right: 12px;
        }
      }
      @media (min-width: 600px) {
        padding: {
          left:  8px;
          right: 8px;
        }
      }
    }
    @if $old-ie {
      width: $container-width + $gutter;
      max-width: none;
    }
  }
}


//
// Provide an abstraction for first-level columns

@mixin grid-column-abstraction($gutter, $selector-type: $selector-type) {
  #{$selector-type}column {
    @if $bootstrap {
      float: left;
      @if $old-ie {
        display: inline;
        *zoom: 1;
      }
    }
  }
}

//
// Extend .column or %column depending on the developer's choice

@mixin column($selector-type: $selector-type) {
  @extend #{$selector-type}column !optional;
}


// 
// Output columning classes (or abstracts)

@mixin grid-scaffold($selector-type, $container-width: $container-width) {
  @for $i from 1 through $total-columns {
    #{$selector-type}span-#{$i} {
      width: span($i, $total-columns, $container-width);
      @include column($selector-type);
    }
  }
}

//
// Let the magic happen…

@mixin grid(
  $container-width: $container-width,
  $gutter:          $gutter,
  $min-width:       $min-width,
  $max-width:       $max-width
) {
  @if $core {
    .clearfix {
      @include clearfix;
    }
  }

  @include grid-column-abstraction($gutter);
  @include grid-scaffold($selector-type, $container-width);

  @include grid-spacing($gutter);
  @if $core {
    @media screen and (min-width: 600px) {
      @include grid-spacing(16px);
    }
  }
  
  @include grid-prevent-collapsing($min-width);
  @include grid-container-bootstrap($gutter, $min-width, $max-width, $container-width);
}