Codepen links for parts of quick reference

docs/quick_reference.html

@@ -456,7 +456,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Forms &amp; input <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Forms &amp; input <a href="https://codepen.io/chalarangelo/pen/qqgVKb" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;form&gt;
   &lt;fieldset&gt;
     &lt;legend&gt;Simple form&lt;/legend&gt;
@@ -480,7 +480,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Checkboxes &amp; radio buttons <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Checkboxes &amp; radio buttons <a href="https://codepen.io/chalarangelo/pen/yVZPEZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;input-group&quot;&gt;
   &lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; tabindex=&quot;0&quot;&gt; 
   &lt;label for=&quot;check1&quot;&gt;Checkbox&lt;/label&gt;
@@ -500,7 +500,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Buttons &amp; button groups <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Buttons &amp; button groups <a href="https://codepen.io/chalarangelo/pen/xRMPJG" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;button&gt;Default button&lt;/button&gt;
 &lt;input type=&quot;button&quot; class=&quot;primary&quot; value=&quot;Primary button&quot;&gt;
 &lt;input type=&quot;reset&quot; class=&quot;secondary&quot; value=&quot;Secondary button&quot;&gt;
@@ -527,7 +527,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>File upload buttons <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>File upload buttons <a href="https://codepen.io/chalarangelo/pen/NbowBz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;input type=&quot;file&quot; id=&quot;file-input&quot;&gt;
 &lt;label for=&quot;file-input&quot; class=&quot;button&quot;&gt;Upload file...&lt;/label&gt;</pre>
               </div>
@@ -549,7 +549,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Basic syntax &amp; responsiveness <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Basic syntax &amp; responsiveness <a href="https://codepen.io/chalarangelo/pen/XNOzBv" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;table&gt;
   &lt;caption&gt;People&lt;/caption&gt;
   &lt;thead&gt;
@@ -587,7 +587,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Horizontal tables <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Horizontal tables <a href="https://codepen.io/chalarangelo/pen/vybWzx" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;table class=&quot;horizontal&quot;&gt;
   &lt;caption&gt;People&lt;/caption&gt;
   &lt;thead&gt;
@@ -625,7 +625,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Table variants &amp; matrices <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Table variants &amp; matrices <a href="https://codepen.io/chalarangelo/pen/qqgVQZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;table class=&quot;preset&quot;&gt;
   &lt;caption&gt;Star Wars Character Alignment Table&lt;/caption&gt;
   &lt;tbody&gt;
@@ -664,9 +664,6 @@
   &lt;tbody&gt;
     <span class="fore-primary">&lt;!-- ... --&gt;</span>
   &lt;/tbody&gt;
-  &lt;tfoot&gt;
-    <span class="fore-primary">&lt;!-- ... --&gt;</span>
-  &lt;/tfoot&gt;
 &lt;/table&gt;</pre>
               </div>
               <div class="col-sm-12 col-md-6">
@@ -687,7 +684,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Basic syntax <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Basic syntax <a href="https://codepen.io/chalarangelo/pen/NbowEB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;row&quot;&gt;
   &lt;div class=&quot;card&quot;&gt;
     &lt;div class=&quot;section&quot;&gt;
@@ -712,7 +709,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Sections &amp; media <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Sections &amp; media <a href="https://codepen.io/chalarangelo/pen/oYmoJz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;card&quot;&gt;
   &lt;img src=&quot;...&quot; class=&quot;section media&quot;&gt;
   &lt;div class=&quot;section double-padded&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
@@ -733,7 +730,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Card sizing &amp; fluidity <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Card sizing &amp; fluidity <a href="https://codepen.io/chalarangelo/pen/mOvqaM" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;card small&quot;&gt;
   &lt;div class=&quot;section&quot;&gt;
     &lt;p&gt;Content&lt;/p&gt;
@@ -772,7 +769,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Basic syntax <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Basic syntax <a href="https://codepen.io/chalarangelo/pen/QGYOzZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;tabs&quot;&gt;
   &lt;input type=&quot;radio&quot; name=&quot;tab-group&quot; id=&quot;tab1&quot; checked aria-hidden=&quot;true&quot;&gt;
   &lt;label for=&quot;tab1&quot; aria-hidden=&quot;true&quot;&gt;Tab 1&lt;/label&gt;
@@ -803,7 +800,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Stacked tabs <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Stacked tabs <a href="https://codepen.io/chalarangelo/pen/MbLOZd" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;tabs stacked&quot;&gt;
   &lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a1&quot; checked aria-hidden=&quot;true&quot;&gt;
   &lt;label for=&quot;a1&quot; aria-hidden=&quot;true&quot;&gt;Accordion section 1&lt;/label&gt;
@@ -850,7 +847,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Text highlighting <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Text highlighting <a href="https://codepen.io/chalarangelo/pen/gLqXqo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;mark&gt;primary&lt;/mark&gt;
 &lt;mark class=&quot;secondary&quot;&gt;secondary&lt;/mark&gt;
 &lt;mark class=&quot;tertiary&quot;&gt;tertiary&lt;/mark&gt;
@@ -866,7 +863,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Alerts <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Alerts <a href="https://codepen.io/chalarangelo/pen/bBzYzj" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;alert&quot;&gt;
   &lt;h3&gt;This is an alert&lt;/h3&gt;
   &lt;p&gt;Make sure you read this!&lt;/p&gt;
@@ -889,7 +886,7 @@
             </div>
             <div class="section row">
               <div class="col-sm-12 col-md-6 col-md-first col-sm-first">
-                <h3>Animated alerts <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
+                <h3>Animated alerts <a href="https://codepen.io/chalarangelo/pen/NbowoL" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
                 <pre>&lt;div class=&quot;alert animated&quot;&gt;
   &lt;h3&gt;Animated alert&lt;/h3&gt;
 &lt;/div&gt;

docs/table.html

@@ -267,8 +267,8 @@
                 <div class="col-sm-12 col-md-6">
                   <pre>&lt;tr&gt;
   &lt;td&gt;Chad&lt;/td&gt;
-  &lt;&gt;Wilberts&lt;/td&gt;
-  &lt;&gt;MrOne&lt;/td&gt;
+  &lt;td&gt;Wilberts&lt;/td&gt;
+  &lt;td&gt;MrOne&lt;/td&gt;
 &lt;/tr&gt;</pre>
                   <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Remember to always add a <code>data-label</code> attribute to your <code>&lt;td&gt;</code> elements, as the table's card view is very dependent on them to display properly. <code>&lt;th&gt;</code> elements, however, do not require or utilize this attribute.</p>
                 </div>
@@ -494,9 +494,6 @@
   &lt;tbody&gt;
     <span class="fore-primary">&lt;!-- ... --&gt;</span>
   &lt;/tbody&gt;
-  &lt;tfoot&gt;
-    <span class="fore-primary">&lt;!-- ... --&gt;</span>
-  &lt;/tfoot&gt;
 &lt;/table&gt;</pre></div></div></div></div><br>
               </div>
             </div>

docs/v2/DEVLOG.md

@@ -673,3 +673,7 @@
 ## 20161219
 
 - Added code to `quick reference` from all modules. Codepens not done yet.
+- Typo fixes and changes in `table`.
+- Created codepens until the end of `contextual`, `progress` and `utility` will be done later today.
+- *TODO* Notes for `quick reference`.
+- *TODO* Readme, demo image etc.