Tab module documentation complete

docs/v2/DEVLOG.md

@@ -626,3 +626,5 @@
 
 - Added `tab.html` for `tab` module documentation.
 - Basic documentation and syntax explanation of `tab` module.
+- Added documentation for `stacked` `tab`s in `tab` module doc page. Module documentation complete.
+- `playground` cleanup, only `utility` module remains there now.

docs/v2/playground.html

@@ -75,54 +75,7 @@
     </div>
     <!-- Insert your page content here-->
     <main><div class="container" style="padding-top: 20px;">
-                    <h2>Tabs &amp; accordions<small>Present content any way you like</small></h2>
+
-            <p><strong>mini.css</strong> provides you with a very modern tab component, that can easily be used for multiple things, like tabbed navigation, single collapses, accordion collapses and even image carousels. This might sound like a lot to do with one component, but the design behind it allows it to be truly versatile and replace all those components. To use the tab component, simply create a container using a <code>&lt;div&gt;</code> with the <code>.tabs</code> class. Populate it with <code>&lt;input type=&quot;radio&quot;&gt;</code>s, each followed by a linked <code>&lt;label&gt;</code> and another <code>&lt;div&gt;</code> which includes the tab's contents. If you want to create an accordion add the <code>.stacked</code> class to the container. The same thing works for collapses as well. Accordions and collapses can also use <code>&lt;input type=&quot;checkbox&quot;&gt;</code>s instead. Carousels can be created similarly, remember to add images to the inner content <code>&lt;div&gt;</code> and you're good to go. You can see some examples below:</p><br>
-            <div class="tabs stacked">
-              <input type="checkbox" id="collapse" autocomplete="off">
-              <label for="collapse">Single collapse</label>
-              <div>
-                <p>This is some content you can hide and show at will using the above label. Isn't that useful?</p>
-              </div>
-            </div><br>
-            <div class="tabs stacked">
-              <input type="radio" name="accordion" id="a1" autocomplete="off" checked>
-              <label for="a1">Accordion section 1</label>
-              <div>
-                <h3>Section 1 - The amazing versatility of tabs</h3>
-                <p>Yes, this is still based on tabs. Isn't it wonderful how many things you can accomplish using one simple component?</p>
-              </div>              
-              <input type="radio" name="accordion" id="a2" autocomplete="off">
-              <label for="a2">Accordion section 2</label>
-              <div>
-                <h3>Section 2 - How accordions work</h3>
-                <p>Accordions are very similar to collapses. Just add multiple <code>&lt;input type=&quot;radio&quot;&gt;</code>s, along with their content and you are ready to go.</p>
-              </div>
-            </div><br>
-            <div class="tabs">
-              <input type="radio" name="tabdemo" id="tab1" checked>
-              <label for="tab1">Tab 1</label>
-              <div>
-                <h3>Tab 1</h3>
-                <p>This is the first tab's content.</p>
-              </div>
-            </div><br>
-            <div class="tabs">
-              <input type="radio" name="carousel" id="car1" checked>
-              <label for="car1">Image 1</label>
-              <div>
-                <img src="catdemo.jpg" style="height: 240px; width: auto;">
-              </div>
-              <input type="radio" name="carousel" id="car2">
-              <label for="car2">Image 2</label>
-              <div>
-                <img src="catdemo.jpg" style="height: 480px; width: auto">
-              </div>
-              <input type="radio" name="carousel" id="car3">
-              <label for="car3">Image 3</label>
-              <div>
-                <img src="catdemo.jpg" style="height: 720px; width: auto">
-              </div>
-            </div><br>
             <h2>Utilities and Helpers <small>Useful classes for common problems</small></h2> 
             <p>The utilities provided with <strong>mini.css</strong> aim to solve common problems and allow ease of use whenever possible. Some of them are showcased below:</p>
             <p><span class="bordered">Generic border (using black outline and opacity of 0.25)</span>, <span class="bordered rounded">Radial border style 1</span> &amp; <span class="bordered circular">&nbsp;2 </span>.</p>  

docs/v2/tab.html

@@ -281,26 +281,64 @@
                 </div>       
               </div>
               <div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
-                <p></p>
+                <p>Apart from the normal tab layout, you can make your tabs stacked instead, using the <code>.stacked</code> class in your <code>.tabs</code> container element. Stacked tabs are more vesatile, allowing you to use checkboxes and/or radio buttons to implement collapses, accordions and spoilers. Carousel-styled elements can also be displayed in this fashion, if you wish. Remember to use the <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> attribute to make your tabs fully accessible, as before.</p>
                 <h3>Sample code</h3>
-                <pre></pre>
+                <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;
+  &lt;div&gt;
+    &lt;h3&gt;Section 1&lt;/h3&gt;
+    &lt;p&gt;This is the first accordion section's content.&lt;/p&gt;
+  &lt;/div&gt;              
+  &lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a2&quot;aria-hidden=&quot;true&quot;&gt;
+  &lt;label for=&quot;a2&quot; aria-hidden=&quot;true&quot;&gt;Accordion section 2&lt;/label&gt;
+  &lt;div&gt;
+    &lt;h3&gt;Section 2&lt;/h3&gt;
+    &lt;p&gt;This is the second accordion section's content.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class=&quot;tabs stacked&quot;&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;c1&quot; aria-hidden=&quot;true&quot;&gt;
+  &lt;label for=&quot;c1&quot; aria-hidden=&quot;true&quot;&gt;Collapse section 1&lt;/label&gt;
+  &lt;div&gt;
+    &lt;p&gt;This is the first collapse section's content.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;input type=&quot;checkbox&quot; id=&quot;c2&quot; aria-hidden=&quot;true&quot;&gt;
+  &lt;label for=&quot;c2&quot; aria-hidden=&quot;true&quot;&gt;Collapse section 2&lt;/label&gt;
+  &lt;div&gt;
+    &lt;p&gt;This is the second collapse section's content.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
               </div>
             </div>
             <div class="section">
             <h3>Notes</h3>
               <ul>
-                <li></li>
+                <li><code>.stacked</code> tabs can be used with either checkboxes or radio buttons.</li>
-                <li></li>
+                <li>You can mix and match checkboxes and radio buttons, but we suggest you do not do so, unless you think it is necessary for your design.</li>
               </ul>
               <hr>
               <div class="row">
                 <div class="col-sm-12 col-md-6">
-                  <pre><!-- do code --></pre>
+                  <pre>&lt;div class=&quot;tabs stacked&quot;&gt;
-                  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;</p>
+  &lt;input type=&quot;checkbox&quot; id=&quot;c1&quot; aria-hidden=&quot;true&quot;&gt;
+  &lt;label for=&quot;c1&quot; aria-hidden=&quot;true&quot;&gt;Single collapse&lt;/label&gt;
+  &lt;div&gt;
+    &lt;p&gt;This is a singular collapse.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+                  <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can implement single collapses (otherwise known as spoilers), using a <code>.tabs</code><code>.stacked</code> container with only one checkbox-based tab.</p>
                 </div>
                 <div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
-                  <pre><!-- don't code --></pre>
+                  <pre>&lt;div class=&quot;tabs stacked&quot;&gt;
-                  <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;</p>
+  &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;Single accordion section&lt;/label&gt;
+  &lt;div&gt;
+    &lt;p&gt;This accordion section cannot close once opened&lt;/p&gt;
+  &lt;/div&gt;              
+&lt;/div&gt;</pre>
+                  <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid having a single radio-based tab in a <code>.tabs</code><code>.stacked</code> container, as this might result in unexpected behavior.</p>
                 </div>
               </div>
             </div>