mirisuzanne/offcanvas.html

## 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>

## 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;
	}