Make refinements to working on grid and close button docs

diff --git a/docs/pages/close-button.md b/docs/pages/close-button.md
index c7fcd4f8c4bfcdcdad9de13ef5dacc034f25f37d..5a59022ef1a6c0b00f934913facb83e9af37a5cf 100644 (file)
--- a/docs/pages/close-button.md
+++ b/docs/pages/close-button.md
@@ -17,7 +17,7 @@ The button is also labeled with `aria-label` to clarify what the button's purpos
 </div>
 ```
 
-***
+---
 
 ## Making Closable
 
@@ -25,12 +25,12 @@ The button is also labeled with `aria-label` to clarify what the button's purpos
   <p>The close button on its own doesn't close elements, but you can use it with <a href="toggler.html">Toggler</a>, <a href="reveal.html">Reveal</a>, <a href="off-canvas.html">Off-canvas</a>, and other plugins that have open and close behaviors.</p>
 </div>
 
-For example, pair the callout with the close button component and `data-closable` attribute to create a dismissible alert box.
-
 <div class="primary callout">
   <p>Any element can be used as a close trigger, not just close button. Adding the attribute <code>data-close</code> to any element within the callout will turn it into a close trigger.</p>
 </div>
 
+The below example pairs the callout with the close button component and `data-closable` attribute to create a dismissible alert box.
+
 ```html_example
 <div class="callout" data-closable>
   <p>You can so totally close this!</p>
@@ -44,5 +44,4 @@ For example, pair the callout with the close button component and `data-closable
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
-
 ```

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index 49d1b0ead4bec158834b957e1714107f26f15b16..b34c61555d86c8a203db46c441a03029b0cd27c0 100644 (file)
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -1,7 +1,7 @@
 ---
 title: The Grid
 description: Create powerful multi-device layouts quickly and easily with the default 12-column, nestable Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.
-sass: 
+sass:
   - scss/grid/*.scss
   - '!scss/grid/_flex-grid.scss'
 tags:
@@ -277,10 +277,10 @@ In order to work around browsers' different rounding behaviors, Foundation will
 
 ---
 
-### Responsive Gutters
+### 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-rc.1, 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>
+  <p>Responsive gutters were added in Foundation 6.1.</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.
@@ -290,10 +290,10 @@ 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:
+If you're using the Sass version of Foundation, you can change these defaults by editing the `$grid-column-gutter` variable:
 
 ```scss
-$grid-column-responsive-gutter: (
+$grid-column-gutter: (
   small: 20px,
   medium: 30px,
 );
@@ -301,6 +301,12 @@ $grid-column-responsive-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.
+
+```scss
+$grid-column-gutter: 30px;
+```
+
 ---
 
 ### Collapse/Uncollapse Rows
@@ -512,7 +518,7 @@ To center a column semantically. Use ´grid-column-position(center);´.
 
 By default, all grids use the number of columns set by the `$grid-column-count` variable. However, this can be selectively overridden within an instance of a row.
 
-In this example, the grid is 16 columns instead of the normal 12. Any references to column math inside the mixin will use the new column count. 
+In this example, the grid is 16 columns instead of the normal 12. Any references to column math inside the mixin will use the new column count.
 
 ```scss
 .container {