Merge branch 'master' into develop

docs/pages/close-button.md

@@ -13,10 +13,29 @@ The button is also labeled with `aria-label` to clarify what the button's purpos
   <button class="close-button" aria-label="Close alert" type="button">
     <span aria-hidden="true">&times;</span>
   </button>
-  <p>You can so totally close this!</p>
+  <p>Look at this close button!</p>
 </div>
 ```
 
+***
+
+## Making Closable
+
 <div class="callout primary">
   <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 dismissable 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>
+
+```html_example
+<div class="callout" data-closable>
+  <p>You can so totally close this!</p>
+  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+```

docs/pages/forms.md

@@ -115,9 +115,9 @@ To encourage their use as an accessibility tool, the `<fieldset>` element is no
 ```html_example
 <fieldset class="fieldset">
   <legend>Check these out</legend>
-  <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
-  <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
-  <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
+  <input id="checkbox12" type="checkbox"><label for="checkbox12">Checkbox 1</label>
+  <input id="checkbox22" type="checkbox"><label for="checkbox22">Checkbox 2</label>
+  <input id="checkbox32" type="checkbox"><label for="checkbox32">Checkbox 3</label>
 </fieldset>
 ```
 

docs/pages/grid.md

@@ -325,12 +325,14 @@ There are times when you won't want each media query to be collapsed or uncollap
 <div class="row medium-uncollapse large-collapse">
   <div class="small-6 columns">
     <div class="callout secondary">
+      <p class="show-for-small-only">On a small screen, I have gutters!</p>
       <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
       <p class="show-for-large-up">On a large screen, I have no gutters!</p>
     </div>
   </div>
   <div class="small-6 columns">
     <div class="callout secondary">
+      <p class="show-for-small-only">On a small screen, I have gutters!</p>
       <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
       <p class="show-for-large-up">On a large screen, I have no gutters!</p>
     </div>