Testing horizontal tables

docs/v2/DEVLOG.md

@@ -457,3 +457,8 @@
 - Minor updates to resources, description, title etc, updated `template` as well.
 - Added links for the rest of the docs.
 - Added browser logos to the table of `index`.
+
+## 20161115
+
+- Fixed `Reponsive` in `index`...
+- Tested `table` `horizontal` layout with flexbox.

docs/v2/demo.html

@@ -273,6 +273,44 @@
               </tbody>
             </table>
             <br>
+            <table style="display: flex; flex-direction: row; overflow: auto; border: 0;">
+              <caption style="display: flex; flex-flow: column wrap; flex: 0 1 auto; align-self: center;">Hacker List</caption>
+              <thead style="display: flex; flex-flow: row wrap; flex: 0 0 auto;">
+                <tr style="display: flex; flex-direction: column;">
+                  <th>Name</th>
+                  <th>Surname</th>
+                  <th>Email</th>
+                  <th>Handle</th>
+                </tr>
+              </thead>
+              <tbody style="display: flex; flex-flow: row wrap; flex: 0 0 auto;">
+                <tr style="display: flex; flex-direction: column;">
+                  <td data-label="Name">John</td>
+                  <td data-label="Surname">Smith</td>
+                  <td data-label="Email">johnsmith@mail.com</td>
+                  <td data-label="Handle">SmithereensJohn</td>
+                </tr>
+                <tr style="display: flex; flex-direction: column;">
+                  <td data-label="Name">Lisa</td>
+                  <td data-label="Surname">Cody</td>
+                  <td data-label="Email">codyl@mail.com</td>
+                  <td data-label="Handle">Codyl</td>
+                </tr>
+                <tr style="display: flex; flex-direction: column;">
+                  <td data-label="Name">Max</td>
+                  <td data-label="Surname">Roberts</td>
+                  <td data-label="Email">terminus@mail.com</td>
+                  <td data-label="Handle">T3rm1nu5</td>
+                </tr>
+                <tr style="display: flex; flex-direction: column;">
+                  <td data-label="Name">Adam</td>
+                  <td data-label="Surname">Leeks</td>
+                  <td data-label="Email">leekt@mail.com</td>
+                  <td data-label="Handle">Leekt</td>
+                </tr>
+              </tbody>
+            </table>
+            <br>
             <h3>Forms</h3>
             <p>Forms are inline by default and textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code> and <code>&lt;select&gt;</code> elements have been pre-styled. To make inputs take up more space than their default, simply add something like <code>width=&quot;100%&quot;</code>. You can also utilize the grid system to align forms to your liking. Below are some examples:</p>
             <form>

docs/v2/index.html

@@ -83,7 +83,7 @@
         <div class="col-sm-12 col-md box-centered row">
           <div class="card fluid">
             <div class="section">
-              <h2>Reponsive<small>Think mobile!</small></h2><br>
+              <h2>Responsive<small>Think mobile!</small></h2><br>
               <i class="fa fa-mobile fa-4x" aria-hidden="true"></i>
               <br><br>
               <p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br>