adds content to cheatsheet

diff --git a/docs/pages/cheatsheet.md b/docs/pages/cheatsheet.md
index 9929e8f60677c3f504ffce432f7464e7e18fe0e8..444b81b5333596dd72f365fa7fbb6a8872f16207 100644 (file)
--- a/docs/pages/cheatsheet.md
+++ b/docs/pages/cheatsheet.md
@@ -266,3 +266,425 @@ description: Get coding faster with this cheatsheet. It contains CSS classes, ac
 
 ## Breakpoints and Media Queries
 
+<div class="row">
+  <div class="columns">
+
+    <h4>Breakpoints</h4>
+    
+    <p></p>
+    
+    <table>
+      <thead>
+        <tr>
+          <th width="550">Class</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>`@media screen and (max-width: 39.9375em) {}`</td>
+          <td>Styles in this media query apply to the small breakpoint only.</td>
+        </tr>
+        <tr>
+          <td>`@media screen and (min-width: 40em) {}`</td>
+          <td>Styles in this media query apply to the medium breakpoint and larger.</td>
+        </tr>
+        <tr>
+          <td>`@media screen and (min-width: 40em) and (max-width: 63.9375em) {}`</td>
+          <td>Styles in this media query apply to the medium breakpoint only.</td>
+        </tr>
+        <tr>
+          <td>`@media screen and (min-width: 64em) {}`</td>
+          <td>Styles in this media query apply to the large breakpoint and larger.</td>
+        </tr>
+        <tr>
+          <td>`@media screen and (min-width: 64em) and (max-width: 74.9375em) {}`</td>
+          <td>Styles in this media query apply to the large breakpoint only.</td>
+        </tr>
+      </tbody>
+    </table>
+
+  </div>
+</div>
+<div class="row column">
+
+  <h4>Colors</h4>
+  
+  <p>Many components can colored with color classes: primary (default), secondary, alert, success, and warning.</p>
+  
+  <div class="row small-up-1 medium-up-3 large-up-5">
+    <div class="column">
+      <div class="docs-color-block">
+        <div class="docs-color-block-primary"></div>
+        <p>Primary</p>
+        <p>#2199e8</p>
+      </div>
+    </div>
+    <div class="column">
+      <div class="docs-color-block">
+        <div class="docs-color-block-secondary"></div>
+        <p>Secondary</p>
+        <p>#777</p>
+      </div>
+    </div>
+    <div class="column">
+      <div class="docs-color-block">
+        <div class="docs-color-block-success"></div>
+        <p>Success</p>
+        <p>#3adb76</p>
+      </div>
+    </div>
+    <div class="column">
+      <div class="docs-color-block">
+        <div class="docs-color-block-warning"></div>
+        <p>Warning</p>
+        <p>#ffae00</p>
+      </div>
+    </div>
+    <div class="column">
+      <div class="docs-color-block">
+        <div class="docs-color-block-alert"></div>
+        <p>Alert</p>
+        <p>#ec5840</p>
+      </div>
+    </div>
+    <div class="column">
+      <div class="docs-color-block">
+        <div class="docs-color-block-white"></div>
+        <p>White</p>
+        <p>#fefefe</p>
+      </div>
+    </div>
+    <div class="column">
+      <div class="docs-color-block">
+        <div class="docs-color-block-light-gray"></div>
+        <p>Light Gray</p>
+        <p>#e6e6e6</p>
+      </div>
+    </div>
+    <div class="column">
+      <div class="docs-color-block">
+        <div class="docs-color-block-medium-gray"></div>
+        <p>Medium Gray</p>
+        <p>#cacaca</p>
+      </div>
+    </div>
+    <div class="column">
+      <div class="docs-color-block">
+        <div class="docs-color-block-dark-gray"></div>
+        <p>Dark Gray</p>
+        <p>#8a8a8a</p>
+      </div>
+    </div>
+    <div class="column">
+      <div class="docs-color-block">
+        <div class="docs-color-block-black"></div>
+        <p>Black</p>
+        <p>#0a0a0a</p>
+      </div>
+    </div>
+  </div>
+
+</div>
+
+---
+
+<div class="row column">
+
+  <h4>Float Classes</h4>
+  
+  <p>Foundation includes a handful of helpful float classes to add common positioning behaviors to elements.</p>
+
+  <table>
+    <thead>
+      <tr>
+        <th width="150">Class</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>`.float-left`</td>
+        <td>Floats an element to the left.</td>
+      </tr>
+      <tr>
+        <td>`.float-right`</td>
+        <td>Floats an element to the right.</td>
+      </tr>
+      <tr>
+        <td>`.clearfix`</td>
+        <td>Clear floats, add to the parent element of a floated element.</td>
+      </tr>
+      <tr>
+        <td>`.float-center`</td>
+        <td>Not a float but it does help center elements horizontally. This will only work on elements with an absolute width, not a percentage or auto width.</td>
+      </tr>
+    </tbody>
+  </table>
+
+</div>
+
+<div class="row column">
+  <h4>Visibility Classes</h4>
+    
+  <p>Visibility classes let you show or hide elements based on screen size or device orientation.</p>
+</div>
+
+<div class="row">
+  <div class="medium-6 columns">
+    
+    <table>
+      <thead>
+        <tr>
+          <th width="150">Class</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>`.hide`</td>
+          <td>Hides element on all screen sizes. Applies CSS: `display: none;`</td>
+        </tr>
+        <tr>
+          <td>`.invisible`</td>
+          <td>Visually hides element on all screen sizes but the element still takes up space. Applies CSS: `visibility: hidden;`</td>
+        </tr>
+        <tr>
+          <td>`.show-for-small-only`</td>
+          <td>Shows element on small breakpoint only.</td>
+        </tr>
+        <tr>
+          <td>`.show-for-small`</td>
+          <td>Shows element on small breakpoint and larger.</td>
+        </tr>
+        <tr>
+          <td>`.show-for-medium-only`</td>
+          <td>Shows element on medium breakpoint only.</td>
+        </tr>
+        <tr>
+          <td>`.show-for-medium`</td>
+          <td>Shows element on medium breakpoint and larger.</td>
+        </tr>
+        <tr>
+          <td>`.show-for-large-only`</td>
+          <td>Shows element on large breakpoint only.</td>
+        </tr>
+        <tr>
+          <td>`.show-for-large`</td>
+          <td>Shows element on medium breakpoint and larger.</td>
+        </tr>
+      </tbody>
+    </table>
+
+  </div>
+  <div class="medium-6 columns">
+    
+    <table>
+      <thead>
+        <tr>
+          <th width="150">Class</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>`.hide-for-small-only`</td>
+          <td>Hides element on small breakpoint only.</td>
+        </tr>
+        <tr>
+          <td>`.hide-for-small`</td>
+          <td>Hides element on small breakpoint and larger.</td>
+        </tr>
+        <tr>
+          <td>`.hide-for-medium-only`</td>
+          <td>Hides element on medium breakpoint only.</td>
+        </tr>
+        <tr>
+          <td>`.hide-for-medium`</td>
+          <td>Hides element on medium breakpoint and larger.</td>
+        </tr>
+        <tr>
+          <td>`.hide-for-large-only`</td>
+          <td>Hides element on large breakpoint only.</td>
+        </tr>
+        <tr>
+          <td>`.hide-for-large`</td>
+          <td>Hides element on medium breakpoint and larger.</td>
+        </tr>
+        <tr>
+          <td>`.show-for-landscape`</td>
+          <td>Shows element on the landscape orientation only.</td>
+        </tr>
+        <tr>
+          <td>`.show-for-portrait`</td>
+          <td>Shows element on the portrait orientation only.</td>
+        </tr>
+        <tr>
+          <td>`.show-for-sr`</td>
+          <td>Visually hides and element while still allowing assistive technology (screen reader) to read it.</td>
+        </tr>
+        <tr>
+          <td>`aria-hidden="true"`</td>
+          <td>Hides text from assistive technology (screen reader) while still keeping it visible.</td>
+        </tr>
+        <tr>
+          <td>`.show-on-focus`</td>
+          <td>Hide an element, except when it has focus. Adding tabindex="0" to the target element makes it focusable.</td>
+        </tr>
+      </tbody>
+    </table>
+
+  </div>
+</div>
+
+---
+
+<div class="row">
+  <div class="medium-6 columns">
+
+    <h4>Buttons</h4>
+    
+    <p>You can attach classes to `<a>` tags and `<button>` tags to make them look like buttons.</p>
+
+    <p>`.button` creates a default button. Add any of the below modifier classes to change the button's default appearance. Sizing and color classes can be combined.</p>
+    
+    <table>
+      <thead>
+        <tr>
+          <th width="150">Class</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>`.tiny`</td>
+          <td>Creates a tiny button: Reduces button padding and font size.</td>
+        </tr>
+        <tr>
+          <td>`.small`</td>
+          <td>Creates a small button: Reduces button padding and font size.</td>
+        </tr>
+        <tr>
+          <td>`.large`</td>
+          <td>Creates a large button: Increases button padding and font size.</td>
+        </tr>
+        <tr>
+          <td>`.expanded`</td>
+          <td>Button will fill it's parent container 100% width.</td>
+        </tr>
+      </tbody>
+    </table>
+
+  </div>
+  <div class="medium-6 columns">
+
+    <table>
+      <thead>
+        <tr>
+          <th width="150">Class</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>`.secondary`</td>
+          <td>Applies secondary background color.</td>
+        </tr>
+        <tr>
+          <td>`.success`</td>
+          <td>Applies secondary background color.</td>
+        </tr>
+        <tr>
+          <td>`.alert`</td>
+          <td>Applies secondary background color.</td>
+        </tr>
+        <tr>
+          <td>`.warning`</td>
+          <td>Applies secondary background color.</td>
+        </tr>
+        <tr>
+          <td>`.disabled`</td>
+          <td>Fades the button color and prevent the button from being clickable.</td>
+        </tr>
+        <tr>
+          <td>`.hollow`</td>
+          <td>Applies a transparent background and changes the font color to match button color.</td>
+        </tr>
+        <tr>
+          <td>`.dropdown`</td>
+          <td>Adds a dropdown arrow to your button.</td>
+        </tr>
+        <tr>
+          <td>`.close-button`</td>
+          <td>Add to the `<button>` tag to create a simple close button. Standard content is the &times; symbol.</td>
+        </tr>
+      </tbody>
+    </table>
+
+  </div>
+</div>
+
+---
+
+<div class="row column">
+
+  <table>
+    <thead>
+      <tr>
+        <th width="150">Class</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>`.button-group`</td>
+        <td>Container class for grouping buttons that have related action items. This will contain `<a class="button">`'s.</td>
+      </tr>
+      <tr>
+        <td>`.expanded`</td>
+        <td>Button group will fill the parent container 100% and each button will be equal width.</td>
+      </tr>
+      <tr>
+        <td>`.stacked`</td>
+        <td>Button group will stack vertically and each button will be 100% width.</td>
+      </tr>
+      <tr>
+        <td>`.stacked-for-small`</td>
+        <td>Button group will stack vertically and each button will be 100% width on the small breakpoint only.</td>
+      </tr>
+      <tr>
+        <td>`.stacked-for-medium`</td>
+        <td>Button group will stack vertically and each button will be 100% width on the medium and small breakpoint.</td>
+      </tr>
+      <tr>
+        <td>`.arrow-only`</td>
+        <td>Use on an `<a>` along with `.button` and `.dropdown` classes to create aSplit Button.</td>
+      </tr>
+    </tbody>
+  </table>
+
+</div>
+
+---
+
+<div class="row column">
+  <h4>Buttons</h4>
+    
+  <p>You can attach classes to `<a>` tags and `<button>` tags to make them look like buttons.</p>
+</div>
+
+<div class="row">
+  <div class="medium-6 columns">
+
+    <h4>Buttons</h4>
+    
+    <p>You can attach classes to `<a>` tags and `<button>` tags to make them look like buttons.</p>
+
+    Header  | Default | Large and up
+    --------|---------|-------------
+    `<h1>`  | 24px    | 48px
+    `<h2>`  | 20px    | 40px
+    `<h3>`  | 19px    | 31px
+    `<h4>`  | 18px    | 25px
+    `<h5>`  | 17px    | 20px
+    `<h6>`  | 16px    | 16px
\ No newline at end of file

diff --git a/docs/pages/typography-base.md b/docs/pages/typography-base.md
index 2d5f90ed7e4c061b59cc5ee4c21acc3072ddb747..00dc75c76a91b8baf84b6109979e16699293f91c 100644 (file)
--- a/docs/pages/typography-base.md
+++ b/docs/pages/typography-base.md
@@ -69,7 +69,7 @@ Header  | Default | Large and up
 By inserting a `<small>` element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.
 
 ```html_example
-<h3>Foundation for Sites <small>Version 6.0.4</small></h3>
+<h3>Foundation for Sites <small>Version 6.2.3</small></h3>
 ```
 
 ---

diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md
index a21eb0b0f0bb1e1c6209e806177918d09a2b391d..7937344fbdd5e4e9aea2a99127788b908f6c1002 100644 (file)
--- a/docs/pages/visibility.md
+++ b/docs/pages/visibility.md
@@ -115,7 +115,7 @@ To hide text from assistive technology, while still keeping it visible, add the
 
 If your site has a lot of navigation, a screen reader will have to read through the entire navigation to get to your site's content. To remedy this, you can add a *skip link* at the very top of your page, which will send the user farther down the page, past the navigation when clicked on.
 
-Use the class `.show-on-focus` to hide an element, except when it has focus. Adding tabindex="0" to the target element makes if focusable.
+Use the class `.show-on-focus` to hide an element, except when it has focus. Adding tabindex="0" to the target element makes it focusable.
 
 ```html_example
 <p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>