From 2d1fde3ae0edbf2eb57f238c6dff2da1d329474a Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Fri, 21 Apr 2017 18:10:41 -0400 Subject: [PATCH] Static Gutters documentation --- docs/pages/grid.md | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) 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 -- 2.47.2