A CodePen by Zak Kain. More Responsive Grid Systems - by @zakkain, forked from the ever-clever @chriscoyier's "Don't Overthink it Grid". Read my blog post here: http://amperedesign.com/blog/more-responsive-grid-systems/

index.html

<h1>
  A More Responsive Grid System
  <em>based off of the Don't Overthink it Grid</em>
</h1>
<h2><a href="http://amperedesign.com/blog/more-responsive-grid-systems/">Read the full article here</a></h2>

<!-- let the show begin -->

<div class="grid grid-pad">

  <div class="story">
    <article class="module">
      <h3>News Story</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    </article>
  </div> <!-- end story -->
  
  <div class="metadata">
    <aside class="module">
      <h3>Metadata</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    </aside>
  </div> <!-- end metadata -->

</div> <!-- end grid -->

script.js

// Thanks to Chris Coyier for those broad, manly shoulders to stand on.

style.scss

@import "compass";

/* basic styles 
===================== */

* {
  @include box-sizing(border-box);
}

body {
  padding: 1.5em 1.5em 10em;
  background: url(http://subtlepatterns.com/patterns/[email protected]);
  background-size: 300px 300px;
}

h1, a {
  color: white;
  em {
    color: #666;
    font-size: 16px;
  }
}

.module {
  padding: 1.5em;
  background: #ddd;
}


/* the grid system 
============================ */
$pad: 1.5em;

/* the outer container */
.grid { 
  background-color: #eee;
  margin: 0 0 $pad 0;
  padding: $pad 0;
  
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

  /* opt-in outside padding */
  .grid-pad {
    padding-left: $pad;
    .col:last-of-type {
      padding-right: $pad;
    }
  }

/* columns */
%col {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
   /* padding-right: 0;*/
  }
}

%col-1-3 { width: 33.33%; }
%col-2-3 { width: 66.66%; }




/* our grid logic
======================= */

.story {
  @extend %col;
  @extend %col-2-3;
}
.metadata {
  @extend %col;
  @extend %col-1-3;
}

@media all and (max-width: 60em) {
/* the @include would go here, for this CodePen demo I've just fudged it a little and copied in the styles */
  %col-1-4 { width: 25%; }
  %col-3-4 { width: 75%; }
  
  .story {
    @extend %col-3-4;
    background: #BADA55;
  }  
  .metadata {
    @extend %col-1-4;
  }
}

@media all and (max-width: 40em) {
/* the @include would go here, for this CodePen demo I've just fudged it a little and copied in the styles */
  %col-1-1 { width: 100%; }
  
  .story, .metadata {
    @extend %col-1-1;
    background: skyblue;
  }  
}