My Prototyping Grid. Light weight, mobile-first, customizable, responsive, SCSS and based loosely on Twitter Bootstrap's grid. View the demo on Codepen: http://codepen.io/andymcfee/pen/jIpyk

grid.scss

// Quick-and-dirty mobile-first, responsive SCSS Grid for rapid prototyping.  
// --------------------------------------------------------------------------
@import 'compass';

// Compass is only used for these first two selectors:
* { @include box-sizing(border-box); }
.row { @include clearfix; }

// Customizables
$grid-gutter: 20px; // Total space between columns
$grid-breakpoint: 800px; // Grid columns will stack below this point

[class^="span"],
[class*="span"] {
  display: block;
  margin-bottom: $grid-gutter;
  padding: 0;
  width: 100%;

  @media (min-width: $grid-breakpoint) {
    float: left;
    padding: 0 $grid-gutter / 2;
    &:first-child { padding-left:  0; }
    &:last-child  { padding-right: 0; }
  }
}


// So that you don't need to wrap span-full in a row container
.span12,
.span-full {
  width: 100%;
  float: none;
  padding: 0;
}

// 12-col grid
$col: 100% / 12;
@media (min-width: $grid-breakpoint) {
  .span1  { width: $col;      }
  .span2  { width: $col * 2;  }
  .span3  { width: $col * 3;  }
  .span4  { width: $col * 4;  }
  .span5  { width: $col * 5;  }
  .span6  { width: $col * 6;  }
  .span7  { width: $col * 7;  }
  .span8  { width: $col * 8;  }
  .span9  { width: $col * 9;  }
  .span10 { width: $col * 10; }
  .span11 { width: $col * 11; }
  .span12 { width: $col * 12; }
}

// Semantic aliases
.span-full           { @extend .span12; } // 100%
.span-half           { @extend .span6;  } // 50%
.span-third,
.span-one-third      { @extend .span4;  } // 33.333%
.span-two-thirds     { @extend .span8;  } // 67.666%
.span-quarter,
.span-one-quarter    { @extend .span3;  } // 25%
.span-three-quarters { @extend .span9;  } // 75%

index.html

<!-- Usage  -->

<div class="span-full">...</div>
<div class="span12">...</div>


<div class="row">
  <div class="span-half">...</div>
  <div class="span-half">...</div>
</div>

<div class="row">
  <div class="span4">...</div>
  <div class="span4">...</div>
  <div class="span-one-third">...</div>
</div>

<div class="row">
  <div class="span-quarter">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>

<div class="row">
  <div class="span-half">...</div>
  <div class="span4">...</div>
  <div class="span2">...</div>
</div>