From: Geoff Kimball <geoff@zurb.com>
Date: Tue, 22 Dec 2015 03:12:25 +0000 (-0800)
Subject: Add responsive gutter info to grid docs
X-Git-Tag: v6.1.0~8^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F7647%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add responsive gutter info to grid docs
---

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index 7f70daff1..9d219e061 100644
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -277,6 +277,32 @@ In order to work around browsers' different rounding behaviors, Foundation will
 
 ---
 
+### Responsive Gutters
+
+<div class="warning callout">
+  <p>Responsive gutters were added in <strong>Foundation 6.1.0</strong>. As of this version, it's still possible to use static gutters, or you can upgrade your project to responsive gutters. In Foundation 6.2.0, static gutters will be removed entirely in favor of responsive gutters. Refer to the <a href="https://github.com/zurb/foundation-sites/releases/tag/v6.1.0">Version 6.1.0 changelog</a> for more details on the upgrade process.</p>
+</div>
+
+The grid *gutter*&mdash;the space between two columns in a row, and the space between the edge of a grid and the edge of the page&mdash;is responsive, and becomes wider on larger screens.
+
+Breakpoint | Gutter Size
+-----------|------------
+`small`    | 20px
+`medium`   | 30px
+
+If you're using the Sass version of Foundation, you can change these defaults by editing the `$grid-column-responsive-gutter` variable:
+
+```scss
+$grid-column-responsive-gutter: (
+  small: 20px,
+  medium: 30px,
+);
+```
+
+To add more gutter definitions, add new lines to the map. The breakpoint names used here must match a breakpoint name in your project's `$breakpoints` map.
+
+---
+
 ### Collapse/Uncollapse Rows
 
 The `.collapse` class lets you remove column gutters (padding).
diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 3860c6fe3..85131f597 100644
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -20,6 +20,7 @@ $grid-column-gutter: null !default;
 
 /// The amount of space between columns at different screen sizes.
 /// @type Map
+/// @since 6.1.0
 $grid-column-responsive-gutter: (
   small: 20px,
   medium: 30px,