CodePen Embed - Admin layout

<header class="lf-header">
  <button class="lf-btn js-toggle-leftpanel">Left Panel</button>
  <button class="lf-btn js-toggle-header">Page Header</button>
  <button class="lf-btn js-toggle-footer">Footer</button>
  <button class="lf-btn js-toggle-rightpanel -g-muted">Right Panel</button>
  <label><input class="js-toggle-overlay" type="checkbox" /> Left panel always overlaied</label>
</header>

<div class="lf-main-wrapper has-leftpanel has-rightpanel -right-collapsed -right-overlay">
  <aside class="lf-sidepanel -position-left">
    <header class="lf-sidepanel__header">
      Histroy log
    </header>
    <ul class="sidepanel-logs">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </aside>

  <main class="lf-content">
    <div class="lf-content__header">
      <ul class="lf-tabs">
        <li class="is-active">Activities</li>
        <li>Statistics</li>
        <li>Reports</li>
      </ul>

      <p class="lf-page-title" contenteditable>Click me - I'm editable</p>
    </div>
    
    <div class="lf-content__scroller">
      <div class="lf-content__body -g-padding-large">
        <h1 class="-g-margin-medium">this will scroll</h1>
        <div class="thumbnails">
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>
          <div class="lf-panel -size-small -g-margin-small">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos velit architecto illo earum ipsa quae accusamus fugiat quas, atque tenetur voluptatem et sunt omnis, rerum at id beatae corporis quaerat?</p>
          </div>      
        </div>
      </div>
    </div>
    
    <div class="lf-content__footer" contenteditable>
      stuff here wont scrolll (also editabled)
    </div>
  </main>
  
  <aside class="lf-sidepanel -position-right">
    <header class="lf-sidepanel__header">
      Hidden right panel.
    </header>
    <ul class="sidepanel-logs">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </aside>
</div>

// Vars
// ==============

// Colors
$color-primary: #260F26 !default;
$color-secondary: #404E7C !default;
$color-tertiary: #86CB92 !default;

$color-gray-light: #f8f8f8 !default;
$color-gray: #ececec !default;

// Layout
$layout-header-height: 6rem !default;
$layout-sidepanel-width: 32rem !default;

// Depth
$depth-highest: 9999 !default;
$depth-higher: 5000 !default;
$depth-high: 1000 !default;
$depth-medium: 500 !default;
$depth-low: 200 !default;
$depth-lowest: 1 !default;

// Speed
$speed-fast: .2s !default;
$speed-normal: .3s !default;
$speed-slow: .5s !default;

// Properties
$box-sizes: (
  large: 3rem,
  medium: 2rem,
  small: 1.5rem,
  xsmall: .5rem
) !default;

$breakpoints: (
  small:  ( max-width:  767px ),
  medium: ( max-width:  992px ),
  large:  ( max-width: 1200px )
) !default;

// Global modifyers
// =============
@each $size, $value in $box-sizes {
  .-g-padding-#{$size} { padding: $value !important; }
  .-g-margin-#{$size} { margin: $value !important; }
}

.-g-muted {
  opacity: .3;
}

// Mixins
// ============
@mixin padding($size:medium) {
  padding: map-get($box-sizes, $size);
}

@mixin margin($size:medium) {
  margin: map-get($box-sizes, $size);
}

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    // Prints a media query based on the value
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

// Base
// =============
* { box-sizing: border-box; }
body, html { height: 100%; }
html { font-size: 10px; }
body { font-size: 1.4em; overflow: hidden; }

// Layout
// =============
.lf-main-wrapper {
  padding-top: $layout-header-height;
  position: relative;
  background: $color-gray;
  height: 100%;
  width: 100%;
}

// With sidepanels
.lf-main-wrapper.has-leftpanel,
.lf-main-wrapper.has-rightpanel {
  .lf-sidepanel {
    top: $layout-header-height;
    transition: left $speed-fast, right $speed-fast, width $speed-fast;
  }
    
  .lf-content {
    transition: margin $speed-fast;
  }
}

.lf-main-wrapper.has-leftpanel {
  .lf-content {
    margin-left: $layout-sidepanel-width;
    
    @include respond-to(medium) {
      margin-left: 0;
    }
  }
}

.lf-main-wrapper.has-rightpanel {
  .lf-content {
    margin-right: $layout-sidepanel-width;
    
    @include respond-to(medium) {
      margin-right: 0;
    }
  }
}

// Collapsed panels
.lf-main-wrapper.-left-collapsed {
  .lf-sidepanel.-position-left {
    left: -$layout-sidepanel-width;
    
    @include respond-to(small) {
      left: -100%;
    }
  }

  .lf-content {
    margin-left: 0;
  }
}

.lf-main-wrapper.-right-collapsed {
  .lf-sidepanel.-position-right {
    right: -$layout-sidepanel-width;
    
    @include respond-to(small) {
      right: -100%;
    }
  }

  .lf-content {
    margin-right: 0;
  }
}

// Overlaid panels
.lf-main-wrapper.-right-overlay .lf-content { 
  margin-right: 0;
}

.lf-main-wrapper.-left-overlay .lf-content {  
  margin-left: 0;
}


// Header
// =============
.lf-header {
  background: $color-primary;
  position: fixed;
  top: 0;
  width: 100%;
  height: $layout-header-height;
  line-height: $layout-header-height;
  z-index: $depth-high;
  color: white;
  overflow: hidden;
}

// Sidepanel
// ============
.lf-sidepanel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: $layout-sidepanel-width;
  background: $color-gray-light;
  z-index: $depth-high;
  
  @include respond-to(small) {
    width: 100%;
  }
}

.lf-sidepanel.-position-left {
  left: 0;
}

.lf-sidepanel.-position-right {
  right: 0;
}

.lf-sidepanel__header {
  @include padding(small);
  background: $color-tertiary;
  color: white;
}

// Main content
// ============
.lf-content {
  position: relative;
  height: 100%;
}

.lf-content__scroller {
  overflow: auto;
}

.lf-content__footer {
  position: fixed;
  background: $color-primary;
  width: 100%;
  @include padding(small);
  color: white;
  bottom: 0;
}

// Panels
// ============
.lf-panel {
  background: white;
  @include padding;
}

.lf-panel.-size-small {
  width: 32rem;
}

// Tabs
// ============
.lf-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  
  li {
    @include padding(small);
  }
}

.lf-tabs .is-active {
  border-top: 3px solid $color-secondary;
  background: white;
}

// Page header
// ===========
.lf-page-title {
  background: $color-secondary;
  color: white;
  @include padding;
  margin: 0;
}

// Buttons
// ============
.lf-btn {
  color: white;
  background: none;
  border: none;
  outline: none;
  padding: 0 1rem;
  transition: all $speed-fast;
  
  &:hover {
    background: rgba(255,255,255,.2);
  }
}


// Specific
// ============

.thumbnails {
  display: flex;
  flex-wrap: wrap;
  
  .lf-panel {
    flex-grow: 1;
  }
}

.sidepanel-logs {
  margin: 0;
  list-style: none;
  @include padding(large);
  padding-bottom: 6rem;
  height: 100%;
  overflow: auto;
  
  li {
    background: $color-gray;
    @include padding(small);
    margin-bottom: 1rem;
    position: relative;
  }
  
  li:before {
    content: ' ';
    display: block;
    width: 5rem;
    height: 5rem;
    background: $color-tertiary;
    opacity: .2;
    border-radius: 50%;
  }
  
  li:after {
    position: absolute;
    top: 2rem;
    left: 8rem;
    width: 14rem;
    height: 4rem;
    display: block;
    opacity: .4;
    content: '';
    background: white;
  }
}

View Compiled

const $mainWrapper = $('.lf-main-wrapper');
const $content = $('.lf-content');
const $contentScroller = $('.lf-content__scroller');
const $contentHeader = $('.lf-content__header');
const $contentFooter = $('.lf-content__footer');

// Main Content
// ==============
function resizeMainContainer() {
  let newHeight = $content.innerHeight();
  
  if ($contentHeader.is(':visible')) newHeight = newHeight - $contentHeader.outerHeight();
  if ($contentFooter.is(':visible')) newHeight = newHeight - $contentFooter.outerHeight();
  
  if (resizeMainContainer.oldHeight !== newHeight) {
    resizeMainContainer.oldHeight = newHeight;
    $contentScroller.height(newHeight);
  }
    
 window.setTimeout(resizeMainContainer, 500);
}

resizeMainContainer();

// Header
// ==========
$('.js-toggle-header').click(() => $contentHeader.toggle());
$('.js-toggle-footer').click(() => $contentFooter.toggle());
$('.js-toggle-leftpanel').click(() => $mainWrapper.toggleClass('-left-collapsed'));
$('.js-toggle-rightpanel').click(() => $mainWrapper.toggleClass('-right-collapsed'));
$('.js-toggle-overlay').on('change', () => $mainWrapper.toggleClass('-left-overlay'));
$('.lf-header .lf-btn').click(function () { $(this).toggleClass('-g-muted'); });

View Compiled

Run Pen

This Pen is owned by Chris Hanson on CodePen.

See more by @chrishanson on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js