diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index d53a99a..b461afe 100644 --- a/docs/v2/DEVLOG.md +++ b/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. diff --git a/docs/v2/playground.html b/docs/v2/playground.html index 3a1a1dd..000c990 100644 --- a/docs/v2/playground.html +++ b/docs/v2/playground.html @@ -75,54 +75,7 @@
-

Tabs & accordionsPresent content any way you like

-

mini.css 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 <div> with the .tabs class. Populate it with <input type="radio">s, each followed by a linked <label> and another <div> which includes the tab's contents. If you want to create an accordion add the .stacked class to the container. The same thing works for collapses as well. Accordions and collapses can also use <input type="checkbox">s instead. Carousels can be created similarly, remember to add images to the inner content <div> and you're good to go. You can see some examples below:


-
- - -
-

This is some content you can hide and show at will using the above label. Isn't that useful?

-
-

-
- - -
-

Section 1 - The amazing versatility of tabs

-

Yes, this is still based on tabs. Isn't it wonderful how many things you can accomplish using one simple component?

-
- - -
-

Section 2 - How accordions work

-

Accordions are very similar to collapses. Just add multiple <input type="radio">s, along with their content and you are ready to go.

-
-

-
- - -
-

Tab 1

-

This is the first tab's content.

-
-

-
- - -
- -
- - -
- -
- - -
- -
-

+

Utilities and Helpers Useful classes for common problems

The utilities provided with mini.css aim to solve common problems and allow ease of use whenever possible. Some of them are showcased below:

Generic border (using black outline and opacity of 0.25), Radial border style 1 &  2 .

diff --git a/docs/v2/tab.html b/docs/v2/tab.html index 939ae73..6a4cb09 100644 --- a/docs/v2/tab.html +++ b/docs/v2/tab.html @@ -281,26 +281,64 @@
-

+

Apart from the normal tab layout, you can make your tabs stacked instead, using the .stacked class in your .tabs 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 aria-hidden="true" attribute to make your tabs fully accessible, as before.

Sample code

- 

+                
<div class="tabs stacked">
+  <input type="radio" name="accordion" id="a1" checked aria-hidden="true">
+  <label for="a1" aria-hidden="true">Accordion section 1</label>
+  <div>
+    <h3>Section 1</h3>
+    <p>This is the first accordion section's content.</p>
+  </div>              
+  <input type="radio" name="accordion" id="a2"aria-hidden="true">
+  <label for="a2" aria-hidden="true">Accordion section 2</label>
+  <div>
+    <h3>Section 2</h3>
+    <p>This is the second accordion section's content.</p>
+  </div>
+</div>
+
+<div class="tabs stacked">
+  <input type="checkbox" id="c1" aria-hidden="true">
+  <label for="c1" aria-hidden="true">Collapse section 1</label>
+  <div>
+    <p>This is the first collapse section's content.</p>
+  </div>
+  <input type="checkbox" id="c2" aria-hidden="true">
+  <label for="c2" aria-hidden="true">Collapse section 2</label>
+  <div>
+    <p>This is the second collapse section's content.</p>
+  </div>
+</div>

               

             
             

             
Notes

               
               

               

                 

-                  

-                  
Do: 

+                  
<div class="tabs stacked">
+  <input type="checkbox" id="c1" aria-hidden="true">
+  <label for="c1" aria-hidden="true">Single collapse</label>
+  <div>
+    <p>This is a singular collapse.</p>
+  </div>
+</div>

+                  
Do: You can implement single collapses (otherwise known as spoilers), using a .tabs.stacked container with only one checkbox-based tab.

                 

                 

-                  

-                  
Don't: 

+                  
<div class="tabs stacked">
+  <input type="radio" name="accordion" id="a1" checked aria-hidden="true">
+  <label for="a1" aria-hidden="true">Single accordion section</label>
+  <div>
+    <p>This accordion section cannot close once opened</p>
+  </div>              
+</div>

+                  
Don't: Avoid having a single radio-based tab in a .tabs.stacked container, as this might result in unexpected behavior.