From 9c4d3468df97ae2dda71720135d388f5f25fcc28 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Thu, 25 Feb 2016 14:37:41 -0800 Subject: [PATCH] Make refinements to working on grid and close button docs --- docs/pages/close-button.md | 7 +++---- docs/pages/grid.md | 18 ++++++++++++------ 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/docs/pages/close-button.md b/docs/pages/close-button.md index c7fcd4f8c..5a59022ef 100644 --- 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 ``` -*** +--- ## Making Closable @@ -25,12 +25,12 @@ The button is also labeled with `aria-label` to clarify what the button's purpos

The close button on its own doesn't close elements, but you can use it with Toggler, Reveal, Off-canvas, and other plugins that have open and close behaviors.

-For example, pair the callout with the close button component and `data-closable` attribute to create a dismissible alert box. -

Any element can be used as a close trigger, not just close button. Adding the attribute data-close to any element within the callout will turn it into a close trigger.

+The below example pairs the callout with the close button component and `data-closable` attribute to create a dismissible alert box. + ```html_example

You can so totally close this!

@@ -44,5 +44,4 @@ For example, pair the callout with the close button component and `data-closable
- ``` diff --git a/docs/pages/grid.md b/docs/pages/grid.md index 49d1b0ead..b34c61555 100644 --- 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
-

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-rc.1, 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.

+

Responsive gutters were added in Foundation 6.1.

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. @@ -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 { -- 2.47.2