Column Layout Idea for Bespoke

layout-demo.html

<!-- Result: https://cloudup.com/iD68XYKVseY -->

<div class="column-parent">
  <div class="column--8">
    <div class="demo"></div>
  </div>
  
  <div class="column--4">
    <div class="demo"></div>
  </div>
  
  <!-- Nesting works well! -->
  <div class="column--7">
    <div class="column-parent">
      <div class="column--6">
        <div class="demo"></div>
      </div>
      <div class="column--6">
        <div class="demo"></div>
      </div>
    </div>
  </div>
  
  <div class="column--5">
    <div class="demo"></div>
  </div>
</div>

layout.scss

$max-width: 960px;
$total-columns: 12;
$column-width: percentage(1 / $total-columns); // 8.33333% (factored out from ($max-width / $total-column) / $total-columns)
$gutter-width: 1rem; // IE9 supports rem usage

%column {
  @include box-sizing(border-box);
  @include flex(0 0 auto);
  margin: 0 0 1rem;
  min-height: 1px;
  padding-left: $gutter-width;
  
  // IE9 fallback
  display: inline-block;
  font-size: 1rem; // Since parent font-size is 0
  vertical-align: top;
}

// This could be named `.row`, as it is *mostly* a row
// but I find `.row` to be a misnomer as there is a chance
// (when nesting) to have multiple `.row`'s within a single visual row
.column-parent {
  @extend %clearfix;
  @include flexbox;
  @include flex-wrap(wrap);
  max-width: $max-width;
  width: 100%;
  
  // IE9 fallback
  font-size: 0; // cleanly removes inline-block 4px margin 
}
 
@for $i from 1 through $total-columns {
  .column--#{$i} {
    @extend %column;
    width: $column-width * $i;
  }
}


// Not totally sure we want all column sizes to be 100%
// on smaller devices, but that's for another time
// For now, kept from Dan's gist
@media only screen and (max-width: 568px) {
  [class*="column--"] {
    width: 100%;
  }
}


// Just for demo purposes
// .demo is representative of column children
.demo {
  background: #ddd;
  height: 200px;
  position: relative;
}

This is great Sam, the only thing I would change is the padding-left on the column and put it back to padding-left and padding-right, my reason for this is so the grid stays centered on the page, at the moment because the padding is on the left, it makes the page site slightly off center.

%column {
@include box-sizing(border-box);
float: left;
margin: 0 0 1rem;
min-height: 1px;
padding-left: $gutter-width / 2;
padding-right: $gutter-width / 2;
vertical-align: top;
}