<div data-off-canvas="true">
    <div class="off-canvas-menu">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
    </div>

    <div id="off-body" class="container-fluid">
      <div class="container-inner">
        <div class="container-content">

          <button type="button" class="btn btn-primary btn-sm" data-toggle="off-canvas" data-target="#off-body">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          
          <h1 class="page-header">
            <i class="glyphicon"></i> Simple Off-Canvas 
          </h1>
          <p class="lead">
            a really simple off-canvas implementation.
          </p>
          
<pre class="prettyprint" style="width: 60%; margin: 10px auto; text-align: left;">
&lt;body data-off-canvas="true"&gt;
  &lt;!-- Off Canvas Menu --&gt;
  &lt;div class="off-canvas-menu"&gt;
    ...
  &lt;/div&gt;

  &lt;!-- Main Content --&gt;
  &lt;div id="off-body" class="container-fluid"&gt;
    &lt;!-- Toggle Off Canvas --&gt;
    &lt;button type="button" class="btn btn-primary btn-sm" 
            data-toggle="off-canvas" 
            data-target="#off-body"&gt;Button&lt;/button&gt;
    ...
  &lt;/div&gt;
&lt;/body&gt;
</pre>

        </div>
      </div>
  </div>
</div>
    
  <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>

@import "compass/css3";

@import "https://fonts.googleapis.com/css?family=Bitter|Open+Sans:400,300";
@import "https://getbootstrap.com/assets/css/docs.min.css";

html,
body { 
  @include filter-gradient(#84e489, #05bb0e, horizontal);
  @include background-image(radial-gradient(center, ellipse cover,  #84e489 0%,#37cd3e 40%,#05bb0e 100%));
  height: 100%; 
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif; 
  color: #fff;
  background-color: #84e489;
}

[data-off-canvas="true"],
.container-fluid,
.container-inner,
.container-info {
  height: 100%;
}

.container-inner {
  display: table;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.container-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.page-header {
  font-family: "Bitter";
  font-weight: bold;
  font-size: 64px;
  letter-spacing: -1px;
  border-bottom: 0 none;
  text-shadow: 0 2px 8px darken(#05bb0e, 10%);
}

p.lead {
  font-weight: 300;
}

*:focus { outline: 0 none !important; }

[data-off-canvas="true"] {
  height: 100%;
  
  &.active {
    overflow-x: hidden;
  }
}

.col-xs-12 > .btn {
  margin-top: 15px;
  padding-left: 8px;
  padding-right: 8px;
}

.icon-bar {
  display: block;
  clear: both;
  width: 23px;
  height: 4px;
  margin-top: 2px;
  margin-bottom: 2px;
  background-color: #fff;
}

.off-canvas-menu {
  @include transition(left .1s linear);
  position: fixed;
  top: 0;
  z-index: 100;
  left: -250px;
  width: 250px;
  height: 100%;
  padding: 10px;
  box-shadow: -1px 0 1px 0 #313131 inset;
  border-right: 1px solid #000;
  background-color: #191919;

  &.active {
    @include transition(left .1s ease);
    left: 0;
  }
}

.off-canvas-target {
  @include transition(transform 150ms ease);
  @include translate(0, 0);

  &.active {
    @include transition(transform 150ms ease);
    @include translate(250px, 0);
  }
}

// Prettyprint()
.str, 
.atv { color: #D14; }

.pun, 
.opn, 
.clo { color: #93a1a1; }

.kwd, 
.prettyprint 
.tag { color: #1e347b; }

.typ, 
.atn, 
.dec, 
.var { color: teal; }

.lit { color: #195f91; }
.fun { color: #dc322f; }
.pln { color: #48484c; }
.com { 
  font-style: italic;
  color: #93a1a1; 
}

.prettyprint {
  margin-bottom:      40px;
  padding:            10px;
  font-size:          12px;
  background-color:   #fefefe;
  border:             1px solid #05840b;
}

.prettyprint.linenums { 
  @include box-shadow(inset 45px 0 0 #fafafa);
}


.prettyprint ol.linenums { 
  margin:         0;
  margin-left:  -5px; 
}

.prettyprint ol.linenums > li {
  padding-left:     12px;
  color:            #bebec5;
  line-height:      1.6;
}

.lt-ie9 .prettyprint ol.linenums { 
  margin:       0;
  margin-left:  33px; 
}

+function ($) { 'use strict'; 

  var OffCanvas = function (element, options) {
    this.element = (element) ? element : '[data-toggle="off-canvas"]';
    this.options = (options) ? options : this.defaults;
    
    return this;
  };

  OffCanvas.defaults = {};

  OffCanvas.prototype.engage = function () {
    var $target = $($(this.element).data('target'));

    $target.addClass('off-canvas-target');

    $(this.element).on('click', function (event) {
      var offCanvas    = '[data-off-canvas=true]',
          slideTarget  = $(this).data('target'),
          slideMenubar = '.off-canvas-menu';

      event.preventDefault();

      $(offCanvas).toggleClass('active');
      $(slideTarget).toggleClass('active');
      $(slideMenubar).toggleClass('active');
      
    });
  };

  // Off Canvas Plugin Definition
  // ============================
  
       
   /*! Plugin mode currently doesn't work for now,
    *  will get this to work very soon though I 
    *  just really need to finish the project I'm 
    *  working on right now :D
    */
   $.fn.offcanvas = function (option) {
    var options  = $.extend({}, OffCanvas.defaults, option);

    return this.each(function () {
      var offcanvas = new OffCanvas;
          offcanvas.engage($(this)[0], options);
    });
  };

  window.offcanvas = new OffCanvas;
  window.prettyPrint && prettyPrint();

  $(document).on('load', offcanvas.engage());

}(window.jQuery);