]> git.ipfire.org Git - thirdparty/foundation/foundation-emails.git/commitdiff
fixed rows to display table
authorTim Hartwick <tdhartwick2@gmail.com>
Thu, 4 Feb 2016 22:12:02 +0000 (14:12 -0800)
committerTim Hartwick <tdhartwick2@gmail.com>
Thu, 4 Feb 2016 22:12:02 +0000 (14:12 -0800)
14 files changed:
scss/ink/components/_grid.scss
testing/src/pages/Old/basic.html [deleted file]
testing/src/pages/Old/block-grid.html [deleted file]
testing/src/pages/Old/grid.html [deleted file]
testing/src/pages/Old/index.html [deleted file]
testing/src/pages/Old/inline-lists.html [deleted file]
testing/src/pages/Old/side-bar.html [deleted file]
testing/src/pages/Old/tim-test.html [deleted file]
testing/src/pages/block-inky.html [new file with mode: 0644]
testing/src/pages/button.html [new file with mode: 0644]
testing/src/pages/grid-inky.html
testing/src/pages/grid.html
testing/src/pages/offset-inky.html [new file with mode: 0644]
testing/src/pages/offset.html [moved from testing/src/pages/Old/offset.html with 83% similarity]

index 0172017b978b2a61d9a4c8076ea7340bcf546a52..c4f8b89478232b9458456490bdf0022dab3f37e5 100755 (executable)
@@ -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 (file)
index 14dfcc1..0000000
+++ /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 (file)
index 5a3a427..0000000
+++ /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 (file)
index c5081fc..0000000
+++ /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 (file)
index 5de4e10..0000000
+++ /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 (file)
index 0ab106d..0000000
+++ /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 (file)
index 2bf6423..0000000
+++ /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 (file)
index ad093a8..0000000
+++ /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 (file)
index 0000000..a9d235f
--- /dev/null
@@ -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 (file)
index 0000000..fb9a5ca
--- /dev/null
@@ -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
index 81ea062ea3eabd571222adf0877996d4c852086d..a198552af0edabf6ee76a2e35ea460da0080fe75 100644 (file)
@@ -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>
index 1a4976e7444dd498ea7fc02b0fab6d5653ea10dc..7727d976b55975e888c976fc9b8e059fa57f0975 100644 (file)
@@ -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>
 
       <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 (file)
index 0000000..cdb40d2
--- /dev/null
@@ -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
similarity index 83%
rename from testing/src/pages/Old/offset.html
rename to testing/src/pages/offset.html
index c5c2f09af91539a4854fdf11b4f9114b7503b1b6..8d1b3b8d2e1c7913f77c21344a070c244f6dcfd1 100644 (file)
@@ -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>
 
     <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>