Fix demos in grid documentation

dfeeney-webdev · Dec 4, 2014 · 5486ee5 · 5486ee5
1 parent d1fbda7
commit 5486ee5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/docs/assets/scss/docs/_docs.scss b/docs/assets/scss/docs/_docs.scss
@@ -717,15 +717,28 @@ hr {
     height: auto;
 
     .grid-block {
-      height: 50px;
+      height: 70px;
       margin: 0;
+      background: transparent;
+      position: relative;
+      &::after {
+        position: absolute;
+        display: block;
+        content: '';
+        top: 1rem; left: 1rem; right: 1rem; bottom: 1rem;
+        background: rgba($primary-color, 0.1);
+      }
     }
   }
 
   &.vertical {
     .grid-block {
       height: 50px;
 
+      &:first-child {
+        margin-bottom: 0.5rem;
+      }
+
       @include breakpoint(medium) {
         height: auto;
       }

diff --git a/docs/templates/grid.html b/docs/templates/grid.html
@@ -86,9 +86,9 @@ <h4>Manual sizing</h4>
 </div>
 </hljs>
 
-<div class="docs-grid-demo grid-block">
+<div class="docs-grid-demo manual-size grid-block">
   <div id="sidebar" class="medium-4 grid-block"></div>
-  <div id="main" class="medium-8 grid-block"></div>
+  <div id="main" class="medium-7 grid-block"></div>
 </div>
 
 <hr>
@@ -150,7 +150,7 @@ <h3>The Vertical Grid</h3>
 </div>
 </hljs>
 
-<div class="docs-grid-demo vertical grid-block">
+<div class="docs-grid-demo vertical-demo vertical grid-block">
   <div class="grid-block"></div>
   <div class="grid-block"></div>
 </div>
@@ -240,16 +240,22 @@ <h4>Block Alignment</h4>
   <li>`align-spaced`: Blocks spread out so that the space <em>around</em> each one is the same.</li>
 </ul>
 
+<h5>Center</h5>
+
 <div class="docs-grid-demo align-center grid-block">
   <div class="small-4 grid-block"></div>
   <div class="small-4 grid-block"></div>
 </div>
 
+<h5>Justify</h5>
+
 <div class="docs-grid-demo align-justify grid-block">
   <div class="small-4 grid-block"></div>
   <div class="small-4 grid-block"></div>
 </div>
 
+<h5>Spaced</h5>
+
 <div class="docs-grid-demo align-spaced grid-block">
   <div class="small-4 grid-block"></div>
   <div class="small-4 grid-block"></div>
@@ -315,13 +321,13 @@ <h4>Offsets</h4>
 <hljs>
 <div class="grid-block">
   <div class="small-6 grid-block"></div>
-  <div class="small-3 small-offset-3 grid-block"></div>
+  <div class="small-2 small-offset-2 grid-block"></div>
 </div>
 </hljs>
 
 <div class="docs-grid-demo grid-block">
   <div class="small-6 grid-block"></div>
-  <div class="small-3 small-offset-3 grid-block"></div>
+  <div class="small-2 small-offset-2 grid-block"></div>
 </div>
 
 <p>Offset classes allow you to fine-tune the spacing of blocks at different screen sizes. However, many common spacing options can also be achieved with the grid alignment classes described above.</p>