A Pen by Nick LaDart.

index.html

<!-- When working on responsive projects you'll more than likely need to define additional breakpoints along the way. This little bit of SASS removes the need for you to manually redefine your grid every time you add a new breakoint. Simply define the grid once and for every breakpoint that you add it will automatically generate the grid for that breakpoint with specific class names. -->

<div class="grid-small-1of1">item</div>

Responsive-Grid-Extender.markdown

Responsive Grid Extender

A small bit of SASS which lets you define new breakpoints and will automatically generate new grid classes for that breakpoint.

A Pen by Nick LaDart on CodePen.

License.

style.scss

@import "compass";
// As used by Compass.
// Used to calculate the em value for the media queries.
// If you're not using ems for your media queries, why the hell not?
$browser-default-font-size: 16px;

// Define your breakpoints by supplying a name and a pixel value. Units will get stripped so you can add 'px' for clarity if you prefer.
$breakpoints: false !default;
//$breakpoints: small 480px, medium 768, large 960;

// Strip units from values so we can do maths and shit.
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// Loop through each defined breakpoint to generate our grids.
@if $breakpoints {
@each $breakpoint in $breakpoints {

  // Get the breakpoint details.
  $breakpoint-name: nth($breakpoint,1);
  $breakpoint-value: strip-unit(nth($breakpoint,2)) / strip-unit($browser-default-font-size);

  // Define your grid.
  @media (min-width: #{$breakpoint-value}em) {
    .grid-#{$breakpoint-name}-1of1 {
      width: 100%;
    }
    .grid-#{$breakpoint-name}-1of2 {
      width: 50%;
    }
    .grid-#{$breakpoint-name}-1of3 {
      width: 33.333%;
    }
    .grid-#{$breakpoint-name}-1of4 {
      width: 25%;
    }
    .grid-#{$breakpoint-name}-1of5 {
      width: 20%;
    }
  }
};
}