Restructure docs to use single page layout

diff --git a/docs.php b/docs.php
index c109dc9ac6bbd000b07e24ea309e0329dc738f51..2f5f9901c70bd4fad8d61b85d68be7664bf01340 100644 (file)
--- a/docs.php
+++ b/docs.php
@@ -12,31 +12,37 @@
 <div class="row docs">
   <div class="large-3 columns">
     <ul class="doc-nav">
-      <li><a href="#">Getting Started</a></li>
-      <li>
-        <a href="#" class="current">Grid &raquo;</a>
-        <ul>
-          <li><a href="#">Explanation</a></li>
-          <li><a href="#">Breakdown</a></li>
-          <li><a href="#">Examples</a></li>
-        </ul>
-      </li>
-      <li><a href="#">Sub-Grid</a></li>
-      <li><a href="#">Full-Width Headers &amp; Footers</a></li>
-      <li><a href="#">Visibility Classes</a></li>
-      <li><a href="#">Panels</a></li>
-      <li><a href="#">Buttons</a></li>
+      <li><a href="#start">Getting Started</a></li>
+      <li><a href="#grid">Grid</a></li>
+      <li><a href="#sub-grid">Sub-Grid</a></li>
+      <li><a href="#full-width">Full-Width Headers &amp; Footers</a></li>
+      <li><a href="#visibility-classes">Visibility Classes</a></li>
+      <li><a href="#panels">Panels</a></li>
+      <li><a href="#buttons">Buttons</a></li>
     </ul>
   </div>
   <div class="large-9 columns">
-    <h1 class="light">Grid</h1>
+    <h1 id="start" class="light">Getting Started</h1>
+    <p class="lead">Create powerful multi-device layouts quickly and easily.</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>
+    <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">
+
+    <h1 id="grid" class="light">Grid</h1>
     <p class="lead">Create powerful multi-device layouts quickly and easily.</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 class="label"><strong>It is recommended that you copy and paste this code.</strong></p>
     <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
     <br>
     <hr>
@@ -77,14 +83,253 @@
     
     <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>
-    <p class="label"><strong>It is recommended that you copy and paste this code.</strong></p>
+    <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
+
+    <hr class="section">
+
+    <h1 id="sub-grid" class="light">Sub-Grid</h1>
+    <p class="lead">Create powerful multi-device layouts quickly and easily.</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>
     <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
     <br>
-    <div class="prev-next-section">
-      <p class="left"><a href="#">&laquo; Getting Started</a></p>
-      <p class="right"><a href="#">Sub-Grid &raquo;</a></p>
-    </div>
+    <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>
+    <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
+    
+    <hr class="section">
+
+    <h1 id="full-width" class="light">Full-Width Headers &amp; Footers</h1>
+    <p class="lead">Create powerful multi-device layouts quickly and easily.</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>
+    <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>
+    <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>
+    <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
+    
+    <hr class="section">
+
+    <h1 id="visibility-classes" class="light">Visibility Classes</h1>
+    <p class="lead">Create powerful multi-device layouts quickly and easily.</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>
+    <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>
+    <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>
+    <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
+    
+    <hr class="section">
+
+    <h1 id="panels" class="light">Panels</h1>
+    <p class="lead">Create powerful multi-device layouts quickly and easily.</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>
+    <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>
+    <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>
+    <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
     
+    <hr class="section">
+
+    <h1 id="buttons" class="light">Buttons</h1>
+    <p class="lead">Create powerful multi-device layouts quickly and easily.</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>
+    <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>
+    <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>
+    <script type="text/javascript" src="https://snipt.net/embed/a2927bac91526b5a558d3bfa73dcdd79/"></script>
+    <br>
   </div>
 </div>
 

diff --git a/sass/app.scss b/sass/app.scss
index dd4f98722fb99e0dab788a8a4a74755435ac5148..ef9775a21df35446f2188601ee61118756fe7967 100644 (file)
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -220,6 +220,11 @@ hr { border-style: dashed; }
   table { font-size: emCalc(15px); 
     td { line-height: 1.6; }
   }
+  hr.section {
+    margin-top: 50px;
+    border-style: solid;
+    border-width: 2px;
+  }
 }
 .prev-next-section { @include clearfix; border-top: 1px dashed #ddd; margin: 20px 0 50px; padding-top: 20px; 
   a { font-weight: bold; color: #333; }