groundworkcss 0.4.4 → 2.0.0

data/app/views/groundworkdocs/responsive_text.html.erb

@@ -0,0 +1,90 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Responsive Text</h1>
+            <p class="quicksand">Javascript helpers that make fitting text blocks within responsive designs a breeze. Created by <a href="http://twitter.com/ghepting" target="_blank">Gary Hepting</a></p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 12 of 14</p>
+            <p><a href="icons.html" rel="prev" class="blue button">Back</a> <a href="placeholder_text.html" rel="next" class="green button">Next: Placeholder Content</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <h4 class="zero">Truncated Text Blocks</h4>
+          <p class="small zero">(Resize the viewport and the amount of text that is displayed will be adjusted)</p>
+          <div class="row">
+            <div class="one third padded bounceInLeft animated">
+              <p>Two Lines:</p>
+              <p data-truncate="2" class="yellow box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            </div>
+            <div class="one third padded bounceInDown animated">
+              <p>Three Lines:</p>
+              <p data-truncate="3" class="turquoise box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            </div>
+            <div class="one third padded bounceInRight animated">
+              <p>Five Lines:</p>
+              <div class="blue box">
+                <p data-truncate="5" class="zero">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one third pad-left pad-right bounceInLeft animated">
+              <pre data-lang="html">&lt;p data-truncate=&quot;2&quot; 
+   class=&quot;yellow box&quot;&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+&lt;/p&gt;</pre>
+            </div>
+            <div class="one third pad-left pad-right bounceInDown animated">
+              <pre data-lang="html">&lt;p data-truncate=&quot;3&quot; 
+   class=&quot;turquoise box&quot;&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+&lt;/p&gt;</pre>
+            </div>
+            <div class="one third pad-left pad-right bounceInRight animated">
+              <pre data-lang="html">&lt;p data-truncate=&quot;5&quot; 
+   class=&quot;blue box&quot;&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+&lt;/p&gt;</pre>
+            </div>
+          </div>
+          <hr><br>
+          <h4 class="zero">Responsive Text</h4>
+          <p class="small zero">(Resize the viewport and these will shrink to fit)</p>
+          <div class="row">
+            <div class="one third padded bounceInLeft animated">
+              <h1 data-compression="8.5" class="green responsive">Responsive Heading</h1>
+            </div>
+            <div class="one third padded bounceInUp animated">
+              <h1 data-compression="11.8" class="purple responsive">Longer Responsive Heading</h1>
+            </div>
+            <div class="one third padded bounceInRight animated">
+              <h1 data-compression="13" data-scrollable="true" class="red responsive bounceInUp animated">Scrolling Responsive Heading with Overflowing Text</h1>
+            </div>
+          </div>
+          <div class="row">
+            <div class="one third pad-left pad-right bounceInLeft animated">
+              <pre data-lang="html" class="gap-top">&lt;h1 class=&quot;responsive&quot; 
+    data-compression=&quot;8.5&quot;&gt; 
+  Responsive Heading
+&lt;/h1&gt;</pre>
+            </div>
+            <div class="one third pad-left pad-right bounceInUp animated">
+              <pre data-lang="html" class="gap-top">&lt;h1 class=&quot;responsive&quot; 
+    data-compression=&quot;11.8&quot;&gt; 
+  Longer Responsive Heading 
+&lt;/h1&gt;</pre>
+            </div>
+            <div class="one third pad-left pad-right bounceInRight animated">
+              <pre data-lang="html" class="gap-top">&lt;h1 class=&quot;responsive&quot; 
+    data-compression=&quot;13&quot; 
+    data-scrollable=&quot;true&quot;&gt; 
+  Scrolling Responsive Heading with Overflowing Text 
+&lt;/h1&gt;</pre>
+            </div>
+          </div>
+        </div>
+      </div>

data/app/views/groundworkdocs/tables.html.erb

@@ -0,0 +1,554 @@
+      <div class="padded">
+        <div class="row">
+          <div class="three fifths bounceInRight animated">
+            <h1 class="zero museo-slab">Tables</h1>
+            <p class="quicksand">Clean and easy to customize styling for tabular data.</p>
+          </div>
+          <div class="two fifths align-right-ipad align-right-desktop flipInX animated">
+            <p class="quicksand">Component Usage Example 8 of 14</p>
+            <p><a href="messages.html" rel="prev" class="blue button"> Back</a> <a href="tabs.html" rel="next" class="green button">Next: Tabs</a></p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="row">
+        <div class="one whole padded">
+          <div class="bounceInLeft animated">
+            <h4>Responsive Data Table</h4>
+            <div class="row">
+              <div class="one whole padded">
+                <table data-max="15" class="responsive">
+                  <thead>
+                    <tr>
+                      <th>Table Heading</th>
+                      <th>Table Heading</th>
+                      <th>Table Heading</th>
+                      <th>Table Heading</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                      <td>Footer cell</td>
+                      <td>Footer cell</td>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one whole pad-left pad-right">
+                <pre data-lang="html">&lt;table class=&quot;responsive&quot; data-max=&quot;15&quot;&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Table Heading&lt;/th&gt;
+      &lt;th&gt;Table Heading&lt;/th&gt;
+      &lt;th&gt;Table Heading&lt;/th&gt;
+      &lt;th&gt;Table Heading&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+      &lt;td&gt;Table cell&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Footer cell&lt;/td&gt;
+      &lt;td&gt;Footer cell&lt;/td&gt;
+      &lt;td&gt;Footer cell&lt;/td&gt;
+      &lt;td&gt;Footer cell&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInRight animated">
+            <h4>States</h4>
+            <div class="row">
+              <div class="one third padded">
+                <table data-max="15" class="responsive info">
+                  <thead>
+                    <tr>
+                      <th>Info Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive success">
+                  <thead>
+                    <tr>
+                      <th>Success Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive alert">
+                  <thead>
+                    <tr>
+                      <th>Alert Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third padded">
+                <table data-max="15" class="responsive question">
+                  <thead>
+                    <tr>
+                      <th>Question Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive warning">
+                  <thead>
+                    <tr>
+                      <th>Warning Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive error">
+                  <thead>
+                    <tr>
+                      <th>Error Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+          </div>
+          <hr><br>
+          <div class="bounceInUp animated">
+            <h4>Colors</h4>
+            <div class="row">
+              <div class="one third padded">
+                <table data-max="15" class="responsive yellow">
+                  <thead>
+                    <tr>
+                      <th>Yellow Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive orange">
+                  <thead>
+                    <tr>
+                      <th>Orange Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive red">
+                  <thead>
+                    <tr>
+                      <th>Red Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third padded">
+                <table data-max="15" class="responsive pink">
+                  <thead>
+                    <tr>
+                      <th>Pink Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive purple">
+                  <thead>
+                    <tr>
+                      <th>Purple Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive asphalt">
+                  <thead>
+                    <tr>
+                      <th>Asphalt Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+            <div class="row">
+              <div class="one third padded">
+                <table data-max="15" class="responsive blue">
+                  <thead>
+                    <tr>
+                      <th>Blue Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive turquoise">
+                  <thead>
+                    <tr>
+                      <th>Turquoise Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+              <div class="one third padded">
+                <table data-max="15" class="responsive green">
+                  <thead>
+                    <tr>
+                      <th>Green Table</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                    <tr>
+                      <td>Table cell</td>
+                    </tr>
+                  </tbody>
+                  <tfoot>
+                    <tr>
+                      <td>Footer cell</td>
+                    </tr>
+                  </tfoot>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>