Separate out frame grid

diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss
index a46a2cd8d7ebab06e6233353215ea7788635e3f9..b71be2da3c70ca4e15eeadbeb1fb19a14455224b 100644 (file)
--- a/scss/xy-grid/_cell.scss
+++ b/scss/xy-grid/_cell.scss
@@ -182,36 +182,3 @@
     @include xy-gutters($gutter, $gutter-type, $gutter-position);
   }
 }
-
-/// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
-///
-/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
-@mixin xy-cell-block(
-  $vertical: false
-) {
-  $property: if($vertical == true, 'overflow-y', 'overflow-x');
-
-  @if $vertical == true {
-    overflow-y: auto;
-    max-height: 100%;
-  } @else {
-    overflow-x: auto;
-    max-width: 100%;
-  }
-
-  -webkit-overflow-scrolling: touch;
-  -ms-overflow-stype: -ms-autohiding-scrollbar;
-}
-
-/// Container for inside a grid frame containing multiple blocks. Typically used
-/// as a modifier for a `.cell` to allow the cell to pass along flex sizing
-/// constraints / from parents to children.
-@mixin xy-cell-block-container() {
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-
-  > .grid {
-    max-height: 100%;
-  }
-}

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index fdafa54736f545984c7ed97e236bf5d078a1d39f..caf4a9bdcf99df82a719ec37306d2a44823f2e64 100644 (file)
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -19,24 +19,10 @@
     @include xy-grid;
   }
 
-  // Framed grid styles
-  .grid-frame {
-    @include xy-grid-frame;
-  }
-
   .cell {
     @include xy-cell-base();
     @include xy-cell-static($grid-columns, false, $gutter-type: padding);
   }
-
-  .cell-block {
-    @include xy-cell-block();
-  }
-
-  .cell-block-container {
-    @include xy-cell-block-container();
-  }
-
   .grid {
     > .auto {
       @include xy-cell-base(auto);
@@ -62,13 +48,6 @@
         @include xy-cell-static(shrink, false);
       }
 
-      &.#{$-zf-size}-grid-frame {
-        width: auto;
-        @include xy-grid-frame(true);
-      }
-      .#{$-zf-size}-cell-block {
-        @include xy-cell-block();
-      }
     }
 
     @for $i from 1 through $grid-columns {
@@ -233,26 +212,14 @@
   $padding-grid: true
 ) {
 
-  .cell-block-vertical {
-    @include xy-cell-block(true);
-  }
-
   @include -zf-each-breakpoint() {
     @if not($-zf-size == small) {
-      .#{$-zf-size}-cell-block-vertical {
-        @include xy-cell-block(true);
-      }
     }
   }
 
   .grid-vertical {
     @include xy-grid(vertical);
 
-    &.grid-frame {
-      width: auto;
-      @include xy-grid-frame(true);
-    }
-
 
     > .cell {
       @include xy-cell-reset();
@@ -277,10 +244,6 @@
           @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
         }
 
-        &.#{$-zf-size}-grid-frame {
-          width: auto;
-          @include xy-grid-frame(true);
-        }
       }
 
       @for $i from 1 through $grid-columns {
@@ -311,6 +274,60 @@
   }
 }
 
+@mixin xy-frame-grid-classes($vertical-grid: true) {
+  // Framed grid styles
+  .grid-frame {
+    @include xy-grid-frame;
+  }
+
+  .cell-block {
+    @include xy-cell-block();
+  }
+
+
+  .cell-block-container {
+    @include xy-cell-block-container();
+  }
+
+
+  @include -zf-each-breakpoint(false) {
+
+    .#{$-zf-size}-grid-frame {
+      width: auto;
+      @include xy-grid-frame(true);
+    }
+    .#{$-zf-size}-cell-block {
+      @include xy-cell-block();
+    }
+  }
+
+  @if $vertical-grid {
+
+    .cell-block-vertical {
+      @include xy-cell-block(true);
+    }
+
+    .grid-vertical {
+      &.grid-frame {
+        width: auto;
+        @include xy-grid-frame(true);
+      }
+
+      @include -zf-each-breakpoint(false) {
+        &.#{$-zf-size}-grid-frame {
+          width: auto;
+          @include xy-grid-frame(true);
+        }
+
+        .#{$-zf-size}-cell-block-vertical {
+          @include xy-cell-block(true);
+        }
+      }
+    }
+  }
+
+}
+
 // Final classes
 @mixin foundation-xy-grid-classes(
   $base-grid: true,
@@ -319,7 +336,8 @@
   $block-grid: true,
   $collapse: true,
   $offset: true,
-  $vertical-grid: true
+  $vertical-grid: true,
+  $frame-grid: true
 ) {
 
   // Base grid styles
@@ -356,4 +374,8 @@
   @if($vertical-grid) {
     @include xy-vertical-grid-classes($margin-grid, $padding-grid);
   }
+
+  @if ($frame-grid) {
+    @include xy-frame-grid-classes($vertical-grid)
+  }
 }

diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss
new file mode 100644 (file)
index 0000000..fd70285
--- /dev/null
+++ b/scss/xy-grid/_frame.scss
@@ -0,0 +1,53 @@
+/// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
+///
+/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
+/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.
+@mixin xy-grid-frame(
+  $vertical: false,
+  $nested: false
+) {
+
+  @if $vertical == true {
+    height: if($nested == true, 100%, 100vh);
+  } @else {
+    width: if($nested == true, 100%, 100vw);
+  }
+
+  overflow: hidden;
+  position: relative;
+  flex-wrap: nowrap;
+  align-items: stretch;
+}
+
+/// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
+///
+/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
+@mixin xy-cell-block(
+  $vertical: false
+) {
+  $property: if($vertical == true, 'overflow-y', 'overflow-x');
+
+  @if $vertical == true {
+    overflow-y: auto;
+    max-height: 100%;
+  } @else {
+    overflow-x: auto;
+    max-width: 100%;
+  }
+
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-stype: -ms-autohiding-scrollbar;
+}
+
+/// Container for inside a grid frame containing multiple blocks. Typically used
+/// as a modifier for a `.cell` to allow the cell to pass along flex sizing
+/// constraints / from parents to children.
+@mixin xy-cell-block-container() {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+
+  > .grid {
+    max-height: 100%;
+  }
+}

diff --git a/scss/xy-grid/_grid.scss b/scss/xy-grid/_grid.scss
index da6c249ea40305895c794f0bd724ea5bc0b8e2b4..c848bc6a3c8d9fcf08065555bb5a114979b141b3 100644 (file)
--- a/scss/xy-grid/_grid.scss
+++ b/scss/xy-grid/_grid.scss
@@ -30,25 +30,3 @@
   display: flex;
   flex-flow: $direction $wrap;
 }
-
-
-/// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
-///
-/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
-/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.
-@mixin xy-grid-frame(
-  $vertical: false,
-  $nested: false
-) {
-
-  @if $vertical == true {
-    height: if($nested == true, 100%, 100vh);
-  } @else {
-    width: if($nested == true, 100%, 100vw);
-  }
-
-  overflow: hidden;
-  position: relative;
-  flex-wrap: nowrap;
-  align-items: stretch;
-}

diff --git a/scss/xy-grid/_xy-grid.scss b/scss/xy-grid/_xy-grid.scss
index c708e9b1f4ef90afbd7c86e55b16ebdab48d2dcd..5bce738755e06a62d701d208772ccb038e29580e 100644 (file)
--- a/scss/xy-grid/_xy-grid.scss
+++ b/scss/xy-grid/_xy-grid.scss
@@ -36,6 +36,7 @@ $block-grid-max: 8 !default;
 @import 'gutters';
 @import 'grid';
 @import 'cell';
+@import 'frame';
 @import 'position';
 @import 'layout';
 @import 'collapse';