From: Andy Cochran Date: Fri, 21 Apr 2017 22:10:41 +0000 (-0400) Subject: Static Gutters documentation X-Git-Tag: v6.4.0-rc1~58^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F9981%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Static Gutters documentation --- diff --git a/docs/pages/grid.md b/docs/pages/grid.md index dfea489c0..a862df6ac 100644 --- a/docs/pages/grid.md +++ b/docs/pages/grid.md @@ -284,9 +284,7 @@ In order to work around browsers' different rounding behaviors, Foundation will ### Gutters -
-

Responsive gutters were added in Foundation 6.1.

-
+#### Responsive Gutters 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. @@ -295,7 +293,7 @@ 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-gutter` variable: +If you're using the Sass version of Foundation, you can change these defaults by editing the `$grid-column-gutter` variable map: ```scss $grid-column-gutter: ( @@ -306,12 +304,22 @@ $grid-column-gutter: ( 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. -Or, if you prefer using one gutter size on every breakpoint, just use a single number. +#### Static Gutters + +If you prefer using one gutter size for every breakpoint, just use a single number for the `$grid-column-gutter` variable: ```scss $grid-column-gutter: 30px; ``` +You can also explicitly set the gutter size for a particular grid row by adding the `.gutter-[size]` class. This is useful when your using responsive gutters but specific components need static gutters. + +```html +
+
This grid always has small gutters
+
+``` + --- ### Collapse/Uncollapse Rows