From: Tim Hartwick <tdhartwick2@gmail.com>
Date: Thu, 4 Feb 2016 22:12:02 +0000 (-0800)
Subject: fixed rows to display table
X-Git-Tag: v2.0.0-rc.1~24
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2709ab494f8eb71f2a9450c293069de55794ee3f;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

fixed rows to display table
---

diff --git a/scss/ink/components/_grid.scss b/scss/ink/components/_grid.scss
index 0172017b..c4f8b894 100755
--- a/scss/ink/components/_grid.scss
+++ b/scss/ink/components/_grid.scss
@@ -44,7 +44,7 @@ table {
 }
 
 table.container table.row {
-  display: block;
+  display: table;
 }
 
 //Begin new gutter!
diff --git a/testing/src/pages/Old/basic.html b/testing/src/pages/Old/basic.html
deleted file mode 100644
index 14dfcc19..00000000
--- a/testing/src/pages/Old/basic.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<row class="header">
-  <td class="center" align="center">
-    <center>
-      <container>
-        <columns large='12' small='12'>
-          <subcolumns large='6' small='6'>
-            <img src="http://placehold.it/200x50"/>
-          </subcolumns>
-          <subcolumns large='6' small='6' class=" sub-header">
-            <span class="template-label">Basic</span>
-          </subcolumns>
-        </columns>
-        </container>
-    </center>
-  </td>
-</row>
-<container>
-  <row>
-    <columns large='12' small='12'>
-      <h1>Hi, Susan Calvin</h1>
-      <p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
-      <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
-    </columns>
-  </row>
-  <row class="callout">
-    <columns large='12' small='12'>
-      <td class="callout">
-       <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
-      </td>
-    </columns>
-  </row>
-  <row class="footer">
-    <columns large='6' small='12'>
-      <td class="left-text-pad">
-       <h5>Connect With Us:</h5>
-       <table class="button tiny facebook">
-         <tr>
-           <td>
-             <a href="#">Facebook</a>
-           </td>
-         </tr>
-       </table>
-       <br>
-       <table class="button tiny twitter">
-         <tr>
-           <td>
-             <a href="#">Twitter</a>
-           </td>
-         </tr>
-       </table>
-       <br>
-       <table class="button tiny google-plus">
-         <tr>
-           <td>
-             <a href="#">Google +</a>
-           </td>
-         </tr>
-       </table>
-      </td>
-    </columns>
-    <columns large='6' small='12'>
-      <td class="last right-text-pad">
-        <h5>Contact Info:</h5>
-        <p>Phone: 408.341.0600</p>
-        <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
-      </td>
-    </columns>
-  </row>
-  <row>
-    <columns large='12' small='12'>
-      <center>
-        <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
-      </center>
-    </columns>
-  </row>
-</container>
diff --git a/testing/src/pages/Old/block-grid.html b/testing/src/pages/Old/block-grid.html
deleted file mode 100644
index 5a3a427e..00000000
--- a/testing/src/pages/Old/block-grid.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<table class="container">
-  <tr>
-    <td>
-
-    <table class="block-grid up-2" cellspacing="0">
-      <tr>
-        <td style="background:red;">
-          <p style="text-align: center;">one</p>
-        </td>
-        <td style="background: pink;">
-          <p style="text-align: center;">two</p>
-        </td>
-      </tr>
-    </table>
-
-    <table class="block-grid up-3">
-      <tr>
-        <td style="background:red;">
-          <p style="text-align: center;">one</p>
-        </td>
-        <td style="background: pink;">
-          <p style="text-align: center;">two</p>
-        </td>
-        <td style="background:red;">
-          <p style="text-align: center;">three</p>
-        </td>
-      </tr>
-    </table>
-
-      <table class="block-grid up-4">
-        <tr>
-          <td style="background:red;">
-            <p style="text-align: center;">one</p>
-          </td>
-          <td style="background: pink;">
-            <p style="text-align: center;">two</p>
-          </td>
-          <td style="background:red;">
-            <p style="text-align: center;">three</p>
-          </td>
-          <td style="background: pink;">
-            <p style="text-align: center;">four</p>
-          </td>
-        </tr>
-      </table>
-
-      <table class="block-grid up-5">
-        <tr>
-          <td style="background:red;">
-            <p style="text-align: center;">one</p>
-          </td>
-          <td style="background: pink;">
-            <p style="text-align: center;">two</p>
-          </td>
-          <td style="background:red;">
-            <p style="text-align: center;">three</p>
-          </td>
-          <td style="background: pink;">
-            <p style="text-align: center;">four</p>
-          </td>
-          <td style="background:red;">
-            <p style="text-align: center;">five</p>
-          </td>
-        </tr>
-      </table>
-    
-
-    </td>
-  </tr>
-</table>
\ No newline at end of file
diff --git a/testing/src/pages/Old/grid.html b/testing/src/pages/Old/grid.html
deleted file mode 100644
index c5081fc7..00000000
--- a/testing/src/pages/Old/grid.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<table class="container">
-  <tr>
-    <td>
-
-    <table class="row collapse">
-      <tr>
-        <th class="large-12 small-12 columns">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam fugiat nihil, autem unde modi laborum consequuntur cumque at nemo, adipisci laboriosam dolores animi repellat beatae, eveniet itaque, nisi perspiciatis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos odit consequatur reprehenderit, deleniti incidunt rerum quam harum praesentium hic officia tempore quisquam consectetur eligendi cumque sit obcaecati ab nam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat optio similique consequatur illo excepturi. Eveniet fugit ut nam sit soluta laudantium, necessitatibus laboriosam! Numquam iste cumque fugit fuga dolores!
-        </th>
-      </tr>
-    </table>
-
-    <table class="row collapse">
-      <tr>
-        <th class="large-6 small-12 columns" style="background:green;">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam fugiat nihil, autem unde modi laborum consequuntur cumque at nemo, adipisci laboriosam dolores animi repellat beatae, eveniet itaque, nisi perspiciatis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos odit consequatur reprehenderit, deleniti incidunt rerum quam harum praesentium hic officia tempore quisquam consectetur eligendi cumque sit obcaecati ab nam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat optio similique consequatur illo excepturi. Eveniet fugit ut nam sit soluta laudantium, necessitatibus laboriosam! Numquam iste cumque fugit fuga dolores!
-        </th>
-        <th class="large-6 small-12 columns" style="background:yellow">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam fugiat nihil, autem unde modi laborum consequuntur cumque at nemo, adipisci laboriosam dolores animi repellat beatae, eveniet itaque, nisi perspiciatis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos odit consequatur reprehenderit, deleniti incidunt rerum quam harum praesentium hic officia tempore quisquam consectetur eligendi cumque sit obcaecati ab nam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat optio similique consequatur illo excepturi. Eveniet fugit ut nam sit soluta laudantium, necessitatibus laboriosam! Numquam iste cumque fugit fuga dolores!
-        </th>
-      </tr>
-    </table>
-
-    <table class="row">
-      <tr>
-        <th class="large-6 small-12 columns first" style="background: red;">
-          <table>
-            <tr>
-              <th>
-                <p>
-                  One word
-                </p>
-              </th>
-              <th class="expander"></th>
-            </tr>
-          </table>
-        </th>
-        <th class="large-6 small-12 columns last" style="background: blue;">
-          <table>
-            <tr>
-              <th>
-                ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-              </th>
-              <th class="expander"></th>
-            </tr>
-          </table>
-        </th>
-      </tr>
-    </table>
-
-
-
-      <table class="row">
-        <tr>
-          <th class="large-2 small-12 columns first" style="background: red;">
-            <table>
-              <tr>
-                <th>
-                  <p>
-                    One word
-                  </p>
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-          <th class="large-4 small-12 columns" style="background: green;">
-            <table>
-              <tr>
-                <th>
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-          <th class="large-6 small-12 columns last" style="background: blue;">
-            <table>
-              <tr>
-                <th>
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-        </tr>
-      </table>
-
-      <table class="row">
-        <tr>
-          <th class="large-2 small-12 columns first" style="background: red;">
-            <table>
-              <tr>
-                <th>
-                  <p>
-                    One word
-                  </p>
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-          <th class="large-4 small-4 columns" style="background: green;">
-            <table>
-              <tr>
-                <th>
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-          <th class="large-6 small-8 columns last" style="background: blue;">
-            <table>
-              <tr>
-                <th>
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-        </tr>
-      </table>
-    </td>
-  </tr>
-</table>
\ No newline at end of file
diff --git a/testing/src/pages/Old/index.html b/testing/src/pages/Old/index.html
deleted file mode 100644
index 5de4e10e..00000000
--- a/testing/src/pages/Old/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<table class="container">
-  <tr>
-    <td>
-
-    <table class="row">
-      <tr>
-        <th class="large-8 small-12 columns first ">
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.</p>
-
-        <table class="button large">
-          <tr>
-            <td>
-              <table>
-                <tr>
-                  <td>
-                    <a href="https://zurb.com">I am a button</a>
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
-        </table>
-
-
-        <table  class="button">
-          <tr>
-            <td>
-              <table>
-                <tr>
-                  <td>
-                    <a href="https://zurb.com">I am a button</a>
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
-        </table>
-
-        <table class="button small">
-          <tr>
-            <td>
-              <table>
-                <tr>
-                  <td>
-                    <a href="https://zurb.com">I am a button</a>
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
-        </table>
-
-        <table  class="button tiny">
-          <tr>
-            <td>
-              <table>
-                <tr>
-                  <td>
-                    <a href="https://zurb.com">I am a button</a>
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
-        </table>
-
-        <table class="button secondary">
-          <tr>
-            <td>
-              <table>
-                <tr>
-                  <td>
-                    <a href="https://zurb.com">I am a button</a>
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
-        </table>
-
-        <table class="button success">
-          <tr>
-            <td>
-              <table>
-                <tr>
-                  <td>
-                    <a href="https://zurb.com">I am a button</a>
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
-        </table>
-
-        <table class=" button alert expand">
-          <tr>
-            <td>
-              <table>
-                <tr>
-                  <td>
-                    <a href="https://zurb.com">I am a button</a>
-                  </td>
-                </tr>
-              </table>
-            </td>
-          </tr>
-        </table>
-
-
-
-
-        </th>
-
-        <th class="large-4 small-12 columns">
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, sequi! Velit laboriosam aliquam mollitia quas dignissimos possimus ipsa aspernatur quod fugiat maxime, veniam veritatis! Ipsa esse enim sunt voluptatum nostrum.</p>
-        </th>
-      </tr>
-    </table>
-
-
-    </td>
-  </tr>
-</table>
\ No newline at end of file
diff --git a/testing/src/pages/Old/inline-lists.html b/testing/src/pages/Old/inline-lists.html
deleted file mode 100644
index 0ab106da..00000000
--- a/testing/src/pages/Old/inline-lists.html
+++ /dev/null
@@ -1,114 +0,0 @@
-<table class="container">
-  <tr>
-    <td>
-
-    <table class="row">
-      <tr>
-        <td class="large-12 small-12 columns">
-          <table class="menu">
-            <tr>
-            {{#repeat 10}}
-              <td>
-                <a href="http://google.com">One</a>
-              </td>
-            {{/repeat}}
-            </tr>
-          </table>
-        </td>
-      </tr>
-    </table>
-
-    <table class="row">
-      <th class="large-12 small-12 columns" style="background: pink;">
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quas, veritatis atque eligendi voluptatem natus fugiat! Iste officia ipsum sit quam, nam facere ea voluptatibus totam accusamus provident fugit reprehenderit!</p>
-      </th>
-    </table>
-
-    <table class="row">
-      <tr>
-        <td class="large-12 small-12 columns">
-          <table class="menu simple">
-            <tr>
-            {{#repeat 10}}
-              <td>
-                <a href="http://google.com">One</a>
-              </td>
-            {{/repeat}}
-            </tr>
-          </table>
-        </td>
-      </tr>
-    </table>
-
-    <table class="row">
-      <th class="large-12 small-12 columns" style="background: pink;">
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quas, veritatis atque eligendi voluptatem natus fugiat! Iste officia ipsum sit quam, nam facere ea voluptatibus totam accusamus provident fugit reprehenderit!</p>
-      </th>
-    </table>
-
-    <table class="row">
-      <tr>
-        <td class="large-12 small-12 columns">
-          <table class="menu vertical">
-            <tr>
-            {{#repeat 10}}
-              <td>
-                <a href="http://google.com">One</a>
-              </td>
-            {{/repeat}}
-            </tr>
-          </table>
-        </td>
-      </tr>
-    </table>
-
-    <table class="row">
-      <th class="large-12 small-12 columns" style="background: pink;">
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quas, veritatis atque eligendi voluptatem natus fugiat! Iste officia ipsum sit quam, nam facere ea voluptatibus totam accusamus provident fugit reprehenderit!</p>
-      </th>
-    </table>
-
-
-    <table class="row">
-      <tr>
-        <td class="large-12 small-12 columns">
-          <table class="menu vertical">
-            <tr>
-            <td>
-                <a href="http://google.com">One</a>
-                <table class="menu vertical">
-                  <tr>
-                    <td>
-                      <a href="http://google.com">Uno</a>
-                    </td>
-                    <td>
-                      <a href="http://google.com">Dos</a>
-                    </td>
-                    <td>
-                      <a href="http://google.com">Tres</a>
-                    </td>
-                  </tr>
-                </table>
-            </td>
-            {{#repeat 10}}
-              <td>
-                <a href="http://google.com">One</a>
-              </td>
-            {{/repeat}}
-            </tr>
-          </table>
-        </td>
-      </tr>
-    </table>
-
-    <table class="row">
-      <th class="large-12 small-12 columns" style="background: pink;">
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quas, veritatis atque eligendi voluptatem natus fugiat! Iste officia ipsum sit quam, nam facere ea voluptatibus totam accusamus provident fugit reprehenderit!</p>
-      </th>
-    </table>
-
-
-
-    </td>
-  </tr>
-</table>
\ No newline at end of file
diff --git a/testing/src/pages/Old/side-bar.html b/testing/src/pages/Old/side-bar.html
deleted file mode 100644
index 2bf6423c..00000000
--- a/testing/src/pages/Old/side-bar.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<container>
-  <row>
-    <columns small="12" large="6">
-      <center>
-        <inky></inky>
-      </center>
-    </columns>
-  </row>
-</container>
-<container>
-  <row>
-    <columns small="6" large="6">
-      <h2>Hello,<br> Han Fastolfe</h2>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
-      <br>
-
-      <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
-      <br>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
-      <button>I'm a Button</button>
-    </columns>
-
-    <columns small="6" large="6">
-      <h6>Header Thing</h6>
-      <p>Sub-head or something</p>
-
-      <a href="#">Just a Plain Link &raquo;</a>
-      <a href="#">Just a Plain Link &raquo;</a>
-      <a href="#">Just a Plain Link &raquo;</a>
-      <a href="#">Just a Plain Link &raquo;</a>
-      <a href="#">Just a Plain Link &raquo;</a>
-      <a href="#">Just a Plain Link &raquo;</a>
-      <a href="#">Just a Plain Link &raquo;</a>
-    </columns>
-  </row>
-  <row>
-    <columns small="12" large="12">
-      <center>
-      <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
-      </center>
-    </columns>
-  </row>
-</container>
diff --git a/testing/src/pages/Old/tim-test.html b/testing/src/pages/Old/tim-test.html
deleted file mode 100644
index ad093a85..00000000
--- a/testing/src/pages/Old/tim-test.html
+++ /dev/null
@@ -1,156 +0,0 @@
-<table class="container">
-  <tr>
-    <td>
-
-    <table class="row collapse">
-      <tr>
-        <th class="large-12 small-12 columns">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam fugiat nihil, autem unde modi laborum consequuntur cumque at nemo, adipisci laboriosam dolores animi repellat beatae, eveniet itaque, nisi perspiciatis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos odit consequatur reprehenderit, deleniti incidunt rerum quam harum praesentium hic officia tempore quisquam consectetur eligendi cumque sit obcaecati ab nam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat optio similique consequatur illo excepturi. Eveniet fugit ut nam sit soluta laudantium, necessitatibus laboriosam! Numquam iste cumque fugit fuga dolores!
-        </th>
-      </tr>
-    </table>
-
-    <table class="row collapse">
-      <tr>
-        <th class="large-6 small-12 columns" style="background:green;">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam fugiat nihil, autem unde modi laborum consequuntur cumque at nemo, adipisci laboriosam dolores animi repellat beatae, eveniet itaque, nisi perspiciatis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos odit consequatur reprehenderit, deleniti incidunt rerum quam harum praesentium hic officia tempore quisquam consectetur eligendi cumque sit obcaecati ab nam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat optio similique consequatur illo excepturi. Eveniet fugit ut nam sit soluta laudantium, necessitatibus laboriosam! Numquam iste cumque fugit fuga dolores!
-        </th>
-        <th class="large-6 small-12 columns" style="background:yellow">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam fugiat nihil, autem unde modi laborum consequuntur cumque at nemo, adipisci laboriosam dolores animi repellat beatae, eveniet itaque, nisi perspiciatis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eos odit consequatur reprehenderit, deleniti incidunt rerum quam harum praesentium hic officia tempore quisquam consectetur eligendi cumque sit obcaecati ab nam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat optio similique consequatur illo excepturi. Eveniet fugit ut nam sit soluta laudantium, necessitatibus laboriosam! Numquam iste cumque fugit fuga dolores!
-        </th>
-      </tr>
-    </table>
-
-    <table class="row">
-      <tr>
-        <th class="large-6 small-12 columns first" style="background: red;">
-          <table>
-            <tr>
-              <th>
-                <p>
-                  One word
-                </p>
-              </th>
-              <th class="expander"></th>
-            </tr>
-          </table>
-        </th>
-        <th class="large-6 small-12 columns last" style="background: blue;">
-          <table>
-            <tr>
-              <th>
-                ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-              </th>
-              <th class="expander"></th>
-            </tr>
-          </table>
-        </th>
-      </tr>
-    </table>
-
-
-
-      <table class="row">
-        <tr>
-          <th class="large-2 small-12 columns first" style="background: red;">
-            <table>
-              <tr>
-                <th>
-                  <p>
-                    One word
-                  </p>
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-          <th class="large-4 small-12 columns" style="background: green;">
-            <table>
-              <tr>
-                <th>
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-          <th class="large-6 small-12 columns last" style="background: blue;">
-            <table>
-              <tr>
-                <th>
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-        </tr>
-      </table>
-
-      <table class="row">
-        <tr>
-          <th class="large-2 small-12 columns first" style="background: red;">
-            <table>
-              <tr>
-                <th>
-                  <p>
-                    One word
-                  </p>
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-          <th class="large-4 small-4 columns" style="background: green;">
-            <table>
-              <tr>
-                <th>
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-          <th class="large-6 small-8 columns last" style="background: blue;">
-            <table>
-              <tr>
-                <th>
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </th>
-                <th class="expander"></th>
-              </tr>
-            </table>
-          </th>
-        </tr>
-      </table>
-
-
-<!--       <table class="row">
-        <tr>
-          <td class="large-4 small-4 columns first" style="background: red;">
-            <table>
-              <tr>
-                <td class="callout">
-                  One word
-                </td>
-                <td class="expander"></td>
-              </tr>
-            </table>
-          </td>
-          <td class="large-8 small-8 columns last" style="background: blue;">
-            <table>
-              <tr>
-                <td class="callout">
-                  ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis recusandae non consequatur similique fugiat, modi repellendus, culpa! Ea dolorum quae nobis omnis voluptatem, delectus facilis sapiente. Sit excepturi eligendi dolore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur neque eos vitae tenetur illum dolorum, quam officiis ut est molestias explicabo, sed autem quod saepe praesentium rem ad hic deleniti.
-                </td>
-                <td class="expander"></td>
-              </tr>
-            </table>
-          </td>
-        </tr>
-      </table>
- -->
-
-    </td>
-  </tr>
-</table>
\ No newline at end of file
diff --git a/testing/src/pages/block-inky.html b/testing/src/pages/block-inky.html
new file mode 100644
index 00000000..a9d235fa
--- /dev/null
+++ b/testing/src/pages/block-inky.html
@@ -0,0 +1,52 @@
+<container>
+  <block-grid up="2">
+    <td>
+      <p>one</p>
+    </td>
+    <td>
+      <p>two</p>
+    </td>
+  </block-grid>
+  <block-grid up="3">
+    <td>
+      <p>one</p>
+    </td>
+    <td>
+      <p>two</p>
+    </td>
+    <td>
+      <p>three</p>
+    </td>
+  </block-grid>
+  <block-grid up="4">
+    <td>
+      <p>one</p>
+    </td>
+    <td>
+      <p>two</p>
+    </td>
+    <td>
+      <p>three</p>
+    </td>
+    <td>
+      <p>four</p>
+    </td>
+  </block-grid>
+  <block-grid up="5">
+    <td>
+      <p>one</p>
+    </td>
+    <td>
+      <p>two</p>
+    </td>
+    <td>
+      <p>three</p>
+    </td>
+    <td>
+      <p>four</p>
+    </td>
+    <td>
+      <p>five</p>
+    </td>
+  </block-grid>
+</container>
\ No newline at end of file
diff --git a/testing/src/pages/button.html b/testing/src/pages/button.html
new file mode 100644
index 00000000..fb9a5ca0
--- /dev/null
+++ b/testing/src/pages/button.html
@@ -0,0 +1,168 @@
+<table class="container">
+  <tr>
+    <td>
+
+    <table class="row">
+      <tr>
+        <th class="small-12 large-12 columns">
+
+          <table class="button large">
+            <tr>
+              <td>
+                <table>
+                  <tr>
+                    <td>
+                      <a href="https://zurb.com">I am a large button</a>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+
+        </th>
+      </tr>
+    </table>
+
+    <table class="row">
+      <tr>
+        <th class="small-12 large-12 columns">
+
+          <table  class="button">
+            <tr>
+              <td>
+                <table>
+                  <tr>
+                    <td>
+                      <a href="https://zurb.com">I am a button</a>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+
+        </th>
+      </tr>
+    </table>
+
+
+    <table class="row">
+      <tr>
+        <th class="small-12 large-12 columns">          
+
+          <table class="button small">
+            <tr>
+              <td>
+                <table>
+                  <tr>
+                    <td>
+                      <a href="https://zurb.com">I am a small button</a>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+
+        </th>
+      </tr>
+    </table>
+
+    <table class="row">
+      <tr>
+        <th class="small-12 large-12 columns">
+
+          <table  class="button tiny">
+            <tr>
+              <td>
+                <table>
+                  <tr>
+                    <td>
+                      <a href="https://zurb.com">I am a tiny button</a>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+
+        </th>
+      </tr>
+    </table>  
+
+    <table class="row">
+      <tr>
+        <th class="small-12 large-12 columns">
+
+          <table class="button secondary">
+            <tr>
+              <td>
+                <table>
+                  <tr>
+                    <td>
+                      <a href="https://zurb.com">I am secondary</a>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table> 
+
+        </th>
+      </tr>
+    </table>
+
+    <table class="row">
+      <tr>
+        <th class="small-12 large-12 columns">
+
+          <table class="button success">
+            <tr>
+              <td>
+                <table>
+                  <tr>
+                    <td>
+                      <a href="https://zurb.com">I am successful</a>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+
+        </th>
+      </tr>
+    </table>
+
+    <table class="row">
+      <tr>
+        <td class="small-12 large-12 columns">
+
+          <table class=" button alert expand">
+            <tr>
+              <td>
+                
+                <table>
+                  <tr>
+                    <td>
+                      <a href="https://zurb.com">I expand</a>
+                    </td>
+                  </tr>
+                </table>
+
+              </td>
+              <td class="expander"></td>
+            </tr>
+          </table>
+
+        </td>
+              <td class="expander"></td>
+
+      </tr>
+    </table>
+
+
+    </td>
+  </tr>
+</table>
\ No newline at end of file
diff --git a/testing/src/pages/grid-inky.html b/testing/src/pages/grid-inky.html
index 81ea062e..a198552a 100644
--- a/testing/src/pages/grid-inky.html
+++ b/testing/src/pages/grid-inky.html
@@ -5,6 +5,11 @@
     </columns>
   </row>
   <row class="collapse">
+    <columns small="12" large="12">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
+    </columns>
+  </row>
+  <row>
     <columns small="12" large="6">
       <p>One Word</p>
     </columns>
diff --git a/testing/src/pages/grid.html b/testing/src/pages/grid.html
index 1a4976e7..7727d976 100644
--- a/testing/src/pages/grid.html
+++ b/testing/src/pages/grid.html
@@ -4,7 +4,7 @@
 
       <table class="row">
         <tr>
-          <th class="small-12 large-12 columns">
+          <th class="small-12 large-12 columns first last">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam aliquid tenetur dignissimos repellendus sapiente reprehenderit vero, possimus omnis necessitatibus ad, debitis, distinctio ea laudantium. Corrupti veniam harum sint, laboriosam aut.</p>
           </th>
         </tr>
@@ -12,10 +12,18 @@
 
       <table class="row collapse">
         <tr>
-          <th class="small-12 large-6 columns">
+          <th class="small-12 large-12 columns first last">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam aliquid tenetur dignissimos repellendus sapiente reprehenderit vero, possimus omnis necessitatibus ad, debitis, distinctio ea laudantium. Corrupti veniam harum sint, laboriosam aut.</p>
+          </th>
+        </tr>
+      </table>
+
+      <table class="row">
+        <tr>
+          <th class="small-12 large-6 columns first">
             <p>One Word</p>
           </th>
-          <th class="small-12 large-6 columns">
+          <th class="small-12 large-6 columns last">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam impedit odit cum, nemo qui corporis similique placeat aut inventore voluptas debitis ratione deleniti sequi, cumque eos animi perspiciatis sunt.</p>
           </th>
         </tr>
diff --git a/testing/src/pages/offset-inky.html b/testing/src/pages/offset-inky.html
new file mode 100644
index 00000000..cdb40d21
--- /dev/null
+++ b/testing/src/pages/offset-inky.html
@@ -0,0 +1,28 @@
+<container>
+  <row>
+    <columns small="8" large="8">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
+    </columns>
+    <columns small="4" large="4">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
+    </columns>
+  </row>
+  <row>
+    <columns small="4" large="4" class="small-offset-8 large-offset-8">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
+    </columns>
+  </row>
+  <row>
+    <columns small="12" large="8">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque iste voluptatibus, aspernatur error nesciunt quia molestiae tempore ab iusto voluptatum libero natus animi ipsam dolores. Modi ut, deserunt nemo.</p>
+    </columns>
+    <columns small="12" large="4">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus blanditiis, iure quo mollitia molestias, officiis, quia soluta repellat voluptas ratione architecto maxime? Dolores molestias numquam, recusandae nam inventore qui autem!</p>
+    </columns>
+  </row>
+  <row>
+    <columns small="12" large="4" class="large-offset-8">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit est asperiores id, commodi et debitis fuga sint aut in voluptatem, expedita dolor nam omnis dolorem animi. Dolores, officiis aperiam voluptate!</p>
+    </columns>
+  </row>
+</container>
\ No newline at end of file
diff --git a/testing/src/pages/Old/offset.html b/testing/src/pages/offset.html
similarity index 83%
rename from testing/src/pages/Old/offset.html
rename to testing/src/pages/offset.html
index c5c2f09a..8d1b3b8d 100644
--- a/testing/src/pages/Old/offset.html
+++ b/testing/src/pages/offset.html
@@ -4,11 +4,11 @@
 
     <table class="row">
       <tr>
-        <th class="large-8 small-8 columns">
+        <th class="small-8 large-8 columns first">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.</p>
         </th>
 
-        <th class="large-4 small-4 columns">
+        <th class="small-4 large-4 columns last">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, sequi! Velit laboriosam aliquam mollitia quas dignissimos possimus ipsa aspernatur quod fugiat maxime, veniam veritatis! Ipsa esse enim sunt voluptatum nostrum.</p>
         </th>
       </tr>
@@ -16,21 +16,19 @@
 
     <table class="row">
       <tr>
-        <th class="large-4 large-offset-8 small-4 small-offset-8 columns" style="background: red;">
+        <th class="small-4 small-offset-8 large-4 large-offset-8 columns">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure natus culpa optio, saepe expedita repellendus libero reiciendis, sit explicabo consectetur sint, repudiandae, vero iusto laboriosam eum voluptate quae officiis maxime!</p>
         </th>
       </tr>
     </table>
 
-
-
     <table class="row">
       <tr>
-        <th class="large-8 small-12 columns">
+        <th class="small-12 large-8 columns first">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.</p>
         </th>
 
-        <th class="large-4 small-12 columns">
+        <th class="small-12 large-4 columns last">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, sequi! Velit laboriosam aliquam mollitia quas dignissimos possimus ipsa aspernatur quod fugiat maxime, veniam veritatis! Ipsa esse enim sunt voluptatum nostrum.</p>
         </th>
       </tr>
@@ -38,7 +36,7 @@
 
     <table class="row">
       <tr>
-        <th class="large-4 large-offset-8 small-12 columns" style="background: red;">
+        <th class="small-12 large-4 large-offset-8 columns">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure natus culpa optio, saepe expedita repellendus libero reiciendis, sit explicabo consectetur sint, repudiandae, vero iusto laboriosam eum voluptate quae officiis maxime!</p>
         </th>
       </tr>