make the components readable at least.

_includes/header.html

@@ -17,8 +17,8 @@
 
 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script src="{{ page.base_url }}dist/ratchet.js"></script>
-<script src="{{ page.base_url }}docs-assets/js/docs.js"></script>
-<script src="{{ page.base_url }}docs-assets/js/fingerblast.js"></script>
+<!--<script src="{{ page.base_url }}docs-assets/js/docs.js"></script>
+<script src="{{ page.base_url }}docs-assets/js/fingerblast.js"></script>-->
 <script>
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-36050008-1']);

components.html

@@ -322,19 +322,19 @@ base_url: "../"
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li>
+        <li class="table-view-cell">
           <a>
             Item 1
             <span class="chevron"></span>
           </a>
         </li>
-        <li>
+        <li class="table-view-cell">
           <a>
             Item 2
             <span class="chevron"></span>
           </a>
         </li>
-        <li>
+        <li class="table-view-cell">
           <a>
             Item 3
             <span class="chevron"></span>

docs-assets/css/docs.css

@@ -27,6 +27,16 @@ h1, h2, h3, h4, h5, h6 {
   background-position: 0 100%;
   background-repeat: no-repeat;
 }
+.docs-header-wrapper .icon {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  -webkit-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
+}
+.docs-header-wrapper .icon:active {
+  opacity: .3;
+}
 
 .docs-header {
   padding-top: 50px;
@@ -67,11 +77,19 @@ h1, h2, h3, h4, h5, h6 {
   border: 0;
 }
 
+.component-example,
+.component-example [class*="bar"],
+.component-example .content {
+  position: relative;
+}
+
+.bar-nav ~ .content {
+  padding: 0;
+}
+
 .container {
   margin-left: auto;
   margin-right: auto;
-  padding-left: 2%;
-  padding-right: 2%;
 }
 
 .column-group {
@@ -232,6 +250,10 @@ h1, h2, h3, h4, h5, h6 {
     margin-right: -30px;
   }
 }
+.iphone {
+  display: none;
+}
+
 hr {
   height: 0;
   margin: 10px 0 30px;

index.html

@@ -5,6 +5,7 @@ base_url: "./"
 ---
 
 <header class="docs-header-wrapper">
+  <a class="icon icon-list" href="#"></a>
   <div class="container">
     <div class="column-group">
       <div class="docs-header column units-2">

lib/sass/docs.scss

@@ -25,6 +25,17 @@ h1, h2, h3, h4, h5, h6 {
 .docs-header-wrapper {
   background-color: #fafafa;
   @include hairline(single, #c8c7cc, 0);
+
+  .icon {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    @include transition(opacity .2s linear);
+
+    &:active {
+      opacity: .3;
+    }
+  }
 }
 .docs-header {
   padding-top: 50px;
@@ -70,6 +81,19 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+// Componnts
+// --------------------------------------------------
+
+.component-example,
+.component-example [class*="bar"],
+.component-example .content {
+  position: relative;
+}
+
+.bar-nav ~ .content {
+  padding: 0;
+}
+
 
 // The Chassis grid
 // --------------------------------------------------
@@ -77,8 +101,8 @@ h1, h2, h3, h4, h5, h6 {
 .container {
   margin-left: auto;
   margin-right: auto;
-  padding-left: 2%;
-  padding-right: 2%;
+  // padding-left: 2%;
+  // padding-right: 2%;
 }
 .column-group {
   width: auto;
@@ -173,6 +197,10 @@ h1, h2, h3, h4, h5, h6 {
 // Misc
 // --------------------------------------------------
 
+.iphone {
+  display: none;
+}
+
 hr {
   height: 0;
   margin: 10px 0 30px;