Adding basic grid and fixing the firefox notice.

components.html

@@ -5,10 +5,11 @@ base_url: "../"
 ---
 
 <!-- Banner for Mozilla/IE -->
-<div class="notice-banner">
-  <p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
-</div>
+<p class="notice-banner">
+  <strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.
+</p>
 
+<div class="container">
   <!--[if IE]>
   <div class="notice-banner">
     <p><strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.</p>
@@ -16,8 +17,8 @@ base_url: "../"
   <![endif]-->
 
   <!-- Components -->
-<section class="docs-outer-wrapper content-section section-components">
-  <div class="docs-inner-wrapper">
+  <div class="column-group">
+    <div class="column units-2">
       <div class="section-header">
         <h2 class="section-title">Components</h2>
         <p class="section-description">Design patterns that serve as basic building blocks.</p>
@@ -345,19 +346,19 @@ base_url: "../"
 
 {% highlight html %}
 <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>
@@ -1048,6 +1049,6 @@ window.addEventListener('push', myFunction);
 {% endhighlight %}
 
       </article>
-
     </div>
-</section>
+  </div>
+</div>

docs-assets/css/docs.css

@@ -83,6 +83,12 @@ h1, h2, h3, h4, h5, h6 {
   position: relative;
 }
 
+.component-example-fullbleed,
+.highlight {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+
 .component-example .bar-header-secondary {
   top: 0;
 }
@@ -267,6 +273,18 @@ h1, h2, h3, h4, h5, h6 {
     margin-right: -30px;
   }
 }
+.notice-banner {
+  height: 0;
+  margin: 0;
+  padding: 0;
+  color: #333;
+  font-size: 16px;
+  text-align: center;
+  background-color: #fff9c4;
+  -webkit-animation: shownotice 1s infinite;
+  opacity: 0;
+}
+
 .iphone {
   display: none;
 }
@@ -336,3 +354,19 @@ hr {
     -webkit-transform: scale(1);
   }
 }
+
+@-webkit-keyframes shownotice {
+  0% {
+    height: auto;
+    min-height: 30px;
+    padding: 20px 0;
+    opacity: 1;
+  }
+
+  100% {
+    height: auto;
+    min-height: 30px;
+    padding: 20px 0;
+    opacity: 1;
+  }
+}

lib/sass/docs.scss

@@ -89,6 +89,11 @@ h1, h2, h3, h4, h5, h6 {
 .component-example .content {
   position: relative;
 }
+.component-example-fullbleed,
+.highlight {
+  margin-left: -15px;
+  margin-right: -15px;
+}
 .component-example .bar-header-secondary {
   top: 0;
 }
@@ -209,6 +214,18 @@ h1, h2, h3, h4, h5, h6 {
 // Misc
 // --------------------------------------------------
 
+.notice-banner {
+  height: 0;
+  margin: 0;
+  padding: 0;
+  color: #333;
+  font-size: 16px;
+  text-align: center;
+  background-color: #fff9c4;
+  opacity: 0;
+  -moz-animation: shownotice 1s infinite;
+}
+
 .iphone {
   display: none;
 }
@@ -276,3 +293,19 @@ hr {
    -webkit-transform: scale(1);
   }
 }
+
+// Only visible to Mozilla browsers. Sneaky huh?
+@-moz-keyframes shownotice {
+  0% {
+    height: auto;
+    min-height: 30px;
+    padding: 20px 0;
+    opacity: 1;
+  }
+  100% {
+    height: auto;
+    min-height: 30px;
+    padding: 20px 0;
+    opacity: 1;
+  }
+}