From: Brett Mason <brettsmason@gmail.com>
Date: Thu, 11 May 2017 10:45:14 +0000 (+0100)
Subject: Huge rework of the output class structure. Still need to fix off breakpoint value... 
X-Git-Tag: v6.4.0-rc1~9^2~67^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6298023eca863151746d3e77a07c60f1147e5192;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Huge rework of the output class structure. Still need to fix off breakpoint value behaviour, but its a lot better with an end in sight!
---

diff --git a/docs/pages/zf-grid.md b/docs/pages/zf-grid.md
index 7c68fc1ac..98b35bbe8 100644
--- a/docs/pages/zf-grid.md
+++ b/docs/pages/zf-grid.md
@@ -31,15 +31,15 @@ If you're using the CSS version of Foundation, you can generate a <a href="https
 The structure of the new grid uses `.grid` (formerly `.row`) and `.cell` (formerly `.column`). This structure makes it a lot clearer when working with vertical grids.
 
 ```html_example
-<div class="grid">
+<div class="grid padding-gutters">
   <div class="cell">full width cell</div>
   <div class="cell">full width cell</div>
 </div>
-<div class="grid">
+<div class="grid padding-gutters">
   <div class="small-6 cell">6 cells</div>
   <div class="small-6 cell">6 cells</div>
 </div>
-<div class="grid">
+<div class="grid padding-gutters">
   <div class="medium-6 large-4 cell">12/6/4 cells</div>
   <div class="medium-6 large-8 cell">12/6/8 cells</div>
 </div>
@@ -49,12 +49,12 @@ The structure of the new grid uses `.grid` (formerly `.row`) and `.cell` (former
 
 ## Auto Sizing
 
-If the class `.auto` is added to the cell, it will take up the remaining space.
+If the class `.[size]-auto` is added to the cell, it will take up the remaining space.
 
 ```html_example
-<div class="grid">
+<div class="grid padding-gutters">
   <div class="small-4 cell">4 cells</div>
-  <div class="auto cell">Whatever's left!</div>
+  <div class="small-auto cell">Whatever's left!</div>
 </div>
 ```
 
@@ -65,19 +65,19 @@ Multiple expanding cells will share the leftover space equally.
 ```html_example
 <div class="grid">
   <div class="small-4 cell">4 cells</div>
-  <div class="auto cell">Whatever's left!</div>
-  <div class="auto cell">Whatever's left!</div>
+  <div class="small-auto cell">Whatever's left!</div>
+  <div class="small-auto cell">Whatever's left!</div>
 </div>
 ```
 
 ---
 
-A cell can also be made to *shrink*, by adding the `.shrink` class. This means it will only take up the space its contents need.
+A cell can also be made to *shrink*, by adding the `.[size]-shrink` class. This means it will only take up the space its contents need.
 
 ```html_example
 <div class="grid">
-  <div class="shrink cell">Shrink!</div>
-  <div class="auto cell">Expand!</div>
+  <div class="small-shrink cell">Shrink!</div>
+  <div class="small-auto cell">Expand!</div>
 </div>
 ```
 
diff --git a/scss/grid/_zf-grid.scss b/scss/grid/_zf-grid.scss
index b8f18c9fe..c92cb172d 100644
--- a/scss/grid/_zf-grid.scss
+++ b/scss/grid/_zf-grid.scss
@@ -51,7 +51,7 @@ $grid-debug: false !default;
     @return $size;
 }
 
-/// Create gutters for a cell/container. 
+/// Create gutters for a cell/container.
 ///
 /// @param {Number|Map} $gutters [$grid-gutters] - Map or single value for gutters size.
 /// @param {Keyword} $type [$grid-type] - The type of gutter to apply. Accepts either `padding` or `margin`.
@@ -64,7 +64,7 @@ $grid-debug: false !default;
   $negative: false
 ) {
   $format: if($negative, '-', '');
-  
+
   // If we have declared negative gutters, force type to `margin.
   $type: if($negative, 'margin', $type);
 
@@ -83,7 +83,7 @@ $grid-debug: false !default;
   @else {
     $gutter-output: $position;
   }
-  
+
   // Output our gutters.
   @if ($gutters == 'auto') {
     @include -zf-breakpoint-value($gutters, $grid-gutters) {
@@ -121,7 +121,7 @@ $grid-debug: false !default;
   margin: 0 auto;
 }
 
-/// Creates a container for your flex cells. 
+/// Creates a container for your flex cells.
 ///
 /// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.
 /// @param {Boolean} $wrap [true] - If the cells within should wrap or not.
@@ -136,7 +136,7 @@ $grid-debug: false !default;
   flex-flow: $direction $wrap;
 }
 
-/// Creates a cell for your grid. 
+/// Creates a cell for your grid.
 ///
 /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
 /// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction - used to apply gutters in the right place.
@@ -185,13 +185,13 @@ $grid-debug: false !default;
       }
     }
     @else {
-      flex: 0 0 $size;
+      flex: 0 0 zf-cell-size($size);
       max-#{$direction}: zf-cell-size($size);
     }
   }
 }
 
-/// Creates a cell for your grid. 
+/// Creates a cell for your grid.
 ///
 /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
 /// @param {Number|Map} $gutters [$grid-gutters] - Map or single value for gutters size.
@@ -205,7 +205,7 @@ $grid-debug: false !default;
   $direction: horizontal
 ) {
   // Sizing
-  @include zf-cell-size($size: $size, $direction: $direction);
+  @include zf-cell-size($size: $size, $direction: $direction, $type: $type);
 
   // Gutters
   @if($gutters) {
@@ -213,164 +213,132 @@ $grid-debug: false !default;
   }
 }
 
-// Final classes
-@mixin zf-grid-classes($vertical: true, $collapse: true) {
-
-  // Grid Container
-  .grid-container {
-    @include zf-grid-container;
-  }
+// Margin Grid classes
+@mixin zf-margin-grid-classes {
+  .margin-gutters {
+    @include zf-gutters($negative: true);
 
-  // Default Grid
-  .grid {
-    @include zf-grid;
-
-    // Negative margins for margin grid.
-    @if ($grid-type == 'margin') {
-      @include zf-gutters($negative: true);
+    // Base cell styles
+    .cell {
+      @include zf-cell($type: margin);
     }
 
-    // Negative nested margin for padding grid.
-    @if ($grid-type == 'padding') {
-      .grid {
-        @include zf-gutters($negative: true);
+    // Auto width
+    @include -zf-each-breakpoint() {
+      .#{$-zf-size}-auto {
+        @include zf-cell-size(auto, $type: margin);
       }
     }
-  }
 
-  // Vertical Grid Classes
-  @if ($vertical) {
-    // Vertical grid.
-    .grid-vertical {
-      @include zf-grid(vertical, false);
-
-      // Cells
-      .cell {
-        @include zf-cell($position: vertical);
-        #{$grid-type}-right: 0;
-        #{$grid-type}-left: 0;
-        max-width: 100%;
-      }
-
-      @include -zf-each-breakpoint {
-        @for $i from 1 through $grid-columns {
-          // Sizing (percentage)
-          .#{$-zf-size}-#{$i} {
-            @include zf-cell($i, $direction: vertical, $gutters: false);
-          }
-        }
+    // Shrink
+    @include -zf-each-breakpoint() {
+      .#{$-zf-size}-shrink {
+        @include zf-cell-size(shrink, $type: margin);
       }
     }
 
-    // Collapse gutters.
-    .grid-collapse {
-      @if ($grid-type == 'margin') {
-        margin-right: 0;
-        margin-left: 0;
-    
-        > .cell {
-          #{$grid-type}-right: 0;
-          #{$grid-type}-left: 0;
+    // Sizing classes
+    @include -zf-each-breakpoint {
+      @for $i from 1 through $grid-columns {
+        // Sizing (percentage)
+        .#{$-zf-size}-#{$i} {
+          @include zf-cell-size($i, $type: margin);
         }
       }
     }
+  }
+}
 
-    // Vertical collapse classes
-    @if ($vertical) {
-      // Collapse vertical gutters.
-      .grid-vertical-collapse {
-        > .cell {
-          #{$grid-type}-top: 0;
-          #{$grid-type}-bottom: 0;
-        }
-      }
+// Padding Grid classes
+@mixin zf-padding-grid-classes {
+  .padding-gutters {
+
+    // Negative margin for nested grids
+    .padding-gutters {
+      @include zf-gutters($negative: true);
     }
-  }
 
-  // Grid shrink classes
-  .grid-shrink {
-    > .cell {
-      @include zf-cell(shrink, false);
+    // Base cell styles
+    .cell {
+      @include zf-cell($type: padding);
     }
-  }
 
-  // Grid auto classes
-  .grid-auto {
-    > .cell {
-      @include zf-cell(auto, false);
+    // Auto width
+    @include -zf-each-breakpoint() {
+      .#{$-zf-size}-auto {
+        @include zf-cell-size(auto, $type: padding);
+      }
     }
-  }
 
-  @include -zf-each-breakpoint($small: false) {
-    @if ($collapse) {
-      // Responsive collapse classes
-      .#{$-zf-size}-grid-collapse {
-        > .cell {
-          #{$grid-type}-right: 0;
-          #{$grid-type}-left: 0;
-        }
+    // Shrink
+    @include -zf-each-breakpoint() {
+      .#{$-zf-size}-shrink {
+        @include zf-cell-size(shrink, $type: padding);
       }
+    }
 
-      // Vertical collapse classes
-      @if ($vertical) {
-        // Responsive vertical collapse classes
-        .#{$-zf-size}-grid-vertical-collapse {
-          > .cell {
-            #{$grid-type}-top: 0;
-            #{$grid-type}-bottom: 0;
-          }
+    // Sizing classes
+    @include -zf-each-breakpoint {
+      @for $i from 1 through $grid-columns {
+        // Sizing (percentage)
+        .#{$-zf-size}-#{$i} {
+          @include zf-cell-size($i, $type: padding);
         }
       }
     }
+  }
+}
+
+// Collapse classes
+@mixin zf-collapse-grid-classes {
+  @include -zf-each-breakpoint {
+    .#{$-zf-size}-collapse {
+      margin-right: 0;
+      margin-left: 0;
 
-    // Responsive grid shrink classes
-    .#{$-zf-size}-grid-shrink {
       > .cell {
-        @include zf-cell(shrink, false);
+        margin: 0;
+        padding: 0;
       }
-    }
 
-    // Responsive grid auto classes
-    .#{$-zf-size}-grid-auto {
-      > .cell {
-        @include zf-cell(auto, false);
+      @include -zf-each-breakpoint {
+        // Output new widths to not include gutters
+        @for $i from 1 through $grid-columns {
+          // Sizing (percentage)
+          & > .#{$-zf-size}-#{$i} {
+            @include zf-cell-size($i, $type: padding);
+          }
+        }
       }
     }
   }
+}
 
-  // Cells
-  .cell {
-    @include zf-cell;
-  }
+// Final classes
+@mixin zf-grid-classes($margin-grid: true, $padding-grid: true, $collapse: true) {
 
-  // Shrink
-  .shrink {
-    @include zf-cell(shrink, false);
+  // Grid Container
+  .grid-container {
+    @include zf-grid-container;
   }
 
-  // Auto
-  .auto {
-    @include zf-cell(auto, false);
+  // Base grid styles
+  .grid {
+    @include zf-grid;
   }
 
-  @include -zf-each-breakpoint($small: false) {
-    // Responsive shrink sizes
-    .#{$-zf-size}-shrink {
-      @include zf-cell(shrink, false);
-    }
+  // Margin grid
+  @if($margin-grid) {
+    @include zf-margin-grid-classes();
+  }
 
-    // Responsive auto sizes
-    .#{$-zf-size}-auto {
-      @include zf-cell(auto, false);
-    }
+  // Padding grid
+  @if($padding-grid) {
+    @include zf-padding-grid-classes();
   }
 
-  @include -zf-each-breakpoint {
-    @for $i from 1 through $grid-columns {
-      // Sizing (percentage)
-      .#{$-zf-size}-#{$i} {
-        @include zf-cell($i, $gutters: false);
-      }
-    }
+  // Collapse gutters
+  @if($collapse) {
+    @include zf-collapse-grid-classes();
   }
 }