Merge pull request #10261 from zurb/padding-on-grid-containers

Add class to ease padding containers below max-width
foundation · Jun 26, 2017 · 4b11116 · 4b11116
2 parents 0e8b3b9 + ed09830
commit 4b11116
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 0 deletions.
diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
@@ -102,6 +102,21 @@ The grid defaults to the full width of its container. In order to contain the gr
   </div>
 </div>
 ```
+
+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.
+
+```html
+<div class="grid-container grid-container-padded">
+  <div class="grid-x">
+    <div class="cell small-4">cell</div>
+    <div class="cell small-4">cell</div>
+    <div class="cell small-4">cell</div>
+  </div>
+</div>
+```
 ---
 
 ## Auto Sizing

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
@@ -14,6 +14,10 @@
     @include xy-grid-container;
   }
 
+  .grid-container-padded {
+    @include xy-grid-container-padding;
+  }
+
   // Base grid styles
   .grid-x {
     @include xy-grid;

diff --git a/scss/xy-grid/_grid.scss b/scss/xy-grid/_grid.scss
@@ -16,6 +16,30 @@
   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/scss/xy-grid/_xy-grid.scss b/scss/xy-grid/_xy-grid.scss
@@ -29,6 +29,9 @@ $grid-margin-gutters: (
 /// @type Map | Length
 $grid-padding-gutters: $grid-margin-gutters !default;
 
+$grid-container-padding: $grid-padding-gutters !default;
+$grid-container-max: $global-width !default;
+
 /// The maximum number of cells in a block grid.
 /// @type Number
 $block-grid-max: 8 !default;

diff --git a/test/visual/xy-grid/containers.html b/test/visual/xy-grid/containers.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>xy margin grid</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+    <style>
+      .demo {
+        background: #1779ba;
+        color: white;
+        text-align: center;
+      }
+
+      .cell {
+        /*background: dodgerblue;*/
+        line-height: 50px;
+        height: 50px;
+        margin-bottom: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell">
+          <h1>Grid Container</h1>
+
+          <div class="primary callout">
+            <p>Resize the window to know the difference!</p>
+          </div>
+
+          <h4>With no `grid-container-padding` should be flush below 1200px, and bounded and centered above</h4>
+
+          <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>
+
+          <h4>With `grid-container-padded` should have padding below 1200px, corresponding to responsive gutters</h4>
+
+          <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>
+
+
+      </div>
+    </div>
+
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>