From: Nicolas Coden <nicolas@ncoden.fr>
Date: Thu, 18 Jan 2018 21:14:10 +0000 (+0100)
Subject: docs: show base classes before their modifiers in grids and callout
X-Git-Tag: v6.6.0~53^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=caa6ba33255e149f46ba9efcf8bd4958e6514d3a;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

docs: show base classes before their modifiers in grids and callout

See: https://github.com/zurb/foundation-sites/issues/10843#issuecomment-358097432
---

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index b32c71ff5..078de2b6d 100644
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -56,25 +56,25 @@ Callouts can be colored using the `.secondary`, `.primary`, `.success`, `.warnin
   <a href="#">It's dangerous to go alone, take this.</a>
 </div>
 
-<div class="primary callout">
+<div class="callout primary">
   <h5>This is a primary callout</h5>
   <p>It has an easy to override visual style, and is appropriately subdued.</p>
   <a href="#">It's dangerous to go alone, take this.</a>
 </div>
 
-<div class="success callout">
+<div class="callout success">
   <h5>This is a success callout</h5>
   <p>It has an easy to override visual style, and is appropriately subdued.</p>
   <a href="#">It's dangerous to go alone, take this.</a>
 </div>
 
-<div class="warning callout">
+<div class="callout warning">
   <h5>This is a warning callout</h5>
   <p>It has an easy to override visual style, and is appropriately subdued.</p>
   <a href="#">It's dangerous to go alone, take this.</a>
 </div>
 
-<div class="alert callout">
+<div class="callout alert">
   <h5>This is an alert callout</h5>
   <p>It has an easy to override visual style, and is appropriately subdued.</p>
   <a href="#">It's dangerous to go alone, take this.</a>
@@ -111,7 +111,7 @@ Callouts can be sized using the `.small` and `.large` classes. These will affect
 Pair the callout with the [close button](close-button.html) component and `data-closable` attribute to create a dismissable alert box.
 
 <a class="" data-open-video="4:47"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
-<div class="primary callout">
+<div class="callout primary">
   <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>
   <p>When using the <code>data-closable</code> attribute, you can optionally add <a href="http://foundation.zurb.com/sites/docs/motion-ui.html">Motion UI</a> classes to the attribute to change the closing animation. If no class is added, the plugin defaults to jQuery's <code>.fadeOut()</code> function.</p>
 </div>
@@ -121,7 +121,7 @@ Pair the callout with the [close button](close-button.html) component and `data-
 </div>
 
 ```html_example
-<div class="alert callout" data-closable>
+<div class="callout alert" data-closable>
   <h5>This is Important!</h5>
   <p>But when you're done reading it, click the close button in the corner to dismiss this alert.</p>
   <p>I'm using the default <code>data-closable</code> parameters, and simply fade out.</p>
@@ -129,7 +129,7 @@ Pair the callout with the [close button](close-button.html) component and `data-
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
-<div class="success callout" data-closable="slide-out-right">
+<div class="callout success" data-closable="slide-out-right">
   <h5>This a friendly message.</h5>
   <p>And when you're done with me, I can be closed using a Motion UI animation.</p>
   <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index 97bae7b3f..1b2ff2352 100644
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -18,7 +18,7 @@ The flex grid works very similarly to the standard float grid, but includes a nu
 
 The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View flexbox browser support.](http://caniuse.com/#feat=flexbox)) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.
 
-<div class="warning callout">
+<div class="callout warning">
   <p>In Firefox 43+, images in flex columns may overflow their container. To fix this, add a defined <code>width</code> to any images inside a flex column, or use <code>width: 100%</code> for full-bleed images.</p>
 </div>
 
@@ -30,7 +30,7 @@ The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, an
   <a class="" data-open-video="2:45"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </div>
 
-<div class="alert callout">
+<div class="callout alert">
   **From Foundation v6.4, the Flex Grid is disabled by default**, replaced by the new [XY Grid](/xy-grid.html). Unless you need to support IE 10, it is recommended to use the XY Grid.
 </div>
 
@@ -49,11 +49,11 @@ You can manually generate the Flex Grid with:
 @include foundation-flex-grid;
 ```
 
-<div class="primary callout">
+<div class="callout primary">
   <p>The flex grid uses the same settings variables as the float grid to adjust gutter size, column count, and so on. Refer to the <a href="grid.html#sass-variables">Sass variable reference</a> for the default grid to see how the flex grid can be customized.</p>
 </div>
 
-<div class="warning callout">
+<div class="callout warning">
   <p>The standard grid and flex grid use some of the same classes, namely <code>.row</code> and <code>.column</code>, and don't play nice together. If you want to use both in the same project, we recommend using the Sass mixins for each grid, instead of the default CSS.</p>
 </div>
 
@@ -73,12 +73,12 @@ The structure of the flex grid is identical to that of the float grid. Rows use
 
 ```html_example
 <div class="row">
-  <div class="small-6 columns">6 columns</div>
-  <div class="small-6 columns">6 columns</div>
+  <div class="columns small-6">6 columns</div>
+  <div class="columns small-6">6 columns</div>
 </div>
 <div class="row">
-  <div class="medium-6 large-4 columns">12/6/4 columns</div>
-  <div class="medium-6 large-8 columns">12/6/8 columns</div>
+  <div class="columns medium-6 large-4">12/6/4 columns</div>
+  <div class="columns medium-6 large-8">12/6/8 columns</div>
 </div>
 ```
 
@@ -98,7 +98,7 @@ If no sizing class is added to the column, it will simply expand to fill the lef
 
 ```html_example
 <div class="row">
-  <div class="small-4 columns">4 columns</div>
+  <div class="columns small-4">4 columns</div>
   <div class="columns">Whatever's left!</div>
 </div>
 ```
@@ -117,7 +117,7 @@ Multiple expanding columns will share the leftover space equally.
 
 ```html_example
 <div class="row">
-  <div class="small-4 columns">4 columns</div>
+  <div class="columns small-4">4 columns</div>
   <div class="columns">Whatever's left!</div>
   <div class="columns">Whatever's left!</div>
 </div>
@@ -137,7 +137,7 @@ A column can also be made to *shrink*, by adding the `.shrink` class. This means
 
 ```html_example
 <div class="row">
-  <div class="shrink columns">Shrink!</div>
+  <div class="columns shrink">Shrink!</div>
   <div class="columns">Expand!</div>
 </div>
 ```
@@ -156,12 +156,12 @@ To switch back to the expand behavior from a percentage or shrink behavior, use
 
 ```html_example
 <div class="row">
-  <div class="small-12 large-expand columns">One</div>
-  <div class="small-12 large-expand columns">Two</div>
-  <div class="small-12 large-expand columns">Three</div>
-  <div class="small-12 large-expand columns">Four</div>
-  <div class="small-12 large-expand columns">Five</div>
-  <div class="small-12 large-expand columns">Six</div>
+  <div class="columns small-12 large-expand">One</div>
+  <div class="columns small-12 large-expand">Two</div>
+  <div class="columns small-12 large-expand">Three</div>
+  <div class="columns small-12 large-expand">Four</div>
+  <div class="columns small-12 large-expand">Five</div>
+  <div class="columns small-12 large-expand">Six</div>
 </div>
 ```
 
@@ -299,7 +299,7 @@ Similar alignment classes can also be applied to individual columns, which use t
 
 <a class="" data-open-video="13:32"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 
-<div class="warning callout">
+<div class="callout warning">
   <p>In Foundation 6.2, we introduced the <code>.align-self-&ast;</code> classes, which replace the old method of using <code>.align-&ast;</code> classes on columns. The old classes have been removed completely in Foundation 6.3.</p>
 </div>
 
@@ -333,10 +333,10 @@ The `.is-collapse-child` class removes negative margins from nested row under co
 
 ```html
 <div class="row small-collapse medium-uncollapse">
-  <div class="small-6 columns">
+  <div class="columns small-6">
     Removes gutter at small media query and adds at medium.
   </div>
-  <div class="small-6 columns">
+  <div class="columns small-6">
     Removes gutter at small media query and adds at medium.
   </div>
 </div>
@@ -345,14 +345,14 @@ The `.is-collapse-child` class removes negative margins from nested row under co
 <p class="lead">Scale the browser down to a medium size to see the difference.</p>
 
 <div class="row medium-uncollapse large-collapse">
-  <div class="small-6 columns">
+  <div class="columns small-6">
     <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">On a large screen, I have no gutters!</p>
     </div>
   </div>
-  <div class="small-6 columns">
+  <div class="columns small-6">
     <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>
@@ -373,8 +373,8 @@ Offsets work identically to the float grid, by applying `margin-left` to a colum
 
 ```html_example
 <div class="row">
-  <div class="small-4 large-offset-2 columns">Offset 2 on large</div>
-  <div class="small-4 columns">4 columns</div>
+  <div class="columns small-4 large-offset-2">Offset 2 on large</div>
+  <div class="columns small-4">4 columns</div>
 </div>
 ```
 
@@ -386,7 +386,7 @@ To define column widths at the row-level, instead of the individual column level
 
 <a class="" data-open-video="27:19"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 
-<div class="primary callout">
+<div class="callout primary">
   <p>A block grid row has the property <code>align-items: stretch</code> by default, meaning the columns in each row are equal height. To change this, change the <code>align-items</code> property of the row, or use one of the <a href="flexbox.html#vertical-alignment">vertical alignment flexbox classes</a>.</p>
 </div>
 
diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index bc2f5d988..0b4533093 100644
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -17,7 +17,7 @@ tags:
 
 ## Importing
 
-<div class="alert callout">
+<div class=" calloutalert">
   **From Foundation v6.4, the Float Grid is disabled by default**, replaced by the new [XY Grid](/xy-grid.html). Unless you need to support IE 10, it is recommended to use the XY Grid.
 </div>
 
@@ -36,7 +36,7 @@ Start by adding an element with a class of `.row`. This will create a horizontal
   <a class="" data-open-video="1:07"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
-<div class="primary callout">
+<div class=" calloutprimary">
   <p>By default `.column` has an alias `.columns` (see the <a href="#sass-reference">`$grid-column-alias` option</a>) &mdash;the only difference is grammar.</p>
   <p>Disabling the alias can reduce the Foundation CSS file size from 3 to 5%. It is recommended if the alias is not used.</p>
 </div>
@@ -47,68 +47,68 @@ Start by adding an element with a class of `.row`. This will create a horizontal
 
 ```html
 <div class="row">
-  <div class="small-2 large-4 columns"><!-- ... --></div>
-  <div class="small-4 large-4 columns"><!-- ... --></div>
-  <div class="small-6 large-4 columns"><!-- ... --></div>
+  <div class="columns small-2 large-4"><!-- ... --></div>
+  <div class="columns small-4 large-4"><!-- ... --></div>
+  <div class="columns small-6 large-4"><!-- ... --></div>
 </div>
 <div class="row">
-  <div class="large-3 columns"><!-- ... --></div>
-  <div class="large-6 columns"><!-- ... --></div>
-  <div class="large-3 columns"><!-- ... --></div>
+  <div class="columns large-3"><!-- ... --></div>
+  <div class="columns large-6"><!-- ... --></div>
+  <div class="columns large-3"><!-- ... --></div>
 </div>
 <div class="row">
-  <div class="small-6 large-2 columns"><!-- ... --></div>
-  <div class="small-6 large-8 columns"><!-- ... --></div>
-  <div class="small-12 large-2 columns"><!-- ... --></div>
+  <div class="columns small-6 large-2"><!-- ... --></div>
+  <div class="columns small-6 large-8"><!-- ... --></div>
+  <div class="columns small-12 large-2"><!-- ... --></div>
 </div>
 <div class="row">
-  <div class="small-3 columns"><!-- ... --></div>
-  <div class="small-9 columns"><!-- ... --></div>
+  <div class="columns small-3"><!-- ... --></div>
+  <div class="columns small-9"><!-- ... --></div>
 </div>
 <div class="row">
-  <div class="large-4 columns"><!-- ... --></div>
-  <div class="large-8 columns"><!-- ... --></div>
+  <div class="columns large-4"><!-- ... --></div>
+  <div class="columns large-8"><!-- ... --></div>
 </div>
 <div class="row">
-  <div class="small-6 large-5 columns"><!-- ... --></div>
-  <div class="small-6 large-7 columns"><!-- ... --></div>
+  <div class="columns small-6 large-5"><!-- ... --></div>
+  <div class="columns small-6 large-7"><!-- ... --></div>
 </div>
 <div class="row">
-  <div class="large-6 columns"><!-- ... --></div>
-  <div class="large-6 columns"><!-- ... --></div>
+  <div class="columns large-6"><!-- ... --></div>
+  <div class="columns large-6"><!-- ... --></div>
 </div>
 ```
 
 <div class="row display">
-  <div class="small-2 large-4 columns"><span class="hide-for-large">2</span><span class="show-for-large">4</span></div>
-  <div class="small-4 large-4 columns">4</div>
-  <div class="small-6 large-4 columns"><span class="hide-for-large">6</span><span class="show-for-large">4</span></div>
+  <div class="columns small-2 large-4"><span class="hide-for-large">2</span><span class="show-for-large">4</span></div>
+  <div class="columns small-4 large-4">4</div>
+  <div class="columns small-6 large-4"><span class="hide-for-large">6</span><span class="show-for-large">4</span></div>
 </div>
 <div class="row display">
-  <div class="large-3 columns"><span class="hide-for-large">full</span><span class="show-for-large">3</span></div>
-  <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
-  <div class="large-3 columns"><span class="hide-for-large">full</span><span class="show-for-large">3</span></div>
+  <div class="columns large-3"><span class="hide-for-large">full</span><span class="show-for-large">3</span></div>
+  <div class="columns large-6"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
+  <div class="columns large-3"><span class="hide-for-large">full</span><span class="show-for-large">3</span></div>
 </div>
 <div class="row display">
-  <div class="small-6 large-2 columns"><span class="hide-for-large">6</span><span class="show-for-large">2</span></div>
-  <div class="small-6 large-8 columns"><span class="hide-for-large">6</span><span class="show-for-large">8</span></div>
-  <div class="small-12 large-2 columns"><span class="hide-for-large">full</span><span class="show-for-large">2</span></div>
+  <div class="columns small-6 large-2"><span class="hide-for-large">6</span><span class="show-for-large">2</span></div>
+  <div class="columns small-6 large-8"><span class="hide-for-large">6</span><span class="show-for-large">8</span></div>
+  <div class="columns small-12 large-2"><span class="hide-for-large">full</span><span class="show-for-large">2</span></div>
 </div>
 <div class="row display">
-  <div class="small-3 columns">3</div>
-  <div class="small-9 columns">9</div>
+  <div class="columns small-3">3</div>
+  <div class="columns small-9">9</div>
 </div>
 <div class="row display">
-  <div class="large-4 columns"><span class="hide-for-large">full</span><span class="show-for-large">4</span></div>
-  <div class="large-8 columns"><span class="hide-for-large">full</span><span class="show-for-large">8</span></div>
+  <div class="columns large-4"><span class="hide-for-large">full</span><span class="show-for-large">4</span></div>
+  <div class="columns large-8"><span class="hide-for-large">full</span><span class="show-for-large">8</span></div>
 </div>
 <div class="row display">
-  <div class="small-6 large-5 columns"><span class="hide-for-large">6</span><span class="show-for-large">5</span></div>
-  <div class="small-6 large-7 columns"><span class="hide-for-large">6</span><span class="show-for-large">7</span></div>
+  <div class="columns small-6 large-5"><span class="hide-for-large">6</span><span class="show-for-large">5</span></div>
+  <div class="columns small-6 large-7"><span class="hide-for-large">6</span><span class="show-for-large">7</span></div>
 </div>
 <div class="row display">
-  <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
-  <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
+  <div class="columns large-6"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
+  <div class="columns large-6"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
 </div>
 
 ---
@@ -127,22 +127,22 @@ Small grids expand to large screens easier than large grids cram into small scre
 
 ```html
 <div class="row">
-  <div class="small-2 columns">2 <span class="hide-for-small-only">columns</span></div>
-  <div class="small-10 columns">10 columns</div>
+  <div class="columns small-2">2 <span class=hide-for-small-only</span></div>
+  <div class="columns small-10">10</div>
 </div>
 <div class="row">
-  <div class="small-3 columns">3 columns</div>
-  <div class="small-9 columns">9 columns</div>
+  <div class="columns small-3">3</div>
+  <div class="columns small-9">9</div>
 </div>
 ```
 
 <div class="row display">
-  <div class="small-2 columns">2 columns</div>
-  <div class="small-10 columns">10 columns</div>
+  <div class="columns small-2">2</div>
+  <div class="columns small-10">10</div>
 </div>
 <div class="row display">
-  <div class="small-3 columns">3 columns</div>
-  <div class="small-9 columns">9 columns</div>
+  <div class="columns small-3">3</div>
+  <div class="columns small-9">9</div>
 </div>
 
 ---
@@ -161,22 +161,22 @@ Medium sized screens will inherit styles from small, unless you specify a differ
 
 ```html
 <div class="row">
-  <div class="medium-2 columns">2 columns</div>
-  <div class="medium-10 columns">10 columns</div>
+  <div class="columns medium-2">2</div>
+  <div class="columns medium-10">10</div>
 </div>
 <div class="row">
-  <div class="medium-3 columns">3 columns</div>
-  <div class="medium-9 columns">9 columns</div>
+  <div class="columns medium-3">3</div>
+  <div class="columns medium-9">9</div>
 </div>
 ```
 
 <div class="row display">
-  <div class="medium-2 columns">2 columns</div>
-  <div class="medium-10 columns">10 columns</div>
+  <div class="columns medium-2">2</div>
+  <div class="columns medium-10">10</div>
 </div>
 <div class="row display">
-  <div class="medium-3 columns">3 columns</div>
-  <div class="medium-9 columns">9 columns</div>
+  <div class="columns medium-3">3</div>
+  <div class="columns medium-9">9</div>
 </div>
 
 ---
@@ -187,7 +187,7 @@ Medium sized screens will inherit styles from small, unless you specify a differ
 
 If you have just a single column, you can save some markup by combining the `.row` and `.column` classes together on the same element. You can still nest more grids inside this container like usual.
 
-<div class="warning callout">
+<div class=" calloutwarning">
   <p>Column rows can use sizing classes like <code>.small-8</code>, but only when used as a top-level container&mdash;not when nested inside another row.</p>
 </div>
 
@@ -240,34 +240,34 @@ You can nest the grids indefinitely, though at a certain point it will get absur
 
 ```html
 <div class="row">
-  <div class="small-8 columns">8
+  <div class="columns small-8">8
     <div class="row">
-      <div class="small-8 columns">8 Nested
+      <div class="columns small-8">8 Nested
         <div class="row">
-          <div class="small-8 columns">8 Nested Again</div>
-          <div class="small-4 columns">4</div>
+          <div class="columns small-8">8 Nested Again</div>
+          <div class="columns small-4">4</div>
         </div>
       </div>
-      <div class="small-4 columns">4</div>
+      <div class="columns small-4">4</div>
     </div>
   </div>
-  <div class="small-4 columns">4</div>
+  <div class="columns small-4">4</div>
 </div>
 ```
 
 <div class="row display">
-  <div class="small-8 columns">8
+  <div class="columns small-8">8
     <div class="row">
-      <div class="small-8 columns">8 Nested
+      <div class="columns small-8">8 Nested
         <div class="row">
-          <div class="small-8 columns">8 Nested Again</div>
-          <div class="small-4 columns">4</div>
+          <div class="columns small-8">8 Nested Again</div>
+          <div class="columns small-4">4</div>
         </div>
       </div>
-      <div class="small-4 columns">4</div>
+      <div class="columns small-4">4</div>
     </div>
   </div>
-  <div class="small-4 columns">4</div>
+  <div class="columns small-4">4</div>
 </div>
 
 ---
@@ -286,38 +286,38 @@ Move blocks up to 11 columns to the right by using classes like `.large-offset-1
 
 ```html
 <div class="row">
-  <div class="large-1 columns">1</div>
-  <div class="large-11 columns">11</div>
+  <div class="columns large-1">1</div>
+  <div class="columns large-11">11</div>
 </div>
 <div class="row">
-  <div class="large-1 columns">1</div>
-  <div class="large-10 large-offset-1 columns">10, offset 1</div>
+  <div class="columns large-1">1</div>
+  <div class="columns large-10 large-offset-1">10, offset 1</div>
 </div>
 <div class="row">
-  <div class="large-1 columns">1</div>
-  <div class="large-9 large-offset-2 columns">9, offset 2</div>
+  <div class="columns large-1">1</div>
+  <div class="columns large-9 large-offset-2">9, offset 2</div>
 </div>
 <div class="row">
-  <div class="large-1 columns">1</div>
-  <div class="large-8 large-offset-3 columns">8, offset 3</div>
+  <div class="columns large-1">1</div>
+  <div class="columns large-8 large-offset-3">8, offset 3</div>
 </div>
 ```
 
 <div class="row display">
-  <div class="large-1 columns">1</div>
-  <div class="large-11 columns">11</div>
+  <div class="columns large-1">1</div>
+  <div class="columns large-11">11</div>
 </div>
 <div class="row display">
-  <div class="large-1 columns">1</div>
-  <div class="large-10 large-offset-1 columns">10, offset 1</div>
+  <div class="columns large-1">1</div>
+  <div class="columns large-10 large-offset-1">10, offset 1</div>
 </div>
 <div class="row display">
-  <div class="large-1 columns">1</div>
-  <div class="large-9 large-offset-2 columns">9, offset 2</div>
+  <div class="columns large-1">1</div>
+  <div class="columns large-9 large-offset-2">9, offset 2</div>
 </div>
 <div class="row display">
-  <div class="large-1 columns">1</div>
-  <div class="large-8 large-offset-3 columns">8, offset 3</div>
+  <div class="columns large-1">1</div>
+  <div class="columns large-8 large-offset-3">8, offset 3</div>
 </div>
 
 ---
@@ -332,26 +332,26 @@ In order to work around browsers' different rounding behaviors, Foundation will
 
 ```html
 <div class="row">
-  <div class="medium-3 columns">3</div>
-  <div class="medium-3 columns">3</div>
-  <div class="medium-3 columns">3</div>
+  <div class="columns medium-3">3</div>
+  <div class="columns medium-3">3</div>
+  <div class="columns medium-3">3</div>
 </div>
 <div class="row">
-  <div class="medium-3 columns">3</div>
-  <div class="medium-3 columns">3</div>
-  <div class="medium-3 columns end">3 end</div>
+  <div class="columns medium-3">3</div>
+  <div class="columns medium-3">3</div>
+  <div class="columns medium-3 end">3 end</div>
 </div>
 ```
 
 <div class="row display-end">
-  <div class="medium-3 columns">3</div>
-  <div class="medium-3 columns">3</div>
-  <div class="medium-3 columns">3</div>
+  <div class="columns medium-3">3</div>
+  <div class="columns medium-3">3</div>
+  <div class="columns medium-3">3</div>
 </div>
 <div class="row display-end">
-  <div class="medium-3 columns">3</div>
-  <div class="medium-3 columns">3</div>
-  <div class="medium-3 columns end">3 end</div>
+  <div class="columns medium-3">3</div>
+  <div class="columns medium-3">3</div>
+  <div class="columns medium-3 end">3 end</div>
 </div>
 
 ---
@@ -408,10 +408,10 @@ There are times when you won't want each media query to be collapsed or uncollap
 
 ```html
 <div class="row medium-uncollapse large-collapse">
-  <div class="small-6 columns">
+  <div class="columns small-6">
     Removes gutter at large media query
   </div>
-  <div class="small-6 columns">
+  <div class="columns small-6">
     Removes gutter at large media query
   </div>
 </div>
@@ -420,14 +420,14 @@ There are times when you won't want each media query to be collapsed or uncollap
 <p class="lead">Scale the browser down to a medium size to see the difference.</p>
 
 <div class="row medium-uncollapse large-collapse">
-  <div class="small-6 columns">
+  <div class="columns small-6">
     <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">On a large screen, I have no gutters!</p>
     </div>
   </div>
-  <div class="small-6 columns">
+  <div class="columns small-6">
     <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>
@@ -452,30 +452,30 @@ Center your columns by adding a class of `.small-centered` to your column. Large
 
 ```html
 <div class="row">
-  <div class="small-3 small-centered columns">3 centered</div>
+  <div class="columns small-3 small-centered">3 centered</div>
 </div>
 <div class="row">
-  <div class="small-6 large-centered columns">6 centered</div>
+  <div class="columns small-6 large-centered">6 centered</div>
 </div>
 <div class="row">
-  <div class="small-9 small-centered large-uncentered columns">9 centered</div>
+  <div class="columns small-9 small-centered large-uncentered">9 centered</div>
 </div>
 <div class="row">
-  <div class="small-11 small-centered columns">11 centered</div>
+  <div class="columns small-11 small-centered">11 centered</div>
 </div>
 ```
 
 <div class="row display">
-  <div class="small-3 small-centered columns">3 centered</div>
+  <div class="columns small-3 small-centered">3 centered</div>
 </div>
 <div class="row display">
-  <div class="small-6 large-centered columns">6 centered, large</div>
+  <div class="columns small-6 large-centered">6 centered, large</div>
 </div>
 <div class="row display">
-  <div class="small-9 small-centered large-uncentered columns">9 centered small</div>
+  <div class="columns small-9 small-centered large-uncentered">9 centered small</div>
 </div>
 <div class="row display">
-  <div class="small-11 small-centered columns">11 centered</div>
+  <div class="columns small-11 small-centered">11 centered</div>
 </div>
 
 ---
@@ -494,46 +494,46 @@ Using these source ordering classes, you can shift columns around between our br
 
 ```html
 <div class="row">
-  <div class="small-10 small-push-2 columns">10</div>
-  <div class="small-2 small-pull-10 columns">2, last</div>
+  <div class="columns small-10 small-push-2">10</div>
+  <div class="columns small-2 small-pull-10">2, last</div>
 </div>
 <div class="row">
-  <div class="large-9 large-push-3 columns">9</div>
-  <div class="large-3 large-pull-9 columns">3, last</div>
+  <div class="columns large-9 large-push-3">9</div>
+  <div class="columns large-3 large-pull-9">3, last</div>
 </div>
 <div class="row">
-  <div class="large-8 large-push-4 columns">8</div>
-  <div class="large-4 large-pull-8 columns">4, last</div>
+  <div class="columns large-8 large-push-4">8</div>
+  <div class="columns large-4 large-pull-8">4, last</div>
 </div>
 <div class="row">
-  <div class="small-5 small-push-7 medium-7 medium-push-5 columns">7</div>
-  <div class="small-7 small-pull-5 medium-5 medium-pull-7 columns">5, last</div>
+  <div class="columns small-5 small-push-7 medium-7 medium-push-5">7</div>
+  <div class="columns small-7 small-pull-5 medium-5 medium-pull-7">5, last</div>
 </div>
 <div class="row">
-  <div class="medium-6 medium-push-6 columns">6</div>
-  <div class="medium-6 medium-pull-6 columns">6, last</div>
+  <div class="columns medium-6 medium-push-6">6</div>
+  <div class="columns medium-6 medium-pull-6">6, last</div>
 </div>
 ```
 
 <div class="row display">
-  <div class="small-10 small-push-2 columns">10</div>
-  <div class="small-2 small-pull-10 columns">2, last</div>
+  <div class="columns small-10 small-push-2">10</div>
+  <div class="columns small-2 small-pull-10">2, last</div>
 </div>
 <div class="row display">
-  <div class="large-9 large-push-3 columns">9</div>
-  <div class="large-3 large-pull-9 columns">3, last</div>
+  <div class="columns large-9 large-push-3">9</div>
+  <div class="columns large-3 large-pull-9">3, last</div>
 </div>
 <div class="row display">
-  <div class="large-8 large-push-4 columns">8</div>
-  <div class="large-4 large-pull-8 columns">4, last</div>
+  <div class="columns large-8 large-push-4">8</div>
+  <div class="columns large-4 large-pull-8">4, last</div>
 </div>
 <div class="row display">
-  <div class="small-5 small-push-7 medium-7 medium-push-5 columns">7</div>
-  <div class="small-7 small-pull-5 medium-5 medium-pull-7 columns">5, last</div>
+  <div class="columns small-5 small-push-7 medium-7 medium-push-5">7</div>
+  <div class="columns small-7 small-pull-5 medium-5 medium-pull-7">5, last</div>
 </div>
 <div class="row display">
-  <div class="medium-6 medium-push-6 columns">6</div>
-  <div class="medium-6 medium-pull-6 columns">6, last</div>
+  <div class="columns medium-6 medium-push-6">6</div>
+  <div class="columns medium-6 medium-pull-6">6, last</div>
 </div>
 
 ---
diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
index 077b63957..9cab3f623 100644
--- a/docs/pages/xy-grid.md
+++ b/docs/pages/xy-grid.md
@@ -59,12 +59,12 @@ The structure of XY grid uses `.grid-x`, `.grid-y`, and `.cell` as its base. Wit
   <div class="cell">full width cell</div>
 </div>
 <div class="grid-x">
-  <div class="small-6 cell">6 cells</div>
-  <div class="small-6 cell">6 cells</div>
+  <div class="cell small-6">6 cells</div>
+  <div class="cell small-6">6 cells</div>
 </div>
 <div class="grid-x">
-  <div class="medium-6 large-4 cell">12/6/4 cells</div>
-  <div class="medium-6 large-8 cell">12/6/8 cells</div>
+  <div class="cell medium-6 large-4">12/6/4 cells</div>
+  <div class="cell medium-6 large-8">12/6/8 cells</div>
 </div>
 ```
 
@@ -81,12 +81,12 @@ To define a grid type, simply set `.grid-margin-x` or `.grid-padding-x` on the g
 
 ```html_example
 <div class="grid-x grid-margin-x">
-  <div class="medium-6 large-4 cell">12/6/4 cells</div>
-  <div class="medium-6 large-8 cell">12/6/8 cells</div>
+  <div class="cell medium-6 large-4">12/6/4 cells</div>
+  <div class="cell medium-6 large-8">12/6/8 cells</div>
 </div>
 <div class="grid-x grid-padding-x">
-  <div class="medium-6 large-4 cell">12/6/4 cells</div>
-  <div class="medium-6 large-8 cell">12/6/8 cells</div>
+  <div class="cell medium-6 large-4">12/6/4 cells</div>
+  <div class="cell medium-6 large-8">12/6/8 cells</div>
 </div>
 ```
 ---
@@ -144,8 +144,8 @@ If the class `.auto` or `.[size]-auto` is added to the cell, it will take up the
 
 ```html_example
 <div class="grid-x grid-margin-x">
-  <div class="small-4 cell">4 cells</div>
-  <div class="auto cell">Whatever's left!</div>
+  <div class="cell small-4">4 cells</div>
+  <div class="cell auto">Whatever's left!</div>
 </div>
 ```
 
@@ -155,9 +155,9 @@ Multiple expanding cells will share the leftover space equally.
 
 ```html_example
 <div class="grid-x grid-margin-x">
-  <div class="small-4 cell">4 cells</div>
-  <div class="auto cell">Whatever's left!</div>
-  <div class="auto cell">Whatever's left!</div>
+  <div class="cell small-4">4 cells</div>
+  <div class="cell auto">Whatever's left!</div>
+  <div class="cell auto">Whatever's left!</div>
 </div>
 ```
 
@@ -167,8 +167,8 @@ A cell can also be made to *shrink*, by adding the `.shrink` or `.[size]-shrink`
 
 ```html_example
 <div class="grid-x grid-margin-x">
-  <div class="shrink cell">Shrink!</div>
-  <div class="auto cell">Expand!</div>
+  <div class="cell shrink">Shrink!</div>
+  <div class="cell auto">Expand!</div>
 </div>
 ```
 
@@ -180,12 +180,12 @@ To switch back to the auto behavior from a percentage or shrink behavior, use th
 
 ```html_example
 <div class="grid-x">
-  <div class="large-auto cell">One</div>
-  <div class="large-auto cell">Two</div>
-  <div class="large-auto cell">Three</div>
-  <div class="large-auto cell">Four</div>
-  <div class="large-auto cell">Five</div>
-  <div class="large-auto cell">Six</div>
+  <div class="cell large-auto">One</div>
+  <div class="cell large-auto">Two</div>
+  <div class="cell large-auto">Three</div>
+  <div class="cell large-auto">Four</div>
+  <div class="cell large-auto">Five</div>
+  <div class="cell large-auto">Six</div>
 </div>
 ```
 
@@ -199,10 +199,10 @@ There are times when you won't want each media query to be collapsed. In this ca
 
 ```html_example
 <div class="grid-x grid-margin-x medium-margin-collapse">
-  <div class="small-6 cell">
+  <div class="cell small-6">
     Gutters at small no gutters at medium.
   </div>
-  <div class="small-6 cell">
+  <div class="cell small-6">
     Gutters at small no gutters at medium.
   </div>
 </div>
@@ -216,8 +216,8 @@ Offsets work by applying `margin-left` (or `margin-top` for a vertical grid) to
 
 ```html_example
 <div class="grid-x grid-margin-x">
-  <div class="small-4 large-offset-2 cell">Offset 2 on large</div>
-  <div class="small-4 cell">4 cells</div>
+  <div class="cell small-4 large-offset-2">Offset 2 on large</div>
+  <div class="cell small-4">4 cells</div>
 </div>
 ```
 
@@ -227,7 +227,7 @@ Offsets work by applying `margin-left` (or `margin-top` for a vertical grid) to
 
 To define cell widths within a direction-level, instead of the individual cell level, add the class `.[size]-up-[n]` to a `grid-x` or `grid-y`, where `[n]` is the number of cells to display per direction, and `[size]` is the breakpoint at which to apply the effect.
 
-<div class="primary callout">This example uses padding grid but this can be used with margin grid too.</div>
+<div class="callout primary">This example uses padding grid but this can be used with margin grid too.</div>
 
 <div class="docs-codepen-container">
 <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/PjBLxE?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>