From 4784da1386ed17aea10b0f76f6ba06a9e5bd2665 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Mon, 21 Dec 2015 19:12:25 -0800 Subject: [PATCH] Add responsive gutter info to grid docs --- docs/pages/grid.md | 26 ++++++++++++++++++++++++++ scss/grid/_grid.scss | 1 + 2 files changed, 27 insertions(+) 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 + +
+

Responsive gutters were added in Foundation 6.1.0. 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 Version 6.1.0 changelog for more details on the upgrade process.

+
+ +The grid *gutter*—the space between two columns in a row, and the space between the edge of a grid and the edge of the page—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, -- 2.47.2