Add Off-screen experimental code

1 files changed, 36 insertions, 0 deletions

diff --git a/docs/experimentals.html b/docs/experimentals.html
index 8c16bfc..1baebfa 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -229,6 +229,9 @@
                     <a href="experimentals.html#meters">Meters</a>
                   </li>
                   <li class="menu-item">
+                    <a href="experimentals.html#off-canvas">Off-canvas</a>
+                  </li>
+                  <li class="menu-item">
                     <a href="experimentals.html#parallax">Parallax</a>
                   </li>
                   <li class="menu-item">
@@ -717,6 +720,39 @@
 
         </div>
 
+        <div id="off-canvas" class="container">
+          <h3 class="s-title"><a href="#off-canvas" class="anchor" aria-hidden="true">#</a>Off-canvas</h3>
+          <div class="docs-note">
+            <p>The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.</p>
+          </div>
+          <div class="columns">
+            <div class="column">
+              <div class="off-canvas">
+                <input type="checkbox" class="off-canvas-checkbox" id="sidebar-checkbox" name="sidebar-checkbox" hidden>
+                <label class="off-canvas-toggle btn btn-primary btn-lg" for="sidebar-checkbox">
+                  <i class="icon icon-menu"></i>
+                </label>
+                <div class="off-canvas-sidebar flex-centered">
+                  <span>Sidebar</span>
+                </div>
+                <div class="off-canvas-content">
+                  <div class="content">
+                    <h4>Lorem ipsum</h4>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
+                    <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
+                    <h4>Cupcake ipsum</h4>
+                    <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p>
+                    <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p>
+                    <h4>Candy ipsum</h4>
+                    <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p>
+                    <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div id="parallax" class="container">
           <h3 class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3>
           <div class="docs-note">