Add block grid generated styles for margin and padding grid.

diff --git a/scss/zf-grid/_classes.scss b/scss/zf-grid/_classes.scss
index 26c08c015c91a912d6b86b88e4773f03c43d4cd2..528e92f2408f550943c9931523f84edeb1ad797e 100644 (file)
--- a/scss/zf-grid/_classes.scss
+++ b/scss/zf-grid/_classes.scss
@@ -151,6 +151,29 @@
   }
 }
 
+// Block Grid classes
+@mixin zf-block-grid-classes($margin-grid: true, $padding-grid: true) {
+  @if $margin-grid {
+    @include -zf-each-breakpoint {
+      @for $i from 1 through $block-grid-max {
+        .#{$-zf-size}-margin-up-#{$i} {
+          @include zf-grid-layout($i, '.cell', $gutter-type: margin);
+        }
+      }
+    }
+  }
+
+  @if $padding-grid {
+    @include -zf-each-breakpoint {
+      @for $i from 1 through $block-grid-max {
+        .#{$-zf-size}-padding-up-#{$i} {
+          @include zf-grid-layout($i, '.cell', $gutter-type: padding);
+        }
+      }
+    }
+  }
+}
+
 // Collapse classes
 @mixin zf-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
   @include -zf-each-breakpoint {
@@ -275,6 +298,7 @@
   $base-grid: true,
   $margin-grid: true,
   $padding-grid: true,
+  $block-grid: true,
   $collapse: true,
   $offset: true,
   $vertical-grid: true
@@ -295,6 +319,11 @@
     @include zf-padding-grid-classes();
   }
 
+  // Block grid
+  @if($block-grid) {
+    @include zf-block-grid-classes($margin-grid, $padding-grid);
+  }
+
   // Collapse gutters
   @if($collapse) {
     @include zf-collapse-grid-classes($margin-grid, $padding-grid);

diff --git a/scss/zf-grid/_layout.scss b/scss/zf-grid/_layout.scss
index a4dc3510ebd2644297ec79642c6a38706924a33f..03aac8fa3d7a2b5c68aba15c286a2e166112d81e 100644 (file)
--- a/scss/zf-grid/_layout.scss
+++ b/scss/zf-grid/_layout.scss
@@ -23,7 +23,9 @@
   $breakpoint: $-zf-zero-breakpoint,
   $vertical: false
 ) {
+  $size: percentage(1/$n);
+
   & > #{$selector} {
-    @include zf-cell($n, $gutter-type: $gutter-type, $gutter-position: $gutter-position, $vertical: $vertical);
+    @include zf-cell($size, $gutter-type: $gutter-type, $gutter-position: $gutter-position, $vertical: $vertical);
   }
 }

diff --git a/scss/zf-grid/_zf-grid.scss b/scss/zf-grid/_zf-grid.scss
index e06ebcecf9043793591e9586284bc193d4b8443a..12f6ef397b8b6648e05ad2e705d374bca4780a3f 100644 (file)
--- a/scss/zf-grid/_zf-grid.scss
+++ b/scss/zf-grid/_zf-grid.scss
@@ -29,6 +29,10 @@ $grid-margin-gutters: (
 /// @type Map | Length
 $grid-padding-gutters: $grid-margin-gutters !default;
 
+/// The maximum number of cells in a block grid.
+/// @type Number
+$block-grid-max: 8 !default;
+
 @import 'gutters';
 @import 'grid';
 @import 'cell';