Based on Yahoo's Pure Framework this is the easiest way of implementing a grid I found. I like to use this to preview or prototype projects. It can be imported to your SCSS, the "_" tells Compass to not compile this file. Notice: This is a Prototyping helper! It doesn't automatically calculate available space. You have to extend the Helper on ev…

_helper.GRID.scss

$break: 50em;
/* the father is always the container of a Grid system. In the example it's the .wrapper class */

%grid--father {
  letter-spacing:-0.31em;

}


/* every element of the Grid is a son. Notice: You need to apply the width to the specific class! */
%grid--son {
  letter-spacing:0em;
  display:inline-block;
  vertical-align:top;
}


/* third level nesting. It's a bit hacky but it works fine for Prototyping. */
%grid--grandson {
  letter-spacing:0em;
  display:inline-block;
  vertical-align:top;
  margin-left:-0.31em;
  &:first-of-type {
    margin-left:0em;
  }
}


/* As this whole thing is just basic and prototyping the "Responsive" Version only displays all elements as block if the screen get's too small. You'll likely need to optimize this for your Prototype by setting the $break:; var */

@media all and (max-width:$break) {
%grid--father {
  letter-spacing:-0.31em;
}

%grid--son {
  letter-spacing:0em;
  display:block;
  vertical-align:top;
}

%grid--grandson {
  letter-spacing:0em;
  display:inline-block;
  vertical-align:top;
  margin-left:-0.31em;
  
    &:first-of-type {
      margin-left:0em;
    }
 }
}

_USAGE.scss

@import "helper.GRID";


.wrapper {
  width:100%;
  max-width:70em;

  @extend %grid--father;
}

.sidebar {
  width:20%;
  max-width:20em;
  height:auto;
  
  @extend $grid--son;
}

.content {
  width:80%;
  max-width:50em;
  height:auto;
  
  @extend $grid--son;
}

example.html

<section class="wrapper">
  <aside class="sidebar">
    <h1>Father & Son Grid</h1>
    <p>Actually it's Grandfather, Father and Son but I liked the Father & Son thing more. </p>
  </aside>
  
  <section class="content">
    <article class="single__article">
      <h2 class="article--headline">Lorem Ipsum Dolor</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero aperiam ab facilis velit eaque delectus qui dolores sapiente quia provident amet natus suscipit excepturi explicabo dolorem debitis pariatur eius nesciunt!</p>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero aperiam ab facilis velit eaque delectus qui dolores sapiente quia provident amet natus suscipit excepturi explicabo dolorem debitis pariatur eius nesciunt!</p>
      
      <footer>
        <div class="share has-grid">
          <p>Lorem</p>
          <div class="evendeeper">1</div>
          <div class="evendeeper">2</div>
          <div class="evendeeper">3</div>
          <div class="evendeeper">4</div>
        </div>
        <div class="share">Lorem</div>
        <div class="share has-grid">
          <p>Lorem</p>
          <div class="evendeeper">1</div>
          <div class="evendeeper">2</div>
          <div class="evendeeper">3</div>
          <div class="evendeeper">4</div>
        </div>
      </footer>
    </article> <!-- single article -->
  </section>
</section>

example.scss

@import "compass";
@import "helper.GRID"
/*
  Vars
*/

$baseFont: Arial, Helvetica, sans-serife;
$break: 50em;


%grid--father {
  letter-spacing:-0.31em;

}

%grid--son {
  letter-spacing:0em;
  display:inline-block;
  vertical-align:top;
}


%grid--grandson {
  letter-spacing:0em;
  display:inline-block;
  vertical-align:top;
  margin-left:-0.31em;
  &:first-of-type {
    margin-left:0em;
  }
}

@media all and (max-width:$break) {
%grid--father {
  letter-spacing:-0.31em;
}

%grid--son {
  letter-spacing:0em;
  display:block;
  vertical-align:top;
}

%grid--grandson {
  letter-spacing:0em;
  display:inline-block;
  vertical-align:top;
  margin-left:-0.31em;
  &:first-of-type {
    margin-left:0em;
  }
}
}


/* Basic reset stuff*/
* {
  margin:0;
  padding:0;
  position:relative;
  @include box-sizing(border-box);
}

body {
  font:1rem/1.2rem Arial, Helvetica, sans-serife;
  color:#000;
  background:#fff;
}

.wrapper {
  width:100%;
  max-width:50em;
  margin:2.5em auto;
  
  @extend %grid--father;
}  

.sidebar {
  width:20%;
  max-width:20em;
  
  @extend %grid--son;
}

.content {
  width:80%;
  max-width:30em;
  
  @extend %grid--son;
}

footer {
  @extend %grid--father;
}

.share {
  width:33.33333333333%;
  border:1px solid red;
  @extend %grid--son;
}

.has-grid {
  width:25%;
  @extend %grid--father;
}

.evendeeper {
  width:25%;
  border:1px solid blue;
  @extend %grid--grandson;
}