Start of vertical grid

diff --git a/scss/zf-grid/_cell.scss b/scss/zf-grid/_cell.scss
index e323339cdd89c4c50a655ebaa975a02e469d9484..cb7c2d7e4b2a0716b97e01f0878a851de0201e22 100644 (file)
--- a/scss/zf-grid/_cell.scss
+++ b/scss/zf-grid/_cell.scss
@@ -53,6 +53,16 @@
   }
 }
 
+@mixin zf-cell-reset($vertical: true) {
+  $direction: if($vertical == true, width, height);
+  $sides: if($vertical == true, left right, top bottom);
+  #{$direction}: auto;
+  @each $side in $sides {
+    margin-#{$side}: 0;
+    padding-#{$side}: 0;
+  }
+}
+
 @mixin -zf-cell-properties($size, $margin-gutter, $vertical) {
   $direction: if($vertical == true, height, width);
   @if($size == 'full') {

diff --git a/scss/zf-grid/_classes.scss b/scss/zf-grid/_classes.scss
index c0e2dc97cae2af15f8fe3f4913face26b8fa619e..0c5d4aacea6f5f11587080fa29c8af4bbdfddedf 100644 (file)
--- a/scss/zf-grid/_classes.scss
+++ b/scss/zf-grid/_classes.scss
@@ -55,54 +55,58 @@
 }
 
 // Margin Grid classes
-@mixin zf-margin-grid-classes {
-  .margin-gutters {
-    @include zf-gutters($negative: true);
+@mixin zf-margin-grid-classes(
+  $gutter-position: left right,
+  $vertical: false,
+  $wrapping-selector: '.margin-gutters'
+){
+  #{$wrapping-selector} {
+    @include zf-gutters($negative: true, $gutter-position: $gutter-position);
 
     // Base cell styles
     > .cell {
-      @include zf-cell-nonresponsive();
+      @include zf-cell-nonresponsive($vertical: true);
     }
 
     // Auto width
     @include -zf-each-breakpoint(false) {
-      @if(map-has-key($grid-margin-gutters, $-zf-size)) {
+      @if(typeof($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
         > .cell {
-          @include zf-cell-nonresponsive($breakpoint: $-zf-size);
+          @include zf-cell-nonresponsive($breakpoint: $-zf-size, $vertical: $vertical);
         }
         > .auto {
-          @include zf-cell-nonresponsive(auto, false, $breakpoint: $-zf-size);
+          @include zf-cell-nonresponsive(auto, false, $breakpoint: $-zf-size, $vertical: $vertical);
         }
         > .shrink {
-          @include zf-cell-nonresponsive(shrink, false, $breakpoint: $-zf-size);
+          @include zf-cell-nonresponsive(shrink, false, $breakpoint: $-zf-size, $vertical: $vertical);
         }
       }
       > .#{$-zf-size}-auto {
-        @include zf-cell-nonresponsive(auto, false, $breakpoint: $-zf-size);
+        @include zf-cell-nonresponsive(auto, false, $breakpoint: $-zf-size, $vertical: $vertical);
       }
       > .#{$-zf-size}-shrink {
-        @include zf-cell-nonresponsive(shrink, false, $breakpoint: $-zf-size);
+        @include zf-cell-nonresponsive(shrink, false, $breakpoint: $-zf-size, $vertical: $vertical);
       }
 
       @for $i from 1 through $grid-columns {
         // Sizing (percentage)
         > .#{$-zf-size}-#{$i} {
-          @include zf-cell-nonresponsive($i, false, $breakpoint: $-zf-size);
+          @include zf-cell-nonresponsive($i, false, $breakpoint: $-zf-size, $vertical: $vertical);
         }
       }
-      @if(map-has-key($grid-margin-gutters, $-zf-size)) {
+      @if(typeof($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
         @each $bp in -zf-breakpoints-less-than($-zf-size) {
           @if(map-has-key($grid-margin-gutters, $bp)) {
             > .#{$bp}-auto {
-              @include zf-cell-nonresponsive(auto, false, $breakpoint: $bp);
+              @include zf-cell-nonresponsive(auto, false, $breakpoint: $bp, $vertical: $vertical);
             }
             > .#{$bp}-shrink {
-              @include zf-cell-nonresponsive(shrink, false, $breakpoint: $bp);
+              @include zf-cell-nonresponsive(shrink, false, $breakpoint: $bp, $vertical: $vertical);
             }
             @for $i from 1 through $grid-columns {
               // Sizing (percentage)
               > .#{$bp}-#{$i} {
-                @include zf-cell-nonresponsive($i, false, $breakpoint: $bp);
+                @include zf-cell-nonresponsive($i, false, $breakpoint: $bp, $vertical: $vertical);
               }
             }
           }
@@ -112,7 +116,7 @@
       @for $i from 1 through $grid-columns {
         // Sizing (percentage)
         > .#{$-zf-size}-#{$i} {
-          @include zf-cell-nonresponsive($i, false, $breakpoint: $-zf-size);
+          @include zf-cell-nonresponsive($i, false, $breakpoint: $-zf-size, $vertical: $vertical);
         }
       }
     }
@@ -167,39 +171,37 @@
 }
 
 // Vertical Grid classes
-@mixin zf-vertical-grid-classes {
-  // Sizing classes
-  @include -zf-each-breakpoint {
-    @for $i from 1 through $grid-columns {
-      // Sizing (percentage)
-      .#{$-zf-size}-vertical-#{$i} {
-        @include zf-cell($i, false, $gutter-type: padding, $vertical: true);
-      }
-    }
-  }
-
-  // Auto width
-  @include -zf-each-breakpoint() {
-    .#{$-zf-size}-vertical-auto {
-      @include zf-cell(auto, false, $vertical: true);
+@mixin zf-vertical-grid-classes(
+  $margin-grid: true,
+  $padding-grid: true
+) {
+  .grid-vertical {
+    @include zf-grid(vertical);
+    > .cell {
+      @include zf-cell-reset()
     }
-  }
-
-  // Shrink
-  @include -zf-each-breakpoint() {
-    .#{$-zf-size}-vertical-shrink {
-      @include zf-cell(shrink, false, $vertical: true);
+    @include -zf-each-breakpoint() {
+      @if(typeof($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
+        > .cell {
+          @include zf-cell-nonresponsive($breakpoint: $-zf-size, $vertical: true);
+        }
+        > .auto {
+          @include zf-cell-nonresponsive(auto, false, $breakpoint: $-zf-size, $vertical: true);
+        }
+        > .shrink {
+          @include zf-cell-nonresponsive(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+        }
+      }
+      @for $i from 1 through $grid-columns {
+        // Sizing (percentage)
+        .#{$-zf-size}-#{$i} {
+          @include zf-cell-nonresponsive($i, false, $vertical: true);
+        }
+      }
     }
   }
+  @include zf-margin-grid-classes(top bottom, true, '.grid-vertical.margin-gutters')
 
-  .grid-vertical.margin-gutters {
-    @include zf-gutters($gutter-position: top bottom, $negative: true);
-
-    // Base cell styles
-    > .cell {
-      @include zf-cell($gutter-position: top bottom, $vertical: true);
-    }
-  }
 }
 
 // Final classes
@@ -207,7 +209,7 @@
   $base-grid: true,
   $margin-grid: true,
   $padding-grid: true,
-  $vertical-grid: false,
+  $vertical-grid: true,
   $collapse: true,
   $offset: true
 ) {
@@ -229,7 +231,7 @@
 
   // Vertical grid
   @if($vertical-grid) {
-    @include zf-vertical-grid-classes();
+    @include zf-vertical-grid-classes($margin-grid, $padding-grid);
   }
 
   // Collapse gutters

diff --git a/test/visual/zf-grid/vertical-grid.html b/test/visual/zf-grid/vertical-grid.html
index 41e24f80cea59fccbc142cd3f1d7d6c5a4ff251c..e216338a522f8d1471fd3624df974ffd20d1cb3d 100644 (file)
--- a/test/visual/zf-grid/vertical-grid.html
+++ b/test/visual/zf-grid/vertical-grid.html
@@ -13,6 +13,10 @@
 
       .demo {
         background: #1779ba;
+        height: 100%;
+      }
+      .grid-vertical {
+        height: 300px;
       }
 
       .cell {
@@ -28,16 +32,16 @@
     <h2>Sizing Classes</h2>
 
     <div class="grid-vertical grid-frame margin-gutters">
-      <div class="cell medium-vertical-5"><div class="demo">5</div></div>
-      <div class="cell medium-vertical-4"><div class="demo">4</div></div>
-      <div class="cell medium-vertical-3"><div class="demo">3</div></div>
+      <div class="cell medium-5"><div class="demo">5</div></div>
+      <div class="cell medium-4"><div class="demo">4</div></div>
+      <div class="cell medium-3"><div class="demo">3</div></div>
     </div>
 
     <h2>Auto and Shrink</h2>
 
     <div class="grid-vertical grid-frame margin-gutters">
-      <div class="cell medium-vertical-shrink"><div class="demo">Shrink on medium</div></div>
-      <div class="cell medium-vertical-auto"><div class="demo">Auto on medium</div></div>
+      <div class="cell medium-shrink"><div class="demo">Shrink on medium</div></div>
+      <div class="cell medium-auto"><div class="demo">Auto on medium</div></div>
     </div>
 
     <h2>Collapse</h2>
@@ -61,8 +65,8 @@
     <h2>Offset</h2>
 
     <div class="grid-vertical grid-frame margin-gutters">
-      <div class="cell medium-vertical-3 medium-vertical-offset-2"><div class="demo">3</div></div>
-      <div class="cell medium-vertical-4"><div class="demo">4</div></div>
+      <div class="cell medium-3 medium-offset-2"><div class="demo">3</div></div>
+      <div class="cell medium-4"><div class="demo">4</div></div>
     </div>
 
     <script src="../assets/js/vendor.js"></script>