A Pen by Armando Anton.

index.html

<div id="page">
  <div id="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi deserunt odio inventore nisi est quae? Porro unde officiis recusandae sapiente odit! Sint praesentium earum placeat fugiat aperiam vero suscipit esse!</p>
    <p>Aut esse nulla quas quae non et quidem a natus optio obcaecati eaque cumque sapiente dignissimos ad saepe. Aliquid dolore expedita modi recusandae odit magnam voluptatum dignissimos id placeat nulla.</p>  
    <p>Voluptatem numquam voluptates accusamus atque fugiat sed necessitatibus commodi amet sunt est obcaecati error nostrum ea omnis ducimus. Ducimus quasi cum animi consectetur doloribus at fugiat quas iure saepe incidunt.</p>
    <p>Alias sequi ab fugiat consequatur sapiente aperiam inventore odit maxime aliquid hic perspiciatis labore rem pariatur nisi similique quidem dolorem. Accusantium sed ex laborum est omnis odit dolorem obcaecati nisi.</p>
    <p>Excepturi facilis esse cum nam quasi adipisci totam labore dolore eum quaerat vel hic asperiores explicabo odio laboriosam nemo maxime quis rem illum reiciendis. Ullam quas quae repellat quia nam.</p>
  </div>
  <div id="header">
    <p><a href="#" class="btn-menu">Menu</a> Brand name</p>
  </div>
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas hic exercitationem expedita officiis porro voluptatem sed odio ipsam eveniet quia autem nihil ipsa deleniti earum doloribus ratione qui. Hic quam.</p>
    <p>Doloribus amet ad suscipit eveniet at soluta deserunt nihil error itaque totam minus tenetur nostrum odit illo corporis possimus natus consequatur earum tempore dolore maiores. Voluptate sapiente architecto rem similique?</p>
    <p>Ad molestiae sed quis pariatur tempore fuga soluta cupiditate voluptatum. Dolor doloribus maiores est vitae rem veritatis recusandae eum totam omnis iusto temporibus commodi sunt quaerat reprehenderit consequuntur accusamus quibusdam!</p>
    <p>Corporis hic molestias laborum dignissimos ipsam beatae illum architecto placeat fuga possimus repellendus in quisquam est sequi dicta ullam sint quaerat recusandae explicabo nam! Amet dolorem molestiae ipsum totam atque?</p>
    <p>Tempore explicabo ad ut blanditiis fuga debitis nulla reiciendis fugiat soluta commodi minus laudantium repellat voluptatem nemo quam vel voluptatibus non veniam numquam assumenda obcaecati sed temporibus sequi quisquam nam!</p>
    <p>Tempore explicabo iure doloremque nulla totam deserunt in quos iste unde consequatur sed qui saepe doloribus placeat impedit minima quam harum ipsum sunt aliquid neque expedita cum a voluptate ad.</p>
    <p>Soluta voluptas quas ipsam asperiores assumenda quis beatae eveniet veritatis aspernatur dolorem rerum deserunt expedita ut nulla sit amet laudantium ipsa quisquam perspiciatis eius doloribus quae eaque iste fugiat debitis.</p>
    <p>Cumque molestiae voluptatum beatae nostrum sed recusandae quam sit aperiam praesentium sunt neque nesciunt maiores corporis ad amet dolorem repellendus facere expedita! Soluta natus et reiciendis quibusdam neque eaque cupiditate.</p>
    <p>Exercitationem aperiam mollitia perferendis dolor distinctio assumenda voluptates illum accusantium sit doloremque. Ipsam vel suscipit doloremque provident nihil sint recusandae odit cupiditate vero aliquam temporibus incidunt placeat dolores deserunt architecto.</p>
    <p>Minima adipisci sint itaque cumque alias laboriosam tempora accusantium blanditiis iusto sit sequi consequatur pariatur ad eius assumenda rerum dignissimos beatae culpa nesciunt id libero error a. Aperiam culpa doloribus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nulla porro vitae harum impedit maiores excepturi provident asperiores facilis modi deleniti soluta iste non. Quos laboriosam quasi debitis amet similique.</p>
    <p>Temporibus id provident quod necessitatibus aliquid sapiente doloribus pariatur fugit expedita dicta. Possimus ullam provident fugit nisi vitae cum dolorum unde obcaecati quod nulla ipsam repellat quaerat non. Fugit labore?</p>
    <p>Nobis maiores blanditiis laboriosam laborum pariatur quos esse. Itaque explicabo accusamus temporibus iste quasi expedita corporis earum harum aut tempore deleniti id mollitia excepturi sed laborum perspiciatis repudiandae quod similique!</p>
    <p>At dolor atque dolores minus non accusamus est voluptatibus fugiat doloribus suscipit nam iste explicabo molestiae adipisci hic maxime magni ex in porro eveniet consectetur! Omnis voluptatibus repellat ea recusandae!</p>
    <p>Animi amet sed doloremque excepturi at accusamus officiis ea! Vel nam sit dicta ipsum ab iure fuga nobis facere quod blanditiis? Eos nostrum sunt quaerat aperiam voluptas placeat reiciendis corrupti!</p>
  </div>
</div>

Responsive-layout.markdown

Responsive layout

Responsive layout, mobile first, breakpoint configurable

A Pen by Armando Anton on CodePen.

License.

script.js

(function($) {
  $('#header a').on('click', function(e) {
    e.preventDefault();
    $('#page').toggleClass('visible-menu');
  });
})(jQuery);

style.less

@left-width: 240px;
@header-height: 30px;
@breakpoint: 600px;

html, body {
  height: 100%;
  width: 100%;
}

* {
  .box-sizing(border-box);
}

p {
  margin: 0 0 10px;
}

#page {
  height: 100%;
  width: 100%;
  overflow: auto;
}

#left {
  position: fixed;
  height: 100%;
  width: @left-width;
  top: 0;
  .translateX(-@left-width);
  background-color: #333;
  color: #fff;
  overflow-y: auto;
}

#header {
  position: fixed;
  height: @header-height;
  width: 100%;
  top: 0;
  .translateX(0);
  background-color: #333;
  color: #fff;
  opacity: 0.9;
  z-index: 100;
}

#content {
  position: relative;
  height: 100%;
  top: @header-height;
  .translateX(0);
}

#page.visible-menu {

  overflow: hidden;

  #left {
    .translateX(0);
  }

  #header, #content {
    .translateX(@left-width);
  }
}

#left, #header, #content {
  .transition(~"transform 0.3s ease-out");
}

@media (min-width: @breakpoint) {

  #header, #content {
    margin-left: @left-width;
  }

  #left, #header, #content {
    .transition(~"none");
  }

  #left {
    .translateX(0);
  }

  .btn-menu {
    display: none;
  }

  #page.visible-menu {

    overflow: auto;

    #header, #content {
      .translateX(0);
    }
  }

}