diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 75c5266..5a11be3 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -620,3 +620,8 @@ - Added documentation for `file` upload in the `input_control` module. Docs complete. - Removed `demo.html` as it had outlived its purpose. - `playground.html` cleanup. Moved all the rest of the data from the old `demo` page into it. + + +## 20161210 + +- Added `tab.html` for `tab` module documentation. diff --git a/docs/v2/tab.html b/docs/v2/tab.html new file mode 100644 index 0000000..0c98f98 --- /dev/null +++ b/docs/v2/tab.html @@ -0,0 +1,201 @@ + + + + + + + + + mini.css - Tab + + + + + + + + + +
+
+ Introduction + Modules + Flavors + Customization + Github +
+
+
+
+
+
+ +

mini.css

+ v2.0 +
+
+
+
+ +
+
+
+

Tab

+

The tab module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.

+

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

+ +
+
+
+
+
+
+

Quick overview

+

Spoilers, collapses, accordions, tabs, carousels have been a staple of modern design for quite a long time. All of these elements are implemented using the tab module's single generic container. The tab container replaces all of these design paradigms with one component that is very flexible and responsive in order to let you present your website or app's content any way you like. Tabbed navigation is very easy to implement, while collapse, accordion and carousel components use the stacked architecture of tabs. As usual, the tab container is responsive and accessible, allowing you to deliver your content properly to all devices and users.


+
+
+

Quick start

+

To use the tab module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


+
<meta name="viewport" content="width=device-width, initial-scale=1">

+
+
+
+
+
+
+
+
+

Basic syntax

+
+
+
+ +
+
+

+

Sample code

+

+              
+
+
+

Notes

+
    +
  • +
  • +
+
+
+
+
+

Do: 

+
+
+
+

Don't: 

+
+
+
+
+
+
+
+
+
+
+

Stacked tabs

+
+
+
+ +
+
+

+

Sample code

+

+              
+
+
+

Notes

+
    +
  • +
  • +
+
+
+
+
+

Do: 

+
+
+
+

Don't: 

+
+
+
+
+
+
+
+
+

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

+
+
+
+ + + + \ No newline at end of file