responsive breakpoint grid, uses SASS mixin for media queries: @include breakpoint(mobile) { }

_grid.scss

/* # Grid Settings
--------------------------------------------- */

/* Base Size */
$font-size: 18px;

/* Gutters */
$gutter: 1em;

/* Breakpoint Widths (ems) */
$breakpoint-full: 48em;
$breakpoint-large: 48em;
$breakpoint-base: 48em;
$breakpoint-tablet: 48em;
$breakpoint-mobile-landscape: 420px;
$breakpoint-mobile: 300px;

/* Breakpoint Multipliers (base = 1) */
$breakpoint-full-multiplier: 1.414;
$breakpoint-large-multiplier: 1.25;
$breakpoint-base-multiplier: 1;
$breakpoint-tablet-multiplier: 0.751;
$breakpoint-mobile-landscape-multiplier: 1;
$breakpoint-mobile-multiplier: 1;

/* # Grid Font Size
--------------------------------------------- */

html {
	font-size: $font-size;
}

/* # Grid Mixin
--------------------------------------------- */

/* Defaults */
/* Note: $columns must match the number of names in $column-names */
$columns: 16;
$column-names: one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen;

$em_fix: 0.005em; // offset widths to account for rounding errors

/* Base grid structure */

@mixin breakpoint_grid($base-width, $gutter, $breakpoint-size, $breakpoint-multiplier:1, $columns:$columns, $column-names:$column-names) {

	$base-columnwidth: $base-width / $columns;
	$base-onecolumn: $base-columnwidth - $gutter - $em_fix;

	.container {
		position: relative;
		width: $base-width;
		margin: 0 auto;
		padding: 0;
		font-size: 1em * $breakpoint-multiplier;

		/* Rows */
		.row {
			clear: both;
			margin-bottom: $gutter;
		}
		/* Columns */
		.column,
		.columns {
			float: left;
			display: inline;
			min-height: 1px;
			margin-left: $gutter / 2;
			margin-right: $gutter / 2;
			font-size: $breakpoint-size !important;
		}
		/* Nested Column Classes */
		.column.alpha, .columns.alpha {
			margin-left: 0;
		}
		.column.omega, .columns.omega {
			margin-right: 0;
		}
		/* Base Grid */
		$i: 0;
		@each $name in $column-names {
			.#{$name}.column,
			.#{$name}.columns {
				width: $base-onecolumn + $base-columnwidth * $i;
			}
			$i: $i + 1;
		}
		/* Column Thirds */
		.one-third.column,
		.one-third.columns {
			width: ($base-width / 3) - $gutter - $em_fix;
		}
		.two-thirds.column,
		.two-thirds.columns {
			width: ($base-width / 3 * 2) - $gutter - $em_fix;
		}
		/* Offsets */
		$i: 1;
		@each $name in $column-names {
			.offset-by-#{$name} {
				padding-left: $base-columnwidth * $i;
			}
			$i: $i + 1;
		}
	}
}

/* Merge all columns into one */

@mixin breakpoint_grid_collapse($base-width, $breakpoint-multiplier:1, $columns:$columns, $column-names:$column-names) {

	.container {
		width: $base-width;
		font-size: 1em * $breakpoint-multiplier;

		/* Columns */
		.columns,
		.column {
			margin: 0;
			font-size: 1em !important;
		}
		/* Base Grid */
		$i: 0;
		@each $name in $column-names {
			.#{$name}.column,
			.#{$name}.columns {
				width: $base-width;
			}
			$i: $i + 1;
		}
		/* Column Thirds */
		.one-third.column,
		.one-third.columns,
		.two-thirds.column,
		.two-thirds.columns {
			width: $base-width;
		}
		/* Offsets */
		@each $name in $column-names {
			.offset-by-#{$name} {
				padding-left: 0;
			}
		}
	}

}

/* # Media Queries
--------------------------------------------- */

/* Media Queries */
@mixin breakpoint($point) {
	@if      $point == large {
		@media only screen and (min-width: 1220px) and (min-height: 900px) { @content; }
	}
	@else if $point == full {
		@media only screen and (min-width: 1520px) and (min-height: 1000px) { @content; }
	}
	@else if $point == tablet {
		@media only screen and (min-width: 768px) and (max-width: 1059px) { @content; }
	}
	@else if $point == mobile {
		@media only screen and (max-width: 767px) { @content; }
	}
	@else if $point == mobile_landscape {
		@media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
	}
	@else if $point == retina {
		$ratio: 1.5;
		$dpi: $ratio * 96;
		$opera-ratio: $ratio * 100;
		@media only screen and (-webkit-min-device-pixel-ratio: #{$ratio}),
			   only screen and (     -o-min-device-pixel-ratio: '#{$opera-ratio}/100'),
			   only screen and (                min-resolution: #{$dpi}dpi),
			   only screen and (                min-resolution: #{$ratio}dppx) {
			@content;
		}
	}
}

/* # Breakpoints
--------------------------------------------- */

/* Calculated Breakpoint Sizes */
$breakpoint-full-size: $font_size * $breakpoint-full-multiplier;
$breakpoint-large-size: $font_size * $breakpoint-large-multiplier;
$breakpoint-base-size: $font_size * $breakpoint-base-multiplier;
$breakpoint-tablet-size: $font_size * $breakpoint-tablet-multiplier;
$breakpoint-mobile-landscape-size: $font_size * $breakpoint-mobile-landscape-multiplier;
$breakpoint-mobile-size: $font_size * $breakpoint-mobile-multiplier;

/* Base / 960 Grid */
@include breakpoint_grid($breakpoint-base, $gutter, $breakpoint-base-size, $breakpoint-base-multiplier);

/* Large / 1120 Grid */
@include breakpoint(large) {
	@include breakpoint_grid($breakpoint-large, $gutter, $breakpoint-large-size, $breakpoint-large-multiplier);
}

/* Full / 1440 Grid */
@include breakpoint(full) {
	@include breakpoint_grid($breakpoint-full, $gutter, $breakpoint-full-size, $breakpoint-full-multiplier);
}

/* Tablet (Portrait) / 768 grid */
@include breakpoint(tablet) {
	@include breakpoint_grid($breakpoint-tablet, $gutter, $breakpoint-tablet-size, $breakpoint-tablet-multiplier);
}

/* Mobile (Portrait) / 320 grid */
@include breakpoint(mobile) {
	@include breakpoint_grid_collapse($breakpoint-mobile, $breakpoint-mobile-multiplier);
}

/* Mobile (Landscape) / 480 grid */
@include breakpoint(mobile_landscape) {
	@include breakpoint_grid_collapse($breakpoint-mobile-landscape, $breakpoint-mobile-landscape-multiplier);
}

/* # Clearing
--------------------------------------------- */

.container:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Wrap each row of columns in a <div class="row"> to clear nested columns */
.row {
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}