Add visibility classes section to docs page

diff --git a/docs.php b/docs.php
index 2bd99da087ab509acaa3817898cd121772e64a37..ca887f670e72210665368be2614532127cd1b651 100644 (file)
--- a/docs.php
+++ b/docs.php
@@ -183,37 +183,7 @@
     <hr />
     <h2 class="light">Breakdown</h2>
     <p>Here's how these items are being used:</p>
-    <table>
-      <tr>
-        <td><code>table.body</code></td>
-        <td>Certain clients strip out the body tag, so we'll provide a workaround and add some CSS to override default styles</td>
-      </tr>
-      
-      <tr>
-        <td><code>td.center</code></td>
-        <td>This piece centers the table</td>
-      </tr>
-      <tr>
-        <td><code>td.container</code></td>
-        <td>We'll wrap everything to 600px</td>
-      </tr>
-      <tr>
-        <td><code>td.row</code></td>
-        <td>We'll wrap everything to 600px</td>
-      </tr>
-      <tr>
-        <td><code>td.wrapper.last</code></td>
-        <td>Why you need this class. it may span two lines but that's cool because we've accommodated for that</td>
-      </tr>
-      <tr>
-        <td><code>table.(one–four).columns</code></td>
-        <td>How wide you want your content to be</td>
-      </tr>
-      <tr>
-        <td><code>td.expander</code></td>
-        <td>What expander does yay!</td>
-      </tr>
-    </table>
+    
     <hr />
     <h2 class="light">Examples</h2>
     <p>Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
@@ -222,51 +192,30 @@
     <hr class="section">
 
     <h1 id="visibility-classes" class="light">Visibility Classes</h1>
-    <p class="lead">Create powerful multi-device layouts quickly and easily.</p>
+    <p class="lead">Selectively show content for different screen sizes.</p>
     <hr />
     <h2 class="light">Explanation</h2>
-    <h4 class="normal">Using our predefined HTML classes</h4>
-    <p>These are examples of different ways to use the 4-column Ink Grid. Emails work properly by using table elements, a developer's and designer's worst enemy, but we've made it easy for you.  You can create beautiful layouts with ease, but only if you follow this structure.</p>
+    <p>By adding a visibility class to an element, you can show or hide it based on screen size.  Visibility classes can be used on any element.</p>
+    <p>Note: If you're using a visibility class on an <code>&lt;img&gt;</code> tag, be sure to include it on the image's parent element as well, in order for it to work in all browsers.</p>
     <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
     <br>
     <hr />
     <h2 class="light">Breakdown</h2>
-    <p>Here's how these items are being used:</p>
+    <p>Available visibility classes:</p>
     <table>
       <tr>
-        <td><code>table.body</code></td>
-        <td>Certain clients strip out the body tag, so we'll provide a workaround and add some CSS to override default styles</td>
-      </tr>
-      
-      <tr>
-        <td><code>td.center</code></td>
-        <td>This piece centers the table</td>
-      </tr>
-      <tr>
-        <td><code>td.container</code></td>
-        <td>We'll wrap everything to 600px</td>
-      </tr>
-      <tr>
-        <td><code>td.row</code></td>
-        <td>We'll wrap everything to 600px</td>
+        <td><code>.hide-for-small</code></td>
       </tr>
       <tr>
-        <td><code>td.wrapper.last</code></td>
-        <td>Why you need this class. it may span two lines but that's cool because we've accommodated for that</td>
+        <td><code>.show-for-small</code></td>
       </tr>
       <tr>
-        <td><code>table.(one–four).columns</code></td>
-        <td>How wide you want your content to be</td>
+        <td><code>.hide-for-large</code> (same as <code>.show-for-small</code>)</td>
       </tr>
       <tr>
-        <td><code>td.expander</code></td>
-        <td>What expander does yay!</td>
+        <td><code>.show-for-large</code> (same as <code>.hide-for-small</code>)</td>
       </tr>
     </table>
-    <hr />
-    <h2 class="light">Examples</h2>
-    <p>Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
-    <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
     
     <hr class="section">