Cacher is the code snippet organizer for pro developers

  <header>header</header>
  <div class="content">
  <nav>nav</nav>
  <article>article</article>
  </div>
  <footer>footer</footer>

*, *::before, *::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  max-width: 57.5em;
  margin-left: auto;
  margin-right: auto;
  background-image: -moz-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 96.7741935484%, rgba(0, 0, 0, 0) 96.7741935484%), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 96.7741935484%, rgba(0, 0, 0, 0) 96.7741935484%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 96.7741935484%, rgba(0, 0, 0, 0) 96.7741935484%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-size: 33.6956521739%, 100% 24px;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
  background-position: left top;
}
body::after {
  content: " ";
  display: block;
  clear: both;
}

header {
  clear: both;
  width: 100%;
  float: left;
}

.content {
  clear: both;
  width: 100%;
  float: left;
}

nav {
  width: 32.6086956522%;
  float: left;
}

article {
  width: 66.3043478261%;
  float: left;
  margin-left: 1.0869565217%;
}

footer {
  clear: both;
  width: 100%;
  float: left;
}

html {
  background: white;
}

header, nav, article, footer {
  padding-top: 1em;
  padding-bottom: 1em;
  font-family: monospace, serif;
  background: #ff007d;
  background-clip: content-box, border-box;
  box-shadow: 0 0 0 1px rgba(255, 0, 125, 0.25) inset;
}

// ----
// Sass (v3.3.4)
// Compass (v)
// Breakpoint (v)
// Susy (v)
// ----

@import "compass";
@import "breakpoint";
@import "susy";

@include border-box-sizing;

$susy: (
  columns: 3,
  gutters: 10/300,
  column-width : 18.75em,
  gutter-position: before
);

body { @include container(show);}
header { @include full;}
.content {@include full;}
nav {@include span(1 first);}
article {@include span(2);}
footer {@include full;}

// visuals
$pink: rgb(255,0,125);
html {background:white;}

header,nav,article,footer {
  padding-top: 1em;
  padding-bottom: 1em;
  font-family: monospace, serif;
  background: $pink;
  background-clip:content-box, border-box;
  box-shadow: 0 0 0 1px rgba($pink, .25) inset;
}

  <header>header</header>
  <div class="content">
  <nav>nav</nav>
  <article>article</article>
  </div>
  <footer>footer</footer>