index.html

<div class="mainwrap">
  <header class="container">
    <div class="logo"></div>
    <nav></nav>
    <div class="illu"></div>
  </header>
  <div class="container">
  </div>
</div>
<div class="footwrap">
  <footer class="container">
  </footer>
</div>
  

style.scss

@import 'compass';
@import 'modular-scale';
@import 'toolkit';
@import 'breakpoint';
@import 'singularitygs';

$grids: 6;
$gutters:0.25;

@include establish-baseline;

%wrap {
	width:100%;
	@extend %clearfix;
	overflow-x: hidden;
}

.mainwrap {
	@extend %wrap;
	background-color:grey;
}
.footwrap {
	@extend %wrap;
	background-color:lightgrey;
}

.container {
	@include background-grid;
	max-width:850px;
	margin: 0 auto;
	@include clearfix;
}


.logo {
	background-color:red;
	width:100%;
	height:5em;
	@include grid-span(1,1);
}

nav {
	background-color:green;
	width:100%;
	height:5em;
	@include grid-span(4,2);
}
.illu {
	background-color:fuchsia;
	height:5em;
	@include grid-span(1,6);
}

div.container{
	height:5em;
	background-color:yellow;
	width:50%;
}
footer.container {
		background-color: blue;
	height:5em;
}