First take on the reworked grid container. Updates docs to show usage as well as...

diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
index 5d8c020545c4f653c277f16c3a625dce06124ac5..51f166e513f1a65597f7695dc292f629505ed1d8 100644 (file)
--- a/docs/pages/xy-grid.md
+++ b/docs/pages/xy-grid.md
@@ -90,26 +90,49 @@ To define a grid type, simple set `.grid-margin-x` or `.grid-padding-x` on the g
 
 ## Grid Container
 
-The grid defaults to the full width of its container. In order to contain the grid, use the `.grid-container` class.
+The grid defaults to the full width of the available space. To contain it use the `grid-container` class. The container will be centered and have a max-width equal to your `$grid-container` setting (1200px by default), along with padding on the left/right equal to half your `$grid-container-padding` setting.
 
 ```html
 <div class="grid-container">
-  <div class="grid-x">
+  <div class="grid-x grid-margin-x">
     <div class="cell small-4">cell</div>
     <div class="cell small-4">cell</div>
     <div class="cell small-4">cell</div>
   </div>
 </div>
 ```
+### Grid Container Fluid
 
-By default, the container will be centered and have a max-width equal to your
-`$max-width` setting (1200px by default), and be flush to the screen for widths
-below that. If you want to add padding below the `$max-width`, simply add the
-`.grid-container-padded` class to your grid container.
+To stretch the content to the full width of the available space, simply use the class `grid-container-fluid` instead.
 
 ```html
-<div class="grid-container grid-container-padded">
-  <div class="grid-x">
+<div class="grid-container-fluid">
+  <div class="grid-x grid-margin-x">
+    <div class="cell small-4">cell</div>
+    <div class="cell small-4">cell</div>
+    <div class="cell small-4">cell</div>
+  </div>
+</div>
+```
+
+### Grid Container Full
+
+To stretch the content to the full width of the available space and remove grid container padding, simply use the class `grid-container-full`. Note that this is primarily for use with `grid-margin-x` - it works with `grid-padding-x` too, but will work the same as `grid-container-fluid`.
+
+<div class="callout alert">
+  <p>Please note when using the `grid-container-full` and `grid-margin-x` you will also need to hide the horizontal overflow in order for this to work correctly if your content is going to touch the sides of the viewport.</p>
+  <p>The best way to do this is:
+  ```
+  body {
+    overflow-x: hidden;
+  }
+  ```
+  </p>
+</div>
+
+```html
+<div class="grid-container-full">
+  <div class="grid-x grid-margin-x">
     <div class="cell small-4">cell</div>
     <div class="cell small-4">cell</div>
     <div class="cell small-4">cell</div>

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index 97f796b9b7859bb582118e0ec1e54120349a297d..b136e5caf3986afbf3897dfc35847e313dcdcc2e 100644 (file)
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -14,8 +14,12 @@
     @include xy-grid-container;
   }
 
-  .grid-container-padded {
-    @include xy-grid-container-padding;
+  .grid-container-fluid {
+    @include xy-grid-container(100%);
+  }
+
+  .grid-container-full {
+    @include xy-grid-container(100%, 0);
   }
 
   // Base grid styles
@@ -164,6 +168,13 @@
       @include xy-gutters($negative: true);
     }
 
+    // Negative margin for grids within `grid-container/grid-container-fluid`
+    // This allows margin and padding grids to line up with eachother
+    .grid-container > &,
+    .grid-container-fluid > & {
+      @include xy-gutters($negative: true);
+    }
+
     // Base cell styles
     > .cell {
       @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);

diff --git a/scss/xy-grid/_grid.scss b/scss/xy-grid/_grid.scss
index 33020ff91adf5381939eb787e3aa733761bf4cdf..44186ea76e9ad048b81806bf76131c6ccd2f693d 100644 (file)
--- a/scss/xy-grid/_grid.scss
+++ b/scss/xy-grid/_grid.scss
@@ -10,36 +10,15 @@
 ///
 /// @param {Number} $width [$grid-container] - a width to limit the container to.
 @mixin xy-grid-container(
-  $width: $grid-container
+  $width: $grid-container,
+  $padding: $grid-container-padding
 ) {
+  @include xy-gutters($gutters: $padding, $gutter-type: padding);
+
   max-width: $width;
   margin: 0 auto;
 }
 
-/// Add padding to your container, up to a particular size
-///
-/// @param {Number} $width [$grid-container] - a width to limit the container to.
-@mixin xy-grid-container-padding(
-  $padding: $grid-container-padding,
-  $max: $grid-container-max
-) {
-  // Output our margin gutters.
-  @if (type-of($padding) == 'map') {
-    @include -zf-breakpoint-value(auto, $padding) {
-      padding-left: rem-calc($-zf-bp-value / 2);
-      padding-right: rem-calc($-zf-bp-value / 2);
-    }
-  }
-  @elseif (type-of($padding) == 'number') {
-    padding-left: rem-calc($padding) / 2;
-    padding-right: rem-calc($padding) / 2;
-  }
-  @include breakpoint($max) {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
 /// Creates a container for your flex cells.
 ///
 /// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.

diff --git a/test/visual/xy-grid/containers.html b/test/visual/xy-grid/containers.html
index 05070a1946895904667d93842194a7584e9e95d4..f3d54c69d5cb724e23672a95e5f88516ee3d0bb5 100644 (file)
--- a/test/visual/xy-grid/containers.html
+++ b/test/visual/xy-grid/containers.html
@@ -8,6 +8,11 @@
     <title>xy margin grid</title>
     <link href="../assets/css/foundation.css" rel="stylesheet" />
     <style>
+      body {
+        overflow-x: hidden;
+        text-align: center;
+      }
+
       .demo {
         background: #1779ba;
         color: white;
@@ -23,36 +28,66 @@
     </style>
   </head>
   <body>
+
+    <h1>Grid Container</h1>
+    <p>The below 2 examples should line up with each other.</p>
+
+    <div class="grid-container">
+      <div class="grid-x grid-margin-x">
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+      </div>
+    </div>
+
     <div class="grid-container">
       <div class="grid-x grid-padding-x">
-        <div class="cell">
-          <h1>Grid Container</h1>
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+      </div>
+    </div>
 
-          <div class="primary callout">
-            <p>Resize the window to know the difference!</p>
-          </div>
+    <hr>
 
-          <h4>With no `grid-container-padding` should be flush below 1200px, and bounded and centered above</h4>
+    <h1>Grid Container Fluid</h1>
+    <p>The below 2 examples should line up with each other.</p>
 
-          <div class="grid-container">
-            <div class="grid-x grid-margin-x">
-              <div class="cell medium-12"><div class="demo">12/12</div></div>
-            </div>
-          </div>
+    <div class="grid-container-fluid">
+      <div class="grid-x grid-margin-x">
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+      </div>
+    </div>
+
+    <div class="grid-container-fluid">
+      <div class="grid-x grid-padding-x">
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+      </div>
+    </div>
 
-          <h4>With `grid-container-padded` should have padding below 1200px, corresponding to responsive gutters</h4>
+    <hr>
 
-          <div class="grid-container grid-container-padded">
-            <div class="grid-x grid-margin-x">
-              <div class="cell medium-12"><div class="demo">12/12</div></div>
-            </div>
-          </div>
-        </div>
-        
+    <h1>Grid Container Full</h1>
+    <p>The below 2 examples should <strong>NOT</strong> line up with each other.<br>
+    This is because we don't want to cut off the padding on the padding version, but we want the margin version to be flush with the edge.</p>
 
+    <div class="callout alert">
+      <p>Also note the use of `overflow-x: hidden;` on the `body`. This is required for this to work correctly, but is noted in the docs.</p>
+    </div>
+
+    <div class="grid-container-full">
+      <div class="grid-x grid-margin-x">
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+      </div>
+    </div>
+
+    <div class="grid-container-full">
+      <div class="grid-x grid-padding-x">
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
+        <div class="cell medium-6"><div class="demo">Cell</div></div>
       </div>
     </div>
-    
 
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>