Adjust grid typography and adjust grid demo for borders

The block-grid has been given consistent top and bottom padding to keep it in rhythm. I'm not sure if this breaks a desired effect with the smaller padding sizes as blocks became smaller.
foundation · Oct 5, 2012 · 065740d · 065740d
1 parent afe4566
commit 065740d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/scss/foundation/common/_typography.scss b/scss/foundation/common/_typography.scss
@@ -5,7 +5,7 @@
   @include establish-baseline;
 
   /* Uncomment below to check vertical rhythm against a test background image */
-  /*body { @include debug-vertical-alignment; }*/
+  body { @include debug-vertical-alignment; }
 
   body { line-height: $baseLineHeight; }
 

diff --git a/scss/foundation/components/_grid.scss b/scss/foundation/components/_grid.scss
@@ -111,29 +111,29 @@ that IE7/8 do not support :nth-child.
 
     &>li { display: block; height: auto; float: $defaultFloat; }
     &.one-up { margin: 0; 
-      &>li { width: 100%; padding: 0 0 15px; }
+      &>li { width: 100%; padding: $baseLineHeight / 2 0; }
     }
 
     &.two-up { margin: 0 -15px; 
-      &>li { width: 50%; padding: 0 15px 15px; 
+      &>li { width: 50%; padding: $baseLineHeight / 2 15px; 
         &:nth-child(2n+1) { clear: both; }
       }
     }
 
     &.three-up { margin: 0 -12px; 
-      &>li { width: 33.33%; padding: 0 12px 12px; 
+      &>li { width: 33.33%; padding: $baseLineHeight / 2 12px; 
         &:nth-child(3n+1) { clear: both; }
       }
     }
 
     &.four-up { margin: 0 -10px; 
-      &>li { width: 25%; padding: 0 10px 10px; 
+      &>li { width: 25%; padding: $baseLineHeight / 2 10px; 
         &:nth-child(4n+1) { clear: both; }
       }
     }
 
     &.five-up { margin: 0 -8px; 
-      &>li { width: 20%; padding: 0 8px 8px; 
+      &>li { width: 20%; padding: $baseLineHeight / 2 8px;
         &:nth-child(5n+1) { clear: both; }
       }
     }

diff --git a/test/grid.html b/test/grid.html
@@ -19,14 +19,16 @@
       background: #F4F4F4;
       margin-bottom: 10px;
     }
-    .row.display .column, .row.display .columns, .block-grid li {
+    .row.display .column, .row.display .columns, .block-grid li{
       background: #E7E7E7;
       border: 1px solid #DDD;
       font-size: 11px;
       text-indent: 3px;
-      padding-top: 6px;
-      padding-bottom: 6px;
+      padding-top: 5px;
+      padding-bottom: 5px;
     }
+    .block-grid.five-up li,.block-grid.four-up li,  .block-grid.three-up li, .block-grid.two-up li, .block-grid.one-up li { padding-bottom: 10px; padding-top: 10px; }
+
   </style>
   <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>