mirisuzanne · July 13, 2012 20:59
diff --git a/offcanvas.html b/offcanvas.html
 <!DOCTYPE html>
 <!--[if lte IE 8 ]>             <html class="lt-ie9" lang="en" dir="ltr">   <![endif]-->
 <!--[if IE 9 ]>                 <html class="ie9" lang="en" dir="ltr">  <![endif]-->
 <!--[if (gt IE 9)|!(IE)]><!-->  <html lang="en" dir="ltr">          <!--<![endif]-->
 <head>
  <meta charset="utf-8">
  <title>off canvas susy</title>
  <link rel="stylesheet" href="stylesheets/offcanvas.css">

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
  <meta http-equiv="cleartype" content="on">
  <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
 </head>
 <body>
  <div class="container">
    <header>header</header>
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
    <footer>footer</footer>
  </div>
 </body>
 </html>
diff --git a/offcanvas.scss b/offcanvas.scss
 @import "compass";
 @import "susy";

 // --------------------------------------------
 // settings

 $total-columns  : 12;
 $column-width   : 5em;
 $gutter-width   : 1em;
 $grid-padding   : 0;

 // --------------------------------------------
 // layout
 //
 // we only need to set the container once
 // (for our largest layout)
 // because it will automatically remain full-width
 // at any smaller size.

 body { padding: 0; margin: 0; }
 * { @include box-sizing(border-box); }

 .container {
  @include container;
  @include box-sizing(content-box);
  overflow: hidden;
 }

 header, footer { clear: both; }

 // --------------------------------------------
 // phone
 //
 // No need for Susy here -
 // we're not dealing with columns.

 .left, .right, .main {
  @include transition(.2s all ease);
  float: left;
  width: 100%;
 }

 .left {
  margin-left: -100%;
 }

 .right {
  float: right;
  margin-right: -100%;
 }

 // --------------------------------------------
 // tablet
 //
 // You can set this to any min-width
 // and any column-count that you want for tablets.
 // No need for a max-width,
 // because most of it works towards the desktop
 // and we can override the rest.
 // We're not setting a container,
 // so the column-count is just how you want to divide up
 // the 100% space that we have available.

 $tablet   : 30em;   // tablet min-width breakpoint
 $columns  : 8;      // divide into as many columns as you want
 $main     : 6;      // main content uses most of them
 $side     : $columns - $main; // room for one sidebar at a time

 @include at-breakpoint($tablet $columns) {
  .main {
    @include span-columns($main);
    margin-right: 0;
  }
  .left {
    @include span-columns($side);
    margin-left: 0;
  }
  .right {
    @include span-columns($side omega);
    margin-right: -100%;
  }
 }

 // --------------------------------------------
 // desktop
 //
 // Now we're just bringing things back to normal.

 $desktop    : 60em;           // desktop breakpoint
 $columns    : $total-columns; // use all the columns
 $main       : 6;              // main uses some
 $side       : floor(($columns - $main)/2); // the rest are divided between sidebars

 @include at-breakpoint($desktop $columns) {
  .main {
    @include span-columns($main);
  }
  .left, .right {
    @include span-columns($side);
  }
  .right {
    @include omega;
    margin-right: 0;
  }
 }

 // --------------------------------------------
 // styles (for demo only)

 .left, .right, .main {
  height: 20em;
  padding: 1em;
 }
 .left { background: #cff; }
 .right { background: #ffc; }

 header, footer {
  height: 3em;
  padding: 1em;
  background: #fcf;
 }
	<!DOCTYPE html>
	<!--[if lte IE 8 ]> <html class="lt-ie9" lang="en" dir="ltr"> <![endif]-->
	<!--[if IE 9 ]> <html class="ie9" lang="en" dir="ltr"> <![endif]-->
	<!--[if (gt IE 9)\|!(IE)]><!--> <html lang="en" dir="ltr"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<title>off canvas susy</title>
	<link rel="stylesheet" href="stylesheets/offcanvas.css">

	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
	<meta http-equiv="cleartype" content="on">
	<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
	</head>
	<body>
	<div class="container">
	<header>header</header>
	<div class="left">left</div>
	<div class="main">main</div>
	<div class="right">right</div>
	<footer>footer</footer>
	</div>
	</body>
	</html>
	@import "compass";
	@import "susy";

	// --------------------------------------------
	// settings

	$total-columns : 12;
	$column-width : 5em;
	$gutter-width : 1em;
	$grid-padding : 0;

	// --------------------------------------------
	// layout
	//
	// we only need to set the container once
	// (for our largest layout)
	// because it will automatically remain full-width
	// at any smaller size.

	body { padding: 0; margin: 0; }
	* { @include box-sizing(border-box); }

	.container {
	@include container;
	@include box-sizing(content-box);
	overflow: hidden;
	}

	header, footer { clear: both; }

	// --------------------------------------------
	// phone
	//
	// No need for Susy here -
	// we're not dealing with columns.

	.left, .right, .main {
	@include transition(.2s all ease);
	float: left;
	width: 100%;
	}

	.left {
	margin-left: -100%;
	}

	.right {
	float: right;
	margin-right: -100%;
	}

	// --------------------------------------------
	// tablet
	//
	// You can set this to any min-width
	// and any column-count that you want for tablets.
	// No need for a max-width,
	// because most of it works towards the desktop
	// and we can override the rest.
	// We're not setting a container,
	// so the column-count is just how you want to divide up
	// the 100% space that we have available.

	$tablet : 30em; // tablet min-width breakpoint
	$columns : 8; // divide into as many columns as you want
	$main : 6; // main content uses most of them
	$side : $columns - $main; // room for one sidebar at a time

	@include at-breakpoint($tablet $columns) {
	.main {
	@include span-columns($main);
	margin-right: 0;
	}
	.left {
	@include span-columns($side);
	margin-left: 0;
	}
	.right {
	@include span-columns($side omega);
	margin-right: -100%;
	}
	}

	// --------------------------------------------
	// desktop
	//
	// Now we're just bringing things back to normal.

	$desktop : 60em; // desktop breakpoint
	$columns : $total-columns; // use all the columns
	$main : 6; // main uses some
	$side : floor(($columns - $main)/2); // the rest are divided between sidebars

	@include at-breakpoint($desktop $columns) {
	.main {
	@include span-columns($main);
	}
	.left, .right {
	@include span-columns($side);
	}
	.right {
	@include omega;
	margin-right: 0;
	}
	}

	// --------------------------------------------
	// styles (for demo only)

	.left, .right, .main {
	height: 20em;
	padding: 1em;
	}
	.left { background: #cff; }
	.right { background: #ffc; }

	header, footer {
	height: 3em;
	padding: 1em;
	background: #fcf;
	}