0ct0pu5/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Documentation update

Browse source 
Added certain helpful indicators as to the existence of the React/Preact libraries, updated docs just slightly.
This commit is contained in:
Angelos Chalaris 2017-06-14 12:23:29 +03:00
parent e9aec22ea7
commit bb5a16805b
29 changed files with 1071 additions and 1071 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -18,7 +18,7 @@ You have 4 options when it comes to setting up **mini.css**:
3. [Use Rawgit](#method-3-use-rawgit)
4. [Use cdnjs](#method-4-use-cdnjs-preferred-for-older-releases) (preferred for older releases)
For instructions on how to use, best practices, templates and other usage information, please visit the framework's [documentation](https://chalarangelo.github.io/mini.css/modules.html).
For instructions on how to use, best practices, templates and other usage information, please visit the framework's [documentation](http://minicss.org/modules).
#### Method 1: Use a package manager (recommended)

96
docs/card.html
View file

@ -28,54 +28,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10" id="col"><main>
<div class="row" style="padding-top: 40px;" id="card-title">
@ -90,11 +90,11 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p style="text-align: justify;">The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid.html"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
<p style="text-align: justify;">The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>
<p style="text-align: justify;">To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <a href="grid.html"><strong>grid</strong></a> module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<p style="text-align: justify;">To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <a href="grid"><strong>grid</strong></a> module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <code>&lt;head&gt;</code> to utilize the viewport meta tag:</p>
<pre>&lt;<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">&quot;viewport&quot;</span> <span class="fore-secondary">content</span>=<span class="fore-primary">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</pre><br>
</div>
</div>
@ -117,7 +117,7 @@
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
<p style="text-align: justify;">To start using cards in your layout, you need to be somewhat familiar with the <a href="grid.html"><strong>grid</strong></a> module, so if you aren't, take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:</p>
<p style="text-align: justify;">To start using cards in your layout, you need to be somewhat familiar with the <a href="grid"><strong>grid</strong></a> module, so if you aren't, take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:</p>
<ol style="text-align: justify;">
<li>At the outermost level of the card layout syntax is a <code>.row</code>, which serves as a wrapper for all the cards inside it.</li>
<li>Inside the <code>.row</code>, cards are defined as <code>&lt;div&gt;</code> elements of the <code>.card</code> class.</li>
@ -248,7 +248,7 @@
<li>The <code>.media</code> class might not be well supported in older browsers, especially legacy versions of Internet Explorer.</li>
<li>Due to the <code>.media</code> class using <a href="http://caniuse.com/#feat=object-fit"><code>object-fit</code></a>, you might want to use a polyfill for better browser support, especially if you are targeting Microsoft browsers. We recommend <a href="https://github.com/bfred-it/object-fit-images">this one</a> for images and <a href="https://github.com/jonathantneal/fitie">this one</a> for videos.</li>
<li>Depending on the source website, some embedded videos might not display properly inside a <code>.media</code> section.</li>
<li>The <code>.media</code> class has a preset size of <code>height: 200px</code>. If you want to customize this, you should check the <a href="customization.html">customization page</a> for instructions.</li>
<li>The <code>.media</code> class has a preset size of <code>height: 200px</code>. If you want to customize this, you should check the <a href="customization">customization page</a> for instructions.</li>
</ul>
</div>
</div>
@ -363,7 +363,7 @@
<div class="section">
<h3>Notes</h3>
<ul style="text-align: justify;">
<li>If you want more color variants for your cards, check out the <a href="customization.html">customization</a> page.</li>
<li>If you want more color variants for your cards, check out the <a href="customization">customization</a> page.</li>
</ul><hr>
<div class="row">
<div class="col-sm-12"><pre>&lt;div class=&quot;card warning errors&quot;&gt;
@ -380,7 +380,7 @@
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>

92
docs/contextual.html
View file

@ -31,54 +31,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="contextual-title">
@ -186,7 +186,7 @@
<h3>Notes</h3>
<ul>
<li>Toast elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li>
<li>If you want to create your own color or size variants for toast messages, check out the <a href="customization.html">customization</a> page.</li>
<li>If you want to create your own color or size variants for toast messages, check out the <a href="customization">customization</a> page.</li>
</ul><hr>
<div class="row">
<div class="col-sm-12">
@ -220,7 +220,7 @@
<h3>Notes</h3>
<ul style="text-align:justify">
<li>Tooltips are built to be accessible and should display properly on screenreaders.</li>
<li>If you are not satisfied with the default tooltip colors, please check out the <a href="customization.html">customization page</a> for instuctions on how to create your own tooltip variants.</li>
<li>If you are not satisfied with the default tooltip colors, please check out the <a href="customization">customization page</a> for instuctions on how to create your own tooltip variants.</li>
<li>Remember to always add the <code><span class="fore-secondary">aria-label</span></code> attribute, otherwise your tooltip will not have any text to show.</li>
</ul>
</div>
@ -266,7 +266,7 @@
<div class="section">
<h3>Notes</h3>
<ul style="text-align: justify;">
<li>You can use any styles you want from the <strong><a href="card.html">card</a></strong> module to create different dialogs based on context (e.g. alerts, warnings etc.).</li>
<li>You can use any styles you want from the <strong><a href="card">card</a></strong> module to create different dialogs based on context (e.g. alerts, warnings etc.).</li>
<li>Remember to add a <code>&lt;label&gt;</code> linked to your modal dialog's <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> or use Javascript to alter its state, otherwise users will not be able to close the dialog.</li>
<li>You can place your modal dialog anywhere on your page, as long as the structure is not altered. You can also toggle it from anywhere on a page.</li>
</ul><hr>
@ -300,7 +300,7 @@
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>

88
docs/core.html
View file

@ -28,54 +28,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="core-title">
@ -119,7 +119,7 @@
<div class="section">
<h3>Notes</h3>
<ul style="text-align:justify">
<li>Fluid typography is also included, but not enabled by default. If you want to try it out, check out the out the <a href="customization.html">customization</a> page.</li>
<li>Fluid typography is also included, but not enabled by default. If you want to try it out, check out the out the <a href="customization">customization</a> page.</li>
</ul>
</div>
</div>
@ -246,7 +246,7 @@
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>

84
docs/customization/card.html
View file

@ -30,52 +30,52 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="card-title">
@ -89,7 +89,7 @@
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
<p style="text-align:justify">The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid.html"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
<p style="text-align:justify">The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
</div>
<div class="section">
<h2>Quick start</h2>
@ -315,7 +315,7 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>

82
docs/customization/contextual.html
View file

@ -29,52 +29,52 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="contextual-title">
@ -575,7 +575,7 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>

82
docs/customization/core.html
View file

@ -29,52 +29,52 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="core-title">
@ -517,7 +517,7 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>

82
docs/customization/grid.html
View file

@ -31,52 +31,52 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="grid-title">
@ -208,7 +208,7 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>

82
docs/customization/index.html
View file

@ -28,58 +28,58 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;">
<div class="col-sm-12">
<h1>Customization</h1>
<p style="text-align:justify"><strong>mini.css</strong> is built in such a way that customization is really simple. You could try out one of the <a href="../flavors.html">pre-defined flavors</a>, if you want, in order to get used to the framework and build something quickly and easily. However, many projects require custom styles and color palettes, which is when you need to get your hands dirty and start creating your own flavor by customizing an existing one and using mixins and variables to create your own, unique style for your brand or product. This page, along with the rest of the <strong>Customization</strong> section is aimed at developers who want to tweak the code provided with <strong>mini.css</strong> to create their own flavors for their projects, as well as active maintainers of the framework and people who just want to understand the inner workings of the codebase.</p>
<p style="text-align:justify"><strong>mini.css</strong> is built in such a way that customization is really simple. You could try out one of the <a href="../flavors">pre-defined flavors</a>, if you want, in order to get used to the framework and build something quickly and easily. However, many projects require custom styles and color palettes, which is when you need to get your hands dirty and start creating your own flavor by customizing an existing one and using mixins and variables to create your own, unique style for your brand or product. This page, along with the rest of the <strong>Customization</strong> section is aimed at developers who want to tweak the code provided with <strong>mini.css</strong> to create their own flavors for their projects, as well as active maintainers of the framework and people who just want to understand the inner workings of the codebase.</p>
<p style="text-align:justify">Use the menu to quickly jump to the documentation of any module that you want to check out. We strongly recommend, however, that you read the general information provided in this page before you start exploring the modules' code, especially if you are not familiar with the way <strong>mini.css</strong> is structured.</p><br>
</div>
<div class="col-sm-12">

82
docs/customization/input_control.html
View file

@ -30,52 +30,52 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="input-control-title">
@ -655,7 +655,7 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>

82
docs/customization/navigation.html
View file

@ -29,52 +29,52 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="navigation-title">
@ -436,7 +436,7 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>

82
docs/customization/progress.html
View file

@ -31,52 +31,52 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="progress-title">
@ -381,7 +381,7 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>

82
docs/customization/tab.html
View file

@ -29,52 +29,52 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="tab-title">
@ -191,7 +191,7 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>

82
docs/customization/table.html
View file

@ -29,52 +29,52 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="table-title">
@ -222,7 +222,7 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>

82
docs/customization/utility.html
View file

@ -29,52 +29,52 @@
</head>
<body>
<header class="sticky">
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
<a href="../index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core.html#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
<a href="core#typography-headings" class="sublink-1">Typography &amp; headings</a>
<a href="core#common-elements" class="sublink-1">Common elements &amp; fixes</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#classes-breakpoints" class="sublink-1">Classes &amp; breakpoints</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#table-styling" class="sublink-1">Table styling</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers &amp; legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border &amp; shadow mixins</a>
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing &amp; spacing mixins</a>
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="utility-title">
@ -571,7 +571,7 @@
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</main></div></div></div>

20
docs/flavors.html
View file

@ -25,17 +25,17 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<!-- Insert your page content here-->
<main><div class="container">
@ -50,7 +50,7 @@
<li class="card fluid">
<h2 class="section double-padded">Default <small>mini-default</small></h2>
<pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
<p class="section double-padded" style="text-align:justify">The default flavor for <strong>mini.css</strong> uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners and light border colors. All of the colors used in this flavor are loosely based on <a href="https://material.google.com/style/color.html">Google's Material design color palette</a>.</p>
<p class="section double-padded" style="text-align:justify">The default flavor for <strong>mini.css</strong> uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners and light border colors. All of the colors used in this flavor are loosely based on <a href="https://material.google.com/style/color">Google's Material design color palette</a>.</p>
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
<p><strong>Size:</strong> 7 KB</p>
@ -59,7 +59,7 @@
<li class="card fluid">
<h2 class="section double-padded">Dark <a href="http://codepen.io/chalarangelo/pen/mmWrZz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a><small>mini-dark</small></h2>
<pre class="section double-padded" style="border-left:0; box-shadow: none;">&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-dark.min.css&quot;</span>&gt;</pre>
<p class="section double-padded" style="text-align:justify">The dark version of the default flavor, Dark uses a dark gray background with light gray foreground color. All modules are the same as in the default flavor, but with a dark palette, loosely based on <a href="https://material.google.com/style/color.html">Google's Material design color palette</a>.</p>
<p class="section double-padded" style="text-align:justify">The dark version of the default flavor, Dark uses a dark gray background with light gray foreground color. All modules are the same as in the default flavor, but with a dark palette, loosely based on <a href="https://material.google.com/style/color">Google's Material design color palette</a>.</p>
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
<p><strong>Size:</strong> 7 KB</p>
@ -93,7 +93,7 @@
</div>
</li>
</ul>
<p style="text-align:justify">If you would rather modify one of the pre-defined flavors or create your own, check out our <a href="customization.html">customization</a> page for instructions.</p>
<p style="text-align:justify">If you would rather modify one of the pre-defined flavors or create your own, check out our <a href="customization">customization</a> page for instructions.</p>
</div>
</div>
</div></main>

86
docs/grid.html
View file

@ -30,54 +30,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10" id="col"><main>
<div class="row" style="padding-top: 40px;" id="grid-title">
@ -683,7 +683,7 @@
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>

55
docs/index.html
View file

@ -62,17 +62,17 @@
<small id="codename">Fermion</small>
</div>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<!-- Insert your page content here-->
<main><div class="container responsive-padding">
@ -116,7 +116,7 @@
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">yarn add</span> <span class="fore-primary">mini.css</span></pre></div>
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
</div>
<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors.html">Flavor</a> and use it for your project.</p>
<p>After downloading <strong>mini.css</strong>, pick a <a href="flavors">Flavor</a> and use it for your project.</p>
<br/>
<p style="text-align:justify">Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css&quot;</span>&gt;</pre>
@ -148,21 +148,23 @@
<p style="text-align: justify;"><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
<br/>
<h3>What exactly does mini.css provide?</h3>
<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules.html">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
<p style="text-align: justify;">Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. <strong>mini.css</strong> provides a handful of very powerful <a href="modules">modules</a> that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:</p>
<ul>
<li><a href="core.html">Core</a> - Basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, typography and common textual element styling</li>
<li><a href="grid.html">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
<li><a href="navigation.html">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
<li><a href="input_control.html">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
<li><a href="table.html">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
<li><a href="card.html">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
<li><a href="tab.html">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
<li><a href="contextual.html">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
<li><a href="progress.html">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
<li><a href="utility.html">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
</ul><br/>
<li><a href="core">Core</a> - Basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, typography and common textual element styling</li>
<li><a href="grid">Grid</a> - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>)</li>
<li><a href="navigation">Navigation</a> - Common navigational elements such as headers, footers and navigation bars</li>
<li><a href="input_control">Input Control</a> - Form, input element, checkbox, radio button and button styling</li>
<li><a href="table">Table</a> - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices</li>
<li><a href="card">Card</a> - Sleek, modern general-purpose content containers, media embedding</li>
<li><a href="tab">Tab</a> - Modern, responsive tabs, accordions and collapses</li>
<li><a href="contextual">Contextual</a> - Content highlight element styling, elegant alerts and accessible tooltips</li>
<li><a href="progress">Progress</a> - Modern progress bar styling and spinning progress indicators</li>
<li><a href="utility">Utility</a> - Utilities, visibility helper classes, responsive sizing and breadcrumbs</li>
</ul>
<p style="text-align: justify;">While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries <a href="https://chalarangelo.github.io/react-mini.css/">here</a>!</p>
<br/>
<h3>How do I customize mini.css?</h3>
<p style="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors.html">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <a href="customization/index.html">customization</a> section.</p><br/>
<p style="text-align: justify;"><strong>mini.css</strong> allows you to easily customize your designs, using <a href="flavors">Flavors</a>, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the <a href="customization">customization</a> section.</p><br/>
</div>
<div class="col-sm col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 row">
<div class="card fluid" style=" width: 100%;">
@ -177,11 +179,12 @@
<h2>Getting started</h2>
<p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>
<ul>
<li>For a quick guide on getting started, you might wanna take a look at the available <a href="modules.html">modules</a> list and the tutorials provided for each one!</li>
<li>To get you started even faster, we have created a handful of <a href="templates.html">templates</a> that might fit your needs!</li>
<li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference.html">quick reference</a> page!</li>
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors.html">flavors</a>. See which one of them better suits your needs!</li>
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization.html">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
<li>For a quick guide on getting started, you might want to take a look at the available <a href="modules">modules</a> list and the tutorials provided for each one!</li>
<li>To get you started even faster, we have created a handful of <a href="templates">templates</a> that might fit your needs!</li>
<li>If you are familiar with <strong>mini.css</strong> and want a cheat sheet or quick reference guide, check the <a href="quick_reference">quick reference</a> page!</li>
<li>If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our <a href="https://github.com/Chalarangelo/react-mini.css">React &amp; Preact Libraries</a>, which will help you get started creating all kinds of custom components based on <strong>mini.css</strong>.
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors">flavors</a>. See which one of them better suits your needs!</li>
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
<li>Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the <a href="https://github.com/Chalarangelo/mini.css">Github repository</a> to find out more.</li>
</ul>
</div>

92
docs/input_control.html
View file

@ -30,54 +30,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="input-control-title">
@ -169,7 +169,7 @@
</div>
<div class="col-sm-12 col-sm-first col-lg-8 col-md-normal">
<p style="text-align: justify;">Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <code>&lt;form&gt;</code> element and add your <code>&lt;input&gt;</code> elements inside. Link them to <code>&lt;label&gt;</code> elements for ease of access and you are pretty much set. We highly recommend using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements to annotate your forms as well, but you can skip them if you wish.</p>
<p style="text-align: justify;">Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them or you can align them vertically by adding the <code>.vertical</code> class. Finally, if you want to create aligned forms with a preset layout, you can utilize the <a href="grid.html"><strong>grid</strong></a> module's rows and columns.</p>
<p style="text-align: justify;">Forms are inline by default. Use the <code>.input-group</code> class on a <code>&lt;div&gt;</code> wrapping inside it an <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> pair to make sure they always display together in one line. You can make your <code>.input-group</code>s respond to viewport changes, by adding the <code>.fluid</code> class to them or you can align them vertically by adding the <code>.vertical</code> class. Finally, if you want to create aligned forms with a preset layout, you can utilize the <a href="grid"><strong>grid</strong></a> module's rows and columns.</p>
<h3>Sample code</h3>
<pre>&lt;form&gt;
&lt;fieldset&gt;
@ -406,7 +406,7 @@
<div class="section">
<h3>Notes</h3>
<ul style="text-align: justify;">
<li>You can create your own color variants for the <code>.switch</code> component. For more information, check out the <a href="customization.html">customization page</a>.</li>
<li>You can create your own color variants for the <code>.switch</code> component. For more information, check out the <a href="customization">customization page</a>.</li>
</ul><hr>
<div class="row">
<div class="col-sm-12">
@ -467,7 +467,7 @@
<div class="section">
<h3>Notes</h3>
<ul style="text-align: justify;">
<li>If you want more color or size variants for your buttons, check out the <a href="customization.html">customization</a> page.</li>
<li>If you want more color or size variants for your buttons, check out the <a href="customization">customization</a> page.</li>
<li>The <code>.button-group</code> component is compatible with modern browsers, but might not display properly in older browsers.</li>
<li><code>.button-group</code>s will display as a horizontal container with all their buttons in one row on medium-sized and larger displays, however they will collapse into a column view for smaller displays.</li>
</ul><hr>
@ -545,7 +545,7 @@
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>

1
docs/mini-logo.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="401px" height="520px" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="239 62 131 170" preserveAspectRatio="xMidYMid meet" ><rect id="svgEditorBackground" x="0" y="0" width="1160" height="520" style="fill: none; stroke: none;"/><g id="e605_group" transform="matrix(1.2583, 0, 0, 1.2583, -50.238, -27.3693)"><circle id="e401_circle" cx="300.899" cy="92.3735" style="stroke-width: 6px;" stroke="white" r="10.0499" fill="white" transform="matrix(0.837071, 0, 0, 0.837071, 46.4308, 12.3787)"/><path d="M281.412,149.35 c-13.5,23.5 23,37 21.5,-22.5" style="fill: none; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round;" stroke="white" id="e402_arc3" transform="matrix(1.38342, 0, 0, 1.38342, -117.247, -48.1062)"/></g><g id="e630_group" transform="matrix(1.2583, 0, 0, 1.2583, -50.238, -27.3693)"><path d="M299,90 c-65,-12 -87,55 2.5,37.5" style="fill: none; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: miter;" stroke="white" id="e631_arc3"/></g></svg>
Side by side

Before

Width:  |  Height:  |  Size: 1 KiB

194
docs/modules.html
View file

@ -23,54 +23,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;">
@ -84,25 +84,25 @@
<div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-font fa-fw" aria-hidden="true"></i></mark>&nbsp;Core</h2>
<div class="section box-left"><p style="text-align: justify;">The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like. More specifically, the <strong>core</strong> module contains:</p><ul>
<li><a href="core.html#typography" class="sublink-1">General typography rules</a></li>
<li><a href="core.html#headings" class="sublink-1">Styling for headings</a></li>
<li><a href="core.html#common-textual-elements" class="sublink-1">Styling for common textual elements</a></li>
<li><a href="core.html#lists" class="sublink-1">Styling for lists</a></li>
<li><a href="core.html#images-captions" class="sublink-1">Rules for image responsiveness and captions</a></li>
</ul></div><a href="core.html" class="button section">See more</a>
<li><a href="core#typography" class="sublink-1">General typography rules</a></li>
<li><a href="core#headings" class="sublink-1">Styling for headings</a></li>
<li><a href="core#common-textual-elements" class="sublink-1">Styling for common textual elements</a></li>
<li><a href="core#lists" class="sublink-1">Styling for lists</a></li>
<li><a href="core#images-captions" class="sublink-1">Rules for image responsiveness and captions</a></li>
</ul></div><a href="core" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-lg-6 row">
<div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></mark>&nbsp;Grid</h2>
<div class="section box-left"><p style="text-align: justify;">The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens. More specifically, the <strong>grid</strong> module contains:</p><ul>
<li><a href="grid.html#basic-layout" class="sublink-1">Containers, rows and columns for layout</a></li>
<li><a href="grid.html#screen-specific-layout" class="sublink-1">Classes for defining screen-specific layouts</a></li>
<li><a href="grid.html#predefined-layout" class="sublink-1">Classes for predefined layouts</a></li>
<li><a href="grid.html#column-offset" class="sublink-1">Classes for content offsetting</a></li>
<li><a href="grid.html#column-reorder" class="sublink-1">Classes for content reordering</a></li>
<li><a href="grid.html#media-object" class="sublink-1">Layout examples for implementing the media object pattern</a></li>
</ul></div><a href="grid.html" class="button section">See more</a>
<li><a href="grid#basic-layout" class="sublink-1">Containers, rows and columns for layout</a></li>
<li><a href="grid#screen-specific-layout" class="sublink-1">Classes for defining screen-specific layouts</a></li>
<li><a href="grid#predefined-layout" class="sublink-1">Classes for predefined layouts</a></li>
<li><a href="grid#column-offset" class="sublink-1">Classes for content offsetting</a></li>
<li><a href="grid#column-reorder" class="sublink-1">Classes for content reordering</a></li>
<li><a href="grid#media-object" class="sublink-1">Layout examples for implementing the media object pattern</a></li>
</ul></div><a href="grid" class="button section">See more</a>
</div>
</div>
</div>
@ -111,24 +111,24 @@
<div class="card fluid">
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Input Control</h2>
<div class="section box-left"><p style="text-align: justify;">The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way. More specifically, the <strong>input_control</strong> module contains:</p><ul>
<li><a href="input_control.html#forms-input" class="sublink-1">Styling for forms and input elements</a></li>
<li><a href="input_control.html#checkbox-radio" class="sublink-1">Styling for checkboxes and radio buttons</a></li>
<li><a href="input_control.html#buttons" class="sublink-1">Styling and grouping classes for buttons</a></li>
<li><a href="input_control.html#switches" class="sublink-1">Classes for creating switches</a></li>
<li><a href="input_control.html#file-upload" class="sublink-1">Workarounds for styling file upload buttons</a></li>
</ul></div><a href="input_control.html" class="button section">See more</a>
<li><a href="input_control#forms-input" class="sublink-1">Styling for forms and input elements</a></li>
<li><a href="input_control#checkbox-radio" class="sublink-1">Styling for checkboxes and radio buttons</a></li>
<li><a href="input_control#buttons" class="sublink-1">Styling and grouping classes for buttons</a></li>
<li><a href="input_control#switches" class="sublink-1">Classes for creating switches</a></li>
<li><a href="input_control#file-upload" class="sublink-1">Workarounds for styling file upload buttons</a></li>
</ul></div><a href="input_control" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-lg-6 row">
<div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark>&nbsp;Navigation</h2>
<div class="section box-left"><p style="text-align: justify;">The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation menus. More specifically, the <strong>navigation</strong> module contains:</p><ul>
<li><a href="navigation.html#header" class="sublink-1">Styling for headers, logos and header links</a></li>
<li><a href="navigation.html#navigation-bar" class="sublink-1">Styling for navigation bars</a></li>
<li><a href="navigation.html#drawer" class="sublink-1">Classes for creating responsive drawers</a></li>
<li><a href="navigation.html#footer" class="sublink-1">Styling for footers</a></li>
<li><a href="navigation.html#sticky" class="sublink-1">Classes for making headers and footers sticky</a></li>
</ul></div><a href="navigation.html" class="button section">See more</a>
<li><a href="navigation#header" class="sublink-1">Styling for headers, logos and header links</a></li>
<li><a href="navigation#navigation-bar" class="sublink-1">Styling for navigation bars</a></li>
<li><a href="navigation#drawer" class="sublink-1">Classes for creating responsive drawers</a></li>
<li><a href="navigation#footer" class="sublink-1">Styling for footers</a></li>
<li><a href="navigation#sticky" class="sublink-1">Classes for making headers and footers sticky</a></li>
</ul></div><a href="navigation" class="button section">See more</a>
</div>
</div>
</div>
@ -137,22 +137,22 @@
<div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-table fa-fw" aria-hidden="true"></i></mark>&nbsp;Table</h2>
<div class="section box-left"><p style="text-align: justify;">The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view. More specifically, the <strong>table</strong> module contains:</p><ul>
<li><a href="table.html#syntax-responsiveness" class="sublink-1">Styling for tables and built-in responsiveness</a></li>
<li><a href="table.html#scrollable-tables" class="sublink-1">Classes for creating scrollable tables</a></li>
<li><a href="table.html#horizontal-tables" class="sublink-1">Classes for creating horizontal tables</a></li>
<li><a href="table.html#variants-matrices" class="sublink-1">Classes for creating table variants and matrices</a></li>
</ul></div><a href="table.html" class="button section">See more</a>
<li><a href="table#syntax-responsiveness" class="sublink-1">Styling for tables and built-in responsiveness</a></li>
<li><a href="table#scrollable-tables" class="sublink-1">Classes for creating scrollable tables</a></li>
<li><a href="table#horizontal-tables" class="sublink-1">Classes for creating horizontal tables</a></li>
<li><a href="table#variants-matrices" class="sublink-1">Classes for creating table variants and matrices</a></li>
</ul></div><a href="table" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-lg-6 row">
<div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Card</h2>
<div class="section box-left"><p style="text-align: justify;">The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly. More specifically, the <strong>card</strong> module contains:</p><ul>
<li><a href="card.html#basic-syntax" class="sublink-1">Classes for creating card-based layouts</a></li>
<li><a href="card.html#sections-media" class="sublink-1">Classes for creating card sections and adding media</a></li>
<li><a href="card.html#sizing-fluidity" class="sublink-1">Classes for creating card variants and making cards fluid</a></li>
<li><a href="card.html#color-variants" class="sublink-1">Classes for creating card color variants</a></li>
</ul></div><a href="card.html" class="button section">See more</a>
<li><a href="card#basic-syntax" class="sublink-1">Classes for creating card-based layouts</a></li>
<li><a href="card#sections-media" class="sublink-1">Classes for creating card sections and adding media</a></li>
<li><a href="card#sizing-fluidity" class="sublink-1">Classes for creating card variants and making cards fluid</a></li>
<li><a href="card#color-variants" class="sublink-1">Classes for creating card color variants</a></li>
</ul></div><a href="card" class="button section">See more</a>
</div>
</div>
</div>
@ -161,20 +161,20 @@
<div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Tab</h2>
<div class="section box-left"><p style="text-align: justify;">The <strong>tab</strong> 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. More specifically, the <strong>tab</strong> module contains:</p><ul>
<li><a href="tab.html#basic-syntax" class="sublink-1">Classes for creating tab-based layouts</a></li>
<li><a href="tab.html#stacked-tabs" class="sublink-1">Classes for creating stacked tabs, accordions and collapses</a></li>
</ul></div><a href="tab.html" class="button section">See more</a>
<li><a href="tab#basic-syntax" class="sublink-1">Classes for creating tab-based layouts</a></li>
<li><a href="tab#stacked-tabs" class="sublink-1">Classes for creating stacked tabs, accordions and collapses</a></li>
</ul></div><a href="tab" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-lg-6 row">
<div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark>&nbsp;Contextual</h2>
<div class="section box-left"><p style="text-align: justify;">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts, tooltips and modals are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily. More specifically, the <strong>contextual</strong> module contains:</p><ul>
<li><a href="contextual.html#text-highlighting" class="sublink-1">Styling for highlighted text</a></li>
<li><a href="contextual.html#toasts" class="sublink-1">Classes for creating toast messages</a></li>
<li><a href="contextual.html#tooltips" class="sublink-1">Classes for creating hover-over tooltips</a></li>
<li><a href="contextual.html#modals" class="sublink-1">Classes for creating modal dialogs</a></li>
</ul></div><a href="contextual.html" class="button section">See more</a>
<li><a href="contextual#text-highlighting" class="sublink-1">Styling for highlighted text</a></li>
<li><a href="contextual#toasts" class="sublink-1">Classes for creating toast messages</a></li>
<li><a href="contextual#tooltips" class="sublink-1">Classes for creating hover-over tooltips</a></li>
<li><a href="contextual#modals" class="sublink-1">Classes for creating modal dialogs</a></li>
</ul></div><a href="contextual" class="button section">See more</a>
</div>
</div>
</div>
@ -183,24 +183,24 @@
<div class="card fluid">
<h2 class="section"><mark class="tertiary"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></mark>&nbsp;Progress</h2>
<div class="section box-left"><p style="text-align: justify;">The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading. More specifically, the <strong>progress</strong> module contains:</p><ul>
<li><a href="progress.html#basic-progress-bar" class="sublink-1">Styling for progress bars</a></li>
<li><a href="progress.html#progress-variants" class="sublink-1">Classes for creating progress bar variants</a></li>
<li><a href="progress.html#donut-spinner" class="sublink-1">Classes for creating donut spinners</a></li>
<li><a href="progress.html#spinner-variants" class="sublink-1">Classes for creating donut spinner variants</a></li>
</ul></div><a href="progress.html" class="button section">See more</a>
<li><a href="progress#basic-progress-bar" class="sublink-1">Styling for progress bars</a></li>
<li><a href="progress#progress-variants" class="sublink-1">Classes for creating progress bar variants</a></li>
<li><a href="progress#donut-spinner" class="sublink-1">Classes for creating donut spinners</a></li>
<li><a href="progress#spinner-variants" class="sublink-1">Classes for creating donut spinner variants</a></li>
</ul></div><a href="progress" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-lg-6 row">
<div class="card fluid">
<h2 class="section"><mark class="tertiary"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></mark>&nbsp;Utility</h2>
<div class="section box-left"><p style="text-align: justify;">The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere. More specifically, the <strong>utility</strong> module contains:</p><ul>
<li><a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers for hiding elements</a></li>
<li><a href="utility.html#borders-shadows" class="sublink-1">Classes for creating generic borders and shadows</a></li>
<li><a href="utility.html#responsive-sizing" class="sublink-1">Classes for responsive sizing and spacing</a></li>
<li><a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers for hiding elements</a></li>
<li><a href="utility.html#breadcrumbs" class="sublink-1">Classes for creating breadcrumbs</a></li>
<li><a href="utility.html#close-icon" class="sublink-1">Classes for creating close icons</a></li>
</ul></div><a href="utility.html" class="button section">See more</a>
<li><a href="utility#visibility-helpers" class="sublink-1">Visibility helpers for hiding elements</a></li>
<li><a href="utility#borders-shadows" class="sublink-1">Classes for creating generic borders and shadows</a></li>
<li><a href="utility#responsive-sizing" class="sublink-1">Classes for responsive sizing and spacing</a></li>
<li><a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers for hiding elements</a></li>
<li><a href="utility#breadcrumbs" class="sublink-1">Classes for creating breadcrumbs</a></li>
<li><a href="utility#close-icon" class="sublink-1">Classes for creating close icons</a></li>
</ul></div><a href="utility" class="button section">See more</a>
</div>
</div>
</div>

92
docs/navigation.html
View file

@ -32,54 +32,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2" id="real-drawer">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="navigation-title">
@ -199,7 +199,7 @@
<div class="section">
<h3>Notes</h3>
<ul style="text-align: justify;">
<li>Subcategories and their links support a depth of 2 by default. If, however, you need more than that, we recommend you check the <a href="customization.html">customization page</a> for instructions on how to add more depth to the vertical navigation.</li>
<li>Subcategories and their links support a depth of 2 by default. If, however, you need more than that, we recommend you check the <a href="customization">customization page</a> for instructions on how to add more depth to the vertical navigation.</li>
<li>We strongly suggest you do not add irrelevant things inside your <code>&lt;nav&gt;</code> element, like images or text that are not part of the navigation menu.</li>
</ul><hr>
<div class="row">
@ -209,7 +209,7 @@
<span class="fore-tertiary">&lt;!-- navigation content --&gt;</span>
&lt;/nav&gt;
&lt;/div&gt;</pre>
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark>&nbsp;We strongly recommend using the <code>&lt;nav&gt;</code> element in combination with the <a href="grid.html"><strong>grid</strong></a> module to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.</p>
<p class="do" style="text-align: justify;"><mark class="tertiary">Do:</mark>&nbsp;We strongly recommend using the <code>&lt;nav&gt;</code> element in combination with the <a href="grid"><strong>grid</strong></a> module to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.</p>
</div>
</div>
</div>
@ -258,7 +258,7 @@
<div class="section">
<h3>Notes</h3>
<ul style="text-align: justify;">
<li>The <code>.drawer</code> component can be easily and effectively combined with the <a href="grid.html"><strong>grid</strong></a> module's system and classes, as well as the <a href="utility.html"><strong>utility</strong></a> module's responsive visibility helper classes to create fully responsive navigation menus.</li>
<li>The <code>.drawer</code> component can be easily and effectively combined with the <a href="grid"><strong>grid</strong></a> module's system and classes, as well as the <a href="utility"><strong>utility</strong></a> module's responsive visibility helper classes to create fully responsive navigation menus.</li>
<li>It's best to use the <code>.drawer</code> component in combination with a <code>&lt;header&gt;</code> element that has the <code>.sticky</code> class (check the last section of this page).</li>
</ul><hr>
<div class="row">
@ -359,7 +359,7 @@
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>

90
docs/progress.html
View file

@ -28,54 +28,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="progress-title">
@ -122,7 +122,7 @@
<h3>Notes</h3>
<ul style="text-align:justify">
<li>We made sure that the <code>&lt;progress&gt;</code> element displays properly on all modern browsers, using browser-specific rules. However, there might be some irregularities with older browsers, especially legacy versions of Internet Explorer.</li>
<li>If the preset <code>max="1000"</code> does not suit your needs, you should check the <a href="customization.html">customization page</a> for instructions on how to set your own maximum value for the <code>&lt;progress&gt;</code> element.</li>
<li>If the preset <code>max="1000"</code> does not suit your needs, you should check the <a href="customization">customization page</a> for instructions on how to set your own maximum value for the <code>&lt;progress&gt;</code> element.</li>
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6">
@ -159,7 +159,7 @@
<div class="section">
<h3>Notes</h3>
<ul style="text-align:justify">
<li>If you want to add your own custom size classes for <code>&lt;progress&gt;</code> elements, check the <a href="customization.html">customization page</a> for instructions.</li>
<li>If you want to add your own custom size classes for <code>&lt;progress&gt;</code> elements, check the <a href="customization">customization page</a> for instructions.</li>
</ul><hr>
<div class="row">
<div class="col-sm-12 col-md-6">
@ -242,7 +242,7 @@
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>

42
docs/quick_reference.html
View file

@ -26,22 +26,22 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="index.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="#core">Core</a> <a href="#grid">Grid</a> <a href="#input_control">Input Control</a> <a href="#navigation">Navigation</a> <a href="#table">Table</a>
<a href="#card">Card</a> <a href="#tab">Tab</a> <a href="#contextual">Contextual</a> <a href="#progress">Progress</a> <a href="#utility">Utility</a> <br/>
</nav>
@ -50,7 +50,7 @@
<div class="row" style="padding-top: 40px;">
<div class="col-sm-12">
<h1>Quick Reference</h1>
<p style="text-align:justify">If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules.html">modules</a> page.</p>
<p style="text-align:justify">If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules">modules</a> page.</p>
<p style="text-align:justify"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br>
</div>
</div>
@ -78,7 +78,7 @@
<div class="row" id="core">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="core.html" target="_blank" class="button primary small"><i class="fa fa-font fa-fw" aria-hidden="true"></i></a>&nbsp;Core</h2></div>
<div class="section"><h2><a href="core" target="_blank" class="button primary small"><i class="fa fa-font fa-fw" aria-hidden="true"></i></a>&nbsp;Core</h2></div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Headings <a href="https://codepen.io/chalarangelo/pen/ZBVGMq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@ -146,7 +146,7 @@
<div class="row" id="grid">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="grid.html" target="_blank" class="button secondary small"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></a>&nbsp;Grid</h2></div>
<div class="section"><h2><a href="grid" target="_blank" class="button secondary small"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></a>&nbsp;Grid</h2></div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Basic layout <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>
@ -377,7 +377,7 @@
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2><a href="input_control.html" target="_blank" class="button tertiary small"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></a>&nbsp;Input Control</h2>
<h2><a href="input_control" target="_blank" class="button tertiary small"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></a>&nbsp;Input Control</h2>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
@ -519,7 +519,7 @@
<div class="row" id="navigation">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="navigation.html" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a>&nbsp;Navigation</h2></div>
<div class="section"><h2><a href="navigation" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a>&nbsp;Navigation</h2></div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Header <a href="https://codepen.io/chalarangelo/pen/NbewvB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@ -637,7 +637,7 @@
<div class="row" id="table">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="table.html" target="_blank" class="button primary small"><i class="fa fa-table fa-fw" aria-hidden="true"></i></a>&nbsp;Table</h2></div>
<div class="section"><h2><a href="table" target="_blank" class="button primary small"><i class="fa fa-table fa-fw" aria-hidden="true"></i></a>&nbsp;Table</h2></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/XNOzBv" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@ -827,7 +827,7 @@
<div class="row" id="card">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="card.html" target="_blank" class="button secondary small"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></a>&nbsp;Card</h2></div>
<div class="section"><h2><a href="card" target="_blank" class="button secondary small"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></a>&nbsp;Card</h2></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/NbowEB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@ -949,7 +949,7 @@
<div class="row" id="tab">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="tab.html" target="_blank" class="button secondary small"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></a>&nbsp;Tab</h2></div>
<div class="section"><h2><a href="tab" target="_blank" class="button secondary small"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></a>&nbsp;Tab</h2></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/QGYOzZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@ -1038,7 +1038,7 @@
<div class="row" id="contextual">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="contextual.html" target="_blank" class="button secondary small"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></a>&nbsp;Contextual</h2></div>
<div class="section"><h2><a href="contextual" target="_blank" class="button secondary small"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></a>&nbsp;Contextual</h2></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/gLqXqo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@ -1123,7 +1123,7 @@
<div class="row" id="progress">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="progress.html" target="_blank" class="button tertiary small"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></a>&nbsp;Progress</h2></div>
<div class="section"><h2><a href="progress" target="_blank" class="button tertiary small"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></a>&nbsp;Progress</h2></div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Basic progress bar <a href="https://codepen.io/chalarangelo/pen/BQMMyX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@ -1194,7 +1194,7 @@
<div class="row" id="utility">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2><a href="utility.html" target="_blank" class="button tertiary small"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></a>&nbsp;Utility</h2></div>
<div class="section"><h2><a href="utility" target="_blank" class="button tertiary small"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></a>&nbsp;Utility</h2></div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Visibility helpers <a href="https://codepen.io/chalarangelo/pen/ObddVK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>

10
docs/customization.html → docs/react.html
View file

@ -1,16 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Customization</title>
<title>mini.css - React and Preact Libraries</title>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, customization, flavor ">
<meta name="keywords" content="mini, mini.css, CSS, framework, react, preact ">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/customization/index.html">
<meta property="og:url" content="https://chalarangelo.github.io/react-mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/react-mini.css/">
</head>

88
docs/tab.html
View file

@ -28,54 +28,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="tab-title">
@ -162,7 +162,7 @@
<ul style="text-align:justify">
<li>Tabs are compatible with modern browsers, but might not display properly in older browsers.</li>
<li>Remember to add the <code><span class="fore-secondary">checked</span></code> attribute to one of your <code>&lt;input&gt;</code>s if you want that tab to be the one displayed by default. If none is specified, the first one will be displayed.</li>
<li>The <code>height</code> of the tab container's panel area is <code>400px</code>. If you want to change this default size, please check out the <a href="customization.html">customization</a> page.</li>
<li>The <code>height</code> of the tab container's panel area is <code>400px</code>. If you want to change this default size, please check out the <a href="customization">customization</a> page.</li>
<li>Using the method described above for making tabs accessible, screen readers will ignore tab controls and only read the content of tabs.</li>
</ul><hr>
<div class="row">
@ -305,7 +305,7 @@
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>

88
docs/table.html
View file

@ -34,54 +34,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="table-title">
@ -298,7 +298,7 @@
<ul style="text-align: justify;">
<li>Due to <code>.scrollable</code> tables utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a>, some older browsers may not properly display these tables. This is especially true with legacy versions of Internet Explorer.</li>
<li>Mixing the Flexible Layout Module with <code>&lt;table&gt;</code> elements seems to upset some browsers. We noticed this on an older mobile version of Firefox, where our implementation should work in theory, given the fact that both features are properly supported. If you notice any problems with <code>.scrollable</code> tables, feel free to <a href="https://github.com/Chalarangelo/mini.css/issues/new">submit a new issue on Github</a>.</li>
<li><code>.scrollable</code> tables have a default maximum height of <code>400px</code>. If you want to change this, you should check out the <a href="customization.html">customization</a> page.</li>
<li><code>.scrollable</code> tables have a default maximum height of <code>400px</code>. If you want to change this, you should check out the <a href="customization">customization</a> page.</li>
</ul>
<hr>
<div class="row">
@ -513,7 +513,7 @@
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
<p style="text-align: justify;">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>

14
docs/templates.html
View file

@ -25,17 +25,17 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<!-- Insert your page content here-->
<main><div class="container">

88
docs/utility.html
View file

@ -29,54 +29,54 @@
</head>
<body>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index" class="logo"><span id="header-logo">m</span></a>
<label class="drawer-toggle button" for="navigation-toggle"></label>
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" class="button hidden-sm">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
<label class="close" for="navigation-toggle"></label>
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control.html#switches" class="sublink-1">Switches</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation.html#drawer" class="sublink-1">Drawer</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table.html#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
<a href="index"><h4 style="margin-left: 0;">Introduction</h4></a>
<h4 style="margin-left: 0;">Modules</h4> <a href="core#core-title">Core</a>
<a href="core#typography" class="sublink-1">Typography</a> <a href="core#headings" class="sublink-1">Headings</a>
<a href="core#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core#lists" class="sublink-1">Lists</a> <a href="core#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid#grid-title">Grid</a>
<a href="grid#basic-layout" class="sublink-1">Basic layout</a> <a href="grid#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid#column-offset" class="sublink-1">Column offsets</a>
<a href="grid#column-reorder" class="sublink-1">Column reordering</a> <a href="grid#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="input_control#input-control-title">Input Control</a>
<a href="input_control#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a> <a href="input_control#switches" class="sublink-1">Switches</a>
<a href="input_control#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="navigation#navigation-title">Navigation</a>
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a> <a href="navigation#drawer" class="sublink-1">Drawer</a>
<a href="navigation#footer" class="sublink-1">Footer</a> <a href="navigation#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="table#table-title">Table</a>
<a href="table#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a> <a href="table#scrollable-tables" class="sublink-1">Scrollable tables</a>
<a href="table#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card#card-title">Card</a>
<a href="card#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a> <a href="card#color-variants" class="sublink-1">Card color variants</a>
<br/> <a href="tab#tab-title">Tab</a>
<a href="tab#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual#contextual-title">Contextual</a>
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
<br/> <a href="progress#progress-title">Progress</a>
<a href="progress#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility#utility-title">Utility</a>
<a href="utility#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility#close-icon" class="sublink-1">Close icon</a>
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
<a href="quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
</nav>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="utility-title">
@ -189,7 +189,7 @@
<div class="section">
<h3>Notes</h3>
<ul style="text-align:justify">
<li>If the default values of these classes are not suited to your needs, check out the <a href="customization.html">customization</a> page.</li>
<li>If the default values of these classes are not suited to your needs, check out the <a href="customization">customization</a> page.</li>
<li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
</ul><hr>
<div class="row">
@ -341,7 +341,7 @@
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm-12">
<p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
<p style="text-align:justify">If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</main></div></div></div>