Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="skip-link">
  <a href="#nav" class="menu-trigger">menu</a>
</div>

<header id="header" role="banner" class="site-header">
  <a href="" >
    <h1 class="site-name">Offside Nav Demo</h1>
  </a>
</header>

<main id="main" role="main">

  <article role="article">
    <h2>Article Title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
    </p>
  </article>

</main>

<nav role="navigation" id="nav">
  <ul class="menu">
    <li>
      <a href="" title="">Nav 1</a>
    </li>
    <li>
      <a href="" title="">Nav 2</a>
    </li>
    <li>
      <a href="" title="">Nav 3</a>
    </li>
    <li>
      <a href="" title="">Nav 4</a>
    </li>
    <li>
      <a href="" title="">Nav 5</a>
    </li>
    <li>
      <a href="" title="">Nav 6</a>
    </li>
  </ul>
</nav>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// ----

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

//////////////////////////////
// Variables
$bp-nav-offside: max-width 779px;
$bp-nav-wide: 780px;
$breakpoint-to-ems: true;
//////////////////////////////

.menu-trigger {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 100;
  @include breakpoint($bp-nav-wide) {
    display: none;
  }
}

// offside menu inactive
@include breakpoint($bp-nav-offside) {
  body {
    position: relative;
  }
  [role="navigation"], [role="banner"], [role="main"] {
    @include transition-property(all);
    @include transition-duration(.2s);
    @include transition-timing-function(ease-in);
    @include apply-origin(0 0, true);
    @include transform3d( translateX(0) );
  }
  [role="navigation"] {
    position: absolute;
    width: 250px;
    top: 0;
    left: -250px;
  }
}

// offside menu active
[data-nav-offside-active="true"] {
  @include breakpoint($bp-nav-offside) {
    [role="navigation"] {
      @include transform3d( translateX(250px) );
    }
    [role="banner"] {
      @include transform3d( translateX(250px) );
    }
    [role="main"] {
      @include transform3d( translateX(250px) );
    }
  }
}



// wide menu layout
@include breakpoint($bp-nav-wide) {
  body {
    @include display-flex;
    @include flex-direction(column);
  }
  [role="banner"] {
    @include order(1);
  }
  [role="main"] {
    @include order(3);
  }
  [role="navigation"] {
    @include order(2);
  }
}

SassMeister-output.css

.menu-trigger {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 100;
}
@media (min-width: 48.75em) {
  .menu-trigger {
    display: none;
  }
}

@media (max-width: 48.6875em) {
  body {
    position: relative;
  }

  [role="navigation"], [role="banner"], [role="main"] {
    -moz-transition-property: all;
    -o-transition-property: all;
    -webkit-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  [role="navigation"] {
    position: absolute;
    width: 250px;
    top: 0;
    left: -250px;
  }
}
@media (max-width: 48.6875em) {
  [data-nav-offside-active="true"] [role="navigation"] {
    -moz-transform: translateX(250px);
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
  [data-nav-offside-active="true"] [role="banner"] {
    -moz-transform: translateX(250px);
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
  [data-nav-offside-active="true"] [role="main"] {
    -moz-transform: translateX(250px);
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
}

@media (min-width: 48.75em) {
  body {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
  }

  [role="banner"] {
    -webkit-order: 1;
    order: 1;
  }

  [role="main"] {
    -webkit-order: 3;
    order: 3;
  }

  [role="navigation"] {
    -webkit-order: 2;
    order: 2;
  }
}

SassMeister-rendered.html

<div id="skip-link">
  <a href="#nav" class="menu-trigger">menu</a>
</div>

<header id="header" role="banner" class="site-header">
  <a href="" >
    <h1 class="site-name">Offside Nav Demo</h1>
  </a>
</header>

<main id="main" role="main">

  <article role="article">
    <h2>Article Title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
    </p>
  </article>

</main>

<nav role="navigation" id="nav">
  <ul class="menu">
    <li>
      <a href="" title="">Nav 1</a>
    </li>
    <li>
      <a href="" title="">Nav 2</a>
    </li>
    <li>
      <a href="" title="">Nav 3</a>
    </li>
    <li>
      <a href="" title="">Nav 4</a>
    </li>
    <li>
      <a href="" title="">Nav 5</a>
    </li>
    <li>
      <a href="" title="">Nav 6</a>
    </li>
  </ul>
</nav>