A starter responsive layout for SUSY and Compass. Mobile first, with breakpoints at 48em (768px by default) and 60em (960px default).

_base.scss

// Default mobile-first grid setup
$total-columns	: 4;								// a 4-column fluid grid for anything less than tablet (<48em)
$column-width	: 20%;								// each column is 4em wide
$gutter-width	: 3%;								// 1em gutters between columns
$grid-padding	: $gutter-width;					// grid-padding equal to gutters

$tablet-columns	: 10;								// 10-column fluid grid for tablets - desktop (48em - <60em)
$tablet-width	: 48em;								// 48em = 768px by default
$tablet 		: $tablet-width $tablet-columns;	// Shorthand for tablet breakpoint

$desktop-columns: 12;								// 12-column fixed grid for normal layout (beyond 60em wide)
$desktop-width	: 60em;								// 60em = 960px by default
$desktop 		: $desktop-width $desktop-columns;	// Shorthand for desktop breakpoint


$container-width: 100%;				//makes container fill the screen by default (we override this on $desktop)

$showGridBackground: FALSE;			//Change this variable to turn the grid background on or off

// .wrapper is the container for all our site content (used on a few of the main elements)
.wrapper {

	@if $showGridBackground == TRUE { @include susy-grid-background; }
	@include container;

	// Tablet breakpoint
	@include at-breakpoint($tablet) {

		@if $showGridBackground == TRUE { @include susy-grid-background; }
		@include container;

	}

	// Desktop breakpoint
	@include at-breakpoint($desktop) {
		$column-width   : 4em;
		$gutter-width   : 1em;
		$grid-padding   : $gutter-width;
		$container-width: $desktop-width;

		@if $showGridBackground == TRUE { @include susy-grid-background; }
		@include container;

	}

}