Simple Responsive Grid Builder

example-markup-rendered.html

<p>Row One</p>
<div class='row'>
  <div class='l--extraSmall--12 l--small--3 l--medium--5 l--large--4 l--extraLarge--12 columns sg--grid'>
    Column 1
  </div>
  <div class='l--small--3 l--medium--5 l--large--4 columns sg--grid'>
    Column 2
  </div>
  <div class='l--small--6 l--medium--2 l--large--4 columns'>
    <div class='row'>
      <div class='l--small--6 columns sg--grid'>
        <p>TESTING 1</p>
      </div>
      <div class='l--small--6 columns sg--grid'>
        <p>TESTING 2</p>
      </div>
    </div>
  </div>
</div>
<p>Row Two</p>
<div class='row'>
  <div class='l--small--12 l--medium--4 l--extraLarge--2 columns sg--grid'>
    Column 1
  </div>
  <div class='l--small--12 l--medium--4 l--extraLarge--2 columns sg--grid'>
    Column 2
  </div>
  <div class='l--small--12 l--medium--4 l--extraLarge--8 columns sg--grid'>
    Column 3
  </div>
</div>

example-markup.haml

%p Row One
.row
  .l--extraSmall--12.l--small--3.l--medium--5.l--large--4.l--extraLarge--12.columns.sg--grid
    Column 1
  .l--small--3.l--medium--5.l--large--4.columns.sg--grid
    Column 2
  .l--small--6.l--medium--2.l--large--4.columns
    .row
      .l--small--6.columns.sg--grid
        %p TESTING 1
      .l--small--6.columns.sg--grid
        %p TESTING 2
        
%p Row Two
.row
  .l--small--12.l--medium--4.l--extraLarge--2.columns.sg--grid
    Column 1
  .l--small--12.l--medium--4.l--extraLarge--2.columns.sg--grid
    Column 2
  .l--small--12.l--medium--4.l--extraLarge--8.columns.sg--grid
    Column 3

grid-output.css

@media (min-width: 31.25em) {
  .l--extraSmall--1 {
    float: left;
    width: 8.33333%;
  }
  .l--extraSmall--2 {
    float: left;
    width: 16.66667%;
  }
  .l--extraSmall--3 {
    float: left;
    width: 25%;
  }
  .l--extraSmall--4 {
    float: left;
    width: 33.33333%;
  }
  .l--extraSmall--5 {
    float: left;
    width: 41.66667%;
  }
  .l--extraSmall--6 {
    float: left;
    width: 50%;
  }
  .l--extraSmall--7 {
    float: left;
    width: 58.33333%;
  }
  .l--extraSmall--8 {
    float: left;
    width: 66.66667%;
  }
  .l--extraSmall--9 {
    float: left;
    width: 75%;
  }
  .l--extraSmall--10 {
    float: left;
    width: 83.33333%;
  }
  .l--extraSmall--11 {
    float: left;
    width: 91.66667%;
  }
  .l--extraSmall--12 {
    float: left;
    width: 100%;
  }
}

@media (min-width: 50em) {
  .l--small--1 {
    float: left;
    width: 8.33333%;
  }
  .l--small--2 {
    float: left;
    width: 16.66667%;
  }
  .l--small--3 {
    float: left;
    width: 25%;
  }
  .l--small--4 {
    float: left;
    width: 33.33333%;
  }
  .l--small--5 {
    float: left;
    width: 41.66667%;
  }
  .l--small--6 {
    float: left;
    width: 50%;
  }
  .l--small--7 {
    float: left;
    width: 58.33333%;
  }
  .l--small--8 {
    float: left;
    width: 66.66667%;
  }
  .l--small--9 {
    float: left;
    width: 75%;
  }
  .l--small--10 {
    float: left;
    width: 83.33333%;
  }
  .l--small--11 {
    float: left;
    width: 91.66667%;
  }
  .l--small--12 {
    float: left;
    width: 100%;
  }
}

@media (min-width: 62.5em) {
  .l--medium--1 {
    float: left;
    width: 8.33333%;
  }
  .l--medium--2 {
    float: left;
    width: 16.66667%;
  }
  .l--medium--3 {
    float: left;
    width: 25%;
  }
  .l--medium--4 {
    float: left;
    width: 33.33333%;
  }
  .l--medium--5 {
    float: left;
    width: 41.66667%;
  }
  .l--medium--6 {
    float: left;
    width: 50%;
  }
  .l--medium--7 {
    float: left;
    width: 58.33333%;
  }
  .l--medium--8 {
    float: left;
    width: 66.66667%;
  }
  .l--medium--9 {
    float: left;
    width: 75%;
  }
  .l--medium--10 {
    float: left;
    width: 83.33333%;
  }
  .l--medium--11 {
    float: left;
    width: 91.66667%;
  }
  .l--medium--12 {
    float: left;
    width: 100%;
  }
}

@media (min-width: 81.25em) {
  .l--large--1 {
    float: left;
    width: 8.33333%;
  }
  .l--large--2 {
    float: left;
    width: 16.66667%;
  }
  .l--large--3 {
    float: left;
    width: 25%;
  }
  .l--large--4 {
    float: left;
    width: 33.33333%;
  }
  .l--large--5 {
    float: left;
    width: 41.66667%;
  }
  .l--large--6 {
    float: left;
    width: 50%;
  }
  .l--large--7 {
    float: left;
    width: 58.33333%;
  }
  .l--large--8 {
    float: left;
    width: 66.66667%;
  }
  .l--large--9 {
    float: left;
    width: 75%;
  }
  .l--large--10 {
    float: left;
    width: 83.33333%;
  }
  .l--large--11 {
    float: left;
    width: 91.66667%;
  }
  .l--large--12 {
    float: left;
    width: 100%;
  }
}

@media (min-width: 112.5em) {
  .l--extraLarge--1 {
    float: left;
    width: 8.33333%;
  }
  .l--extraLarge--2 {
    float: left;
    width: 16.66667%;
  }
  .l--extraLarge--3 {
    float: left;
    width: 25%;
  }
  .l--extraLarge--4 {
    float: left;
    width: 33.33333%;
  }
  .l--extraLarge--5 {
    float: left;
    width: 41.66667%;
  }
  .l--extraLarge--6 {
    float: left;
    width: 50%;
  }
  .l--extraLarge--7 {
    float: left;
    width: 58.33333%;
  }
  .l--extraLarge--8 {
    float: left;
    width: 66.66667%;
  }
  .l--extraLarge--9 {
    float: left;
    width: 75%;
  }
  .l--extraLarge--10 {
    float: left;
    width: 83.33333%;
  }
  .l--extraLarge--11 {
    float: left;
    width: 91.66667%;
  }
  .l--extraLarge--12 {
    float: left;
    width: 100%;
  }
}

.row:after {
  content: " ";
  display: block;
  clear: both;
}

.columns {
  background-color: silver;
  box-shadow: inset 0 0 0 1px white;
}

grid.scss

// ----
// libsass (v3.2.5)
// ----

$grid: (
  columns: 12,
);

// --------------------------------------------------------
// Mixins

@mixin grid-span($target, $context: map-get($grid, columns)) {
  float: left;
  width: percentage($target / $context);
}

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@function pem($pixels, $base: 16) {
  @return strip-unit($pixels)/strip-unit($base) * 1em;
}

$bp: (
  extraSmall: 500px,
  small: 800px,
  medium: 1000px,
  large: 1300px,
  extraLarge: 1800px,
);


@mixin respond-to($breakpoint) {
  // Retrieves the value from the key
  $value: map-get($bp, $breakpoint);
 
  // If the key exists in the map
  @if $value != null {
    // Prints a media query based on the value
    @media (min-width: pem($value)) {
      @content;
    }
  }
 
  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$bp}`. "
        + "Please make sure it is defined in `$bp` map.";
  }
}

// --------------------------------------------------------
// Grid Builder

@each $breakpoint in map-keys($bp) {
  @media (min-width: #{pem(map-get($bp, $breakpoint))}) {
    @for $span from 1 through map-get($grid, columns) {
      .l--#{$breakpoint}--#{$span} {
        @include grid-span($span);
      }
    }
  }
}

// --------------------------------------------------------
// Generic styles

.row {
  &:after {
      content: " ";
      display: block;
      clear: both;
    }
}

.columns {
  background-color: silver;
  box-shadow: inset 0 0 0 1px white;
}