From f91e84d49a36d86ee812b72fc9eb32f28d281ba5 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan.campbell@icloud.com>
Date: Fri, 25 Mar 2016 00:42:44 -0400
Subject: [PATCH 1/2] Update class name structure

---
 docs/layout/max-widths/index.html        | 9 ---------
 src/templates/docs/max-widths/index.html | 9 ---------
 2 files changed, 18 deletions(-)

diff --git a/docs/layout/max-widths/index.html b/docs/layout/max-widths/index.html
index 3e32842a7..9934418f7 100644
--- a/docs/layout/max-widths/index.html
+++ b/docs/layout/max-widths/index.html
@@ -92,18 +92,9 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-max-widths</h4>
   7  = 7th step in width scale
   8  = 8th step in width scale
   9  = 9th step in width scale
-  10 = 10th step in width scale
 
-  -25   = literal value 10%
-  -50   = literal value 20%
-  -75   = literal value 25%
   -100  = literal value 33%
-
   -none  = none
-  -max   = max-content
-  -min   = min-content
-  -fit   = fit-content
-  -fill  = fill-available
 
 Media Query Extensions:
   -ns = not-small
diff --git a/src/templates/docs/max-widths/index.html b/src/templates/docs/max-widths/index.html
index c5ad13448..9703f9173 100644
--- a/src/templates/docs/max-widths/index.html
+++ b/src/templates/docs/max-widths/index.html
@@ -56,18 +56,9 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
   7  = 7th step in width scale
   8  = 8th step in width scale
   9  = 9th step in width scale
-  10 = 10th step in width scale
 
-  -25   = literal value 10%
-  -50   = literal value 20%
-  -75   = literal value 25%
   -100  = literal value 33%
-
   -none  = none
-  -max   = max-content
-  -min   = min-content
-  -fit   = fit-content
-  -fill  = fill-available
 
 Media Query Extensions:
   -ns = not-small

From e5eb3c0805ff45703da4da47361f73ff88ac7352 Mon Sep 17 00:00:00 2001
From: Lachlan Campbell <lachlan.campbell@icloud.com>
Date: Fri, 25 Mar 2016 00:43:39 -0400
Subject: [PATCH 2/2] More examples and better whitespace

---
 docs/layout/max-widths/index.html        | 66 +++++++++++++++++++-----
 src/templates/docs/max-widths/index.html | 66 +++++++++++++++++++-----
 2 files changed, 104 insertions(+), 28 deletions(-)

diff --git a/docs/layout/max-widths/index.html b/docs/layout/max-widths/index.html
index 9934418f7..c9b4503fb 100644
--- a/docs/layout/max-widths/index.html
+++ b/docs/layout/max-widths/index.html
@@ -108,50 +108,88 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
         <table border="0" cellspacing="5" cellpadding="5">
           <tr>
             <td>
-              <code class="code">.mw1</code>
+              <code class="code mr2">.mw1</code>
             </td>
             <td>
-              <div class="mw1 bg-black-10 pv2 oh">
+              <div class="mw1 bg-black-10 pa2 mv1">
                 Lorem
               </div>
             </td>
           </tr>
           <tr>
             <td>
-              <code class="code">.mw2</code>
+              <code class="code mr2">.mw2</code>
             </td>
             <td>
-              <div class="mw2 bg-black-10 pv2 oh">
+              <div class="mw2 bg-black-10 pa2 mv1">
                 Lorem
               </div>
             </td>
           </tr>
           <tr>
             <td>
-              <code class="code">.mw3</code>
+              <code class="code mr2">.mw3</code>
             </td>
             <td>
-              <div class="mw3 bg-black-10 pv2 oh">
+              <div class="mw3 bg-black-10 pa2 mv1">
                 Lorem ipsum dolor sit amet, consetetur sadipscing
               </div>
             </td>
           </tr>
           <tr>
             <td>
-              <code class="code">.mw4</code>
+              <code class="code mr2">.mw4</code>
             </td>
             <td>
-              <div class="mw4 bg-black-10 pv2 oh">
+              <div class="mw4 bg-black-10 pa2 mv1">
                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
               </div>
             </td>
           </tr>
           <tr>
             <td>
-              <code class="code">.mw5</code>
+              <code class="code mr2">.mw5</code>
             </td>
             <td>
-              <div class="mw5 bg-black-10 pv2 oh">
+              <div class="mw5 bg-black-10 pa2 mv1">
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+                vero eos et accusam et justo duo dolores et ea rebum.
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class="code mr2">.mw6</code>
+            </td>
+            <td>
+              <div class="mw6 bg-black-10 pa2 mv1">
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+                vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class="code mr2">.mw7</code>
+            </td>
+            <td>
+              <div class="mw7 bg-black-10 pa2 mv1">
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+                vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class="code mr2">.mw8</code>
+            </td>
+            <td>
+              <div class="mw8 bg-black-10 pa2 mv1">
                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
                 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -161,10 +199,10 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
           </tr>
           <tr>
             <td>
-              <code class="code">.mw6</code>
+              <code class="code mr2">.mw9</code>
             </td>
             <td>
-              <div class="mw6 bg-black-10 pv2 oh">
+              <div class="mw9 bg-black-10 pa2 mv1">
                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
                 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -175,8 +213,8 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
         </table>
         <h3 class="f5 book pt4 caps">Max Width Percentages</h3>
         <div class="bg-black-10 w-100">
-          <div class="mw-100 bg-black-10 mb3">
-            <code class="code">mw-100</code>
+          <div class="mw-100 bg-black-10">
+            <code class="code db pa2">mw-100</code>
           </div>
         </div>
         <div class="mt5 cf">
diff --git a/src/templates/docs/max-widths/index.html b/src/templates/docs/max-widths/index.html
index 9703f9173..ae3d21611 100644
--- a/src/templates/docs/max-widths/index.html
+++ b/src/templates/docs/max-widths/index.html
@@ -72,50 +72,88 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
         <table border="0" cellspacing="5" cellpadding="5">
           <tr>
             <td>
-              <code class="code">.mw1</code>
+              <code class="code mr2">.mw1</code>
             </td>
             <td>
-              <div class="mw1 bg-black-10 pv2 oh">
+              <div class="mw1 bg-black-10 pa2 mv1">
                 Lorem
               </div>
             </td>
           </tr>
           <tr>
             <td>
-              <code class="code">.mw2</code>
+              <code class="code mr2">.mw2</code>
             </td>
             <td>
-              <div class="mw2 bg-black-10 pv2 oh">
+              <div class="mw2 bg-black-10 pa2 mv1">
                 Lorem
               </div>
             </td>
           </tr>
           <tr>
             <td>
-              <code class="code">.mw3</code>
+              <code class="code mr2">.mw3</code>
             </td>
             <td>
-              <div class="mw3 bg-black-10 pv2 oh">
+              <div class="mw3 bg-black-10 pa2 mv1">
                 Lorem ipsum dolor sit amet, consetetur sadipscing
               </div>
             </td>
           </tr>
           <tr>
             <td>
-              <code class="code">.mw4</code>
+              <code class="code mr2">.mw4</code>
             </td>
             <td>
-              <div class="mw4 bg-black-10 pv2 oh">
+              <div class="mw4 bg-black-10 pa2 mv1">
                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
               </div>
             </td>
           </tr>
           <tr>
             <td>
-              <code class="code">.mw5</code>
+              <code class="code mr2">.mw5</code>
             </td>
             <td>
-              <div class="mw5 bg-black-10 pv2 oh">
+              <div class="mw5 bg-black-10 pa2 mv1">
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+                vero eos et accusam et justo duo dolores et ea rebum.
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class="code mr2">.mw6</code>
+            </td>
+            <td>
+              <div class="mw6 bg-black-10 pa2 mv1">
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+                vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class="code mr2">.mw7</code>
+            </td>
+            <td>
+              <div class="mw7 bg-black-10 pa2 mv1">
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+                vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class="code mr2">.mw8</code>
+            </td>
+            <td>
+              <div class="mw8 bg-black-10 pa2 mv1">
                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
                 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -125,10 +163,10 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
           </tr>
           <tr>
             <td>
-              <code class="code">.mw6</code>
+              <code class="code mr2">.mw9</code>
             </td>
             <td>
-              <div class="mw6 bg-black-10 pv2 oh">
+              <div class="mw9 bg-black-10 pa2 mv1">
                 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
                 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
                 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -139,8 +177,8 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
         </table>
         <h3 class="f5 book pt4 caps">Max Width Percentages</h3>
         <div class="bg-black-10 w-100">
-          <div class="mw-100 bg-black-10 mb3">
-            <code class="code">mw-100</code>
+          <div class="mw-100 bg-black-10">
+            <code class="code db pa2">mw-100</code>
           </div>
         </div>
         <div class="mt5 cf">