mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-31 19:10:25 +02:00
Code Issues Releases Wiki Activity

Validated documentation

Browse Source 
Checked through validator.w3.org, found a significant amount of errors in documentation pages, dealt with all of them (hopefully).
This commit is contained in:
Angelos Chalaris
2017-05-03 09:58:09 +03:00
parent 104629e635
commit 0913f9b609
22 changed files with 121 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/card.html
View File

@@ -215,11 +215,11 @@
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
<div class="container"><br>
<div class="row">
<div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="https://placehold.it/800x600"><div class="section"><p>Content</p></div></div>
<div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0"></iframe><div class="section"><h3>Card with video</h3></div></div>
<div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="https://placehold.it/800x600" alt="image"><div class="section"><p>Content</p></div></div>
<div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe><div class="section"><h3>Card with video</h3></div></div>
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section double-padded"><h3>Double-padded section</h3></div></div>
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div><div class="section darker"><h3>Darker section</h3></div></div>
<div class="card inverse"><div class="section"><h3>Inverse card</h3></div><img class="section media" src="https://placehold.it/800x600"><div class="section"><p>Content</p></div><div class="section"><p>More content</p></div></div>
<div class="card inverse"><div class="section"><h3>Inverse card</h3></div><img class="section media" src="https://placehold.it/800x600" alt="image"><div class="section"><p>Content</p></div><div class="section"><p>More content</p></div></div>
</div><br>
</div>
</div>

6
docs/core.html
View File

@@ -146,7 +146,7 @@
var num3 = num1 + num2;
console.log('Result: ' + num3);
}</pre>
<blockquote cite="Mr. Quotalot">This is some quoted text from elsewhere.</blockquote><br>
<blockquote cite="https://www.google.com">This is some quoted text from elsewhere.</blockquote><br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
@@ -161,7 +161,7 @@
&lt;kbd&gt;Keyboard Input&lt;/kbd&gt;
&lt;hr&gt;
&lt;pre&gt;This is some preformatted text.&lt;/pre&gt;
&lt;blockquote cite=&quot;Quotation source&quot;&gt;
&lt;blockquote cite=&quot;www.quotation.source&quot;&gt;
This is some quoted text from another website or person.
&lt;/blockquote&gt;</pre><br>
</div>
@@ -213,7 +213,7 @@
<div class="section"><h2>Image responsiveness &amp; captions</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div><figure><img src="https://placehold.it/800x600"><figcaption>Image caption</figcaption></figure></div>
<div><figure><img src="https://placehold.it/800x600" alt="image"><figcaption>Image caption</figcaption></figure></div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p>Image elements (<code>&lt;img&gt;</code>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.</p> <p>On a side note, if you want to add captions to images, you can use a <code>&lt;figcaption&gt;</code> element, while wrapping both the image and it inside a <code>&lt;figure&gt;</code>.</p>

18
docs/customization/card.html
View File

@@ -65,7 +65,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="card-title">
@@ -96,7 +96,7 @@
<div class="section"><h2>Cards &amp; sections</h2></div>
<div class="section">
<p>The <strong>card</strong> module's card system uses a few custom classes to create cards and sections, along with a variety of variables to customize their look and feel.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -167,7 +167,7 @@
<div class="section"><h2>Card mixins</h2></div>
<div class="section">
<p>The <strong>card</strong> module contains a couple of mixins for customizing card styles, along with two more for creating custom section styles.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Card mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
@@ -183,7 +183,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-card-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -218,7 +218,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-alt-color</span> ('inverse', #212121, #fafafa, 1px solid #424242, 2px 1px solid #616161);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-card-alt-size</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -237,14 +237,14 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-alt-size</span> ('large', 480px);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Card section mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
</thead>
<tbody>
<tr>
<td data-label="Mixin">make-card-section-alt-color (<span class="fore-primary">$card-section-alt-name</span>, <span class="fore-primary">$card-section-alt-back-color</span>, <span class="fore-primary">$card-section-alt-fore-color</span>, <span class="fore-tertiary">$card-section-alt-border-style</span)</td>
<td data-label="Mixin">make-card-section-alt-color (<span class="fore-primary">$card-section-alt-name</span>, <span class="fore-primary">$card-section-alt-back-color</span>, <span class="fore-primary">$card-section-alt-fore-color</span>, <span class="fore-tertiary">$card-section-alt-border-style</span>)</td>
<td data-label="Description">Creates a new card section color variant using the specified values.</td>
</tr>
<tr>
@@ -253,7 +253,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-card-section-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -280,7 +280,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-section-alt-color</span> ('dark', #e0e0e0, #212121, 1px solid #bdbdbd);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-card-section-alt-style</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>

26
docs/customization/contextual.html
View File

@@ -65,7 +65,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="contextual-title">
@@ -96,7 +96,7 @@
<div class="section"><h2>Text highlighting</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module's styling of <code>&lt;mark&gt;</code> elements is highly customizable.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -155,7 +155,7 @@
<div class="section"><h2>Alerts</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module's contains custom classes and styles for defining alerts.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -220,7 +220,7 @@
<div class="section"><h2>Tooltips</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module's contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -281,7 +281,7 @@
<div class="section"><h2>Text highlighting mixins</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to <code>&lt;mark&gt;</code> elements (color and style variants).</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
@@ -297,7 +297,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-mark-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -320,7 +320,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-mark-alt-color</span> ('secondary', #e53935, #fafafa);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-mark-alt-style</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -370,7 +370,7 @@
<div class="section"><h2>Alert mixins</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to alerts (color and style variants).</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
@@ -386,7 +386,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-alert-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -409,7 +409,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-alert-alt-color</span> ('urgent', #ffca28, #212121);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-alert-alt-style</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -455,7 +455,7 @@
<div class="section"><h2>Tooltip mixins</h2></div>
<div class="section">
<p>The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to tooltips (color and style variants).</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
@@ -471,7 +471,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-tooltip-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -494,7 +494,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-tooltip-alt-color</span> ('primary', #0277bd, #fafafa);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-tooltip-alt-style</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>

6
docs/customization/core.html
View File

@@ -64,7 +64,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="core-title">
@@ -95,7 +95,7 @@
<div class="section"><h2>Typography &amp; headings</h2></div>
<div class="section">
<p>The <strong>core</strong> module's typography rules are quite extensive and deal with background and foreground colors, used fonts, sizing and line height, along with heading, link and paragraph styling.</p><br/>
<table width="100%" class="striped">
<table class="striped" style="width: 100%;">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -254,7 +254,7 @@
<div class="section"><h2>Common elements &amp; fixes</h2></div>
<div class="section">
<p>The <strong>core</strong> module contains a plethora of styles for horizontal rules, lists and code elements, as well as a few optional display fixes for certain other elements.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%;" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>

4
docs/customization/grid.html
View File

@@ -67,7 +67,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="grid-title">
@@ -98,7 +98,7 @@
<div class="section"><h2>Classes &amp; breakpoints</h2></div>
<div class="section">
<p>The <strong>grid</strong> module's systems are based on custom-named classes for containers, rows and columns, as well as reordering and ofsetting classes, breakpoints and padding.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>

2
docs/customization/index.html
View File

@@ -63,7 +63,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;">

14
docs/customization/input_control.html
View File

@@ -66,7 +66,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="input-control-title">
@@ -97,7 +97,7 @@
<div class="section"><h2>Forms &amp; input</h2></div>
<div class="section">
<p>The <strong>input_control</strong> module's forms and input fields can be easily customized to use different sizes and colors, as well as different class names for groupping.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -258,7 +258,7 @@
<div class="section"><h2>Checkboxes &amp; radio buttons</h2></div>
<div class="section">
<p>The <strong>input_control</strong> module's checkbox and radio button elements are based on custom rules and depend on the use of <code>&lt;label&gt;</code> elements and input groups to be stylized and properly displayed.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -319,7 +319,7 @@
<div class="section"><h2>Button &amp; button groups</h2></div>
<div class="section">
<p>The <strong>input_control</strong> module's button elements are highly customizable, along with the button groups that can be used in combination with them.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -402,7 +402,7 @@
<div class="section"><h2>Button mixins</h2></div>
<div class="section">
<p>The <strong>input_control</strong> module contains a couple of mixins for adding custom styles to button elements (color and style variants).</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
@@ -418,7 +418,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-button-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -449,7 +449,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-button-alt-color</span> ('primary', #0277bd, 0.9, 1, #fafafa);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-button-alt-style</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>

16
docs/customization/navigation.html
View File

@@ -65,7 +65,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="navigation-title">
@@ -96,7 +96,7 @@
<div class="section"><h2>Header</h2></div>
<div class="section">
<p>The <strong>navigation</strong> module contains definitions for styling the <code>&lt;header&gt;</code> element, along with its contents (logo and links).</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -185,7 +185,7 @@
<div class="section"><h2>Navigation bar</h2></div>
<div class="section">
<p>The <strong>navigation</strong> module contains definitions for styling <code>&lt;nav&gt;</code> elements, along with the links they contain.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -237,19 +237,19 @@
</tr>
<tr>
<td data-label="Variable">$nav-include-sublink-bar</td><td data-label="Type">Logical</td>
<td data-label="Description">Enables the sidebar for <code>&lt;nav&gt;</code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup</td><td data-label="Sample value">true</td>
<td data-label="Description">Enables the sidebar for <code>&lt;nav&gt;</code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">true</td>
</tr>
<tr>
<td data-label="Variable">$nav-sublink-bar-left-position</td><td data-label="Type">Position left</td>
<td data-label="Description">Left position of the sidebar for <code>&lt;nav&gt;</code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup</td><td data-label="Sample value">3px</td>
<td data-label="Description">Left position of the sidebar for <code>&lt;nav&gt;</code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">3px</td>
</tr>
<tr>
<td data-label="Variable">$nav-sublink-bar-width</td><td data-label="Type">Border width</td>
<td data-label="Description">Width of the sidebar for <code>&lt;nav&gt;</code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup</td><td data-label="Sample value">1px</td>
<td data-label="Description">Width of the sidebar for <code>&lt;nav&gt;</code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">1px</td>
</tr>
<tr>
<td data-label="Variable">$nav-sublink-bar-color</td><td data-label="Type">Color</td>
<td data-label="Description">Color of the sidebar for <code>&lt;nav&gt;</code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup</td><td data-label="Sample value">#263238</td>
<td data-label="Description">Color of the sidebar for <code>&lt;nav&gt;</code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">#263238</td>
</tr>
</tbody>
</table><br/>
@@ -270,7 +270,7 @@
<div class="section"><h2>Footer</h2></div>
<div class="section">
<p>The <strong>navigation</strong> module contains various definitions for customizing the appearance of the <code>&lt;footer&gt;</code> element.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>

20
docs/customization/progress.html
View File

@@ -67,7 +67,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="progress-title">
@@ -98,7 +98,7 @@
<div class="section"><h2>Progress bar</h2></div>
<div class="section">
<p>The <strong>progress</strong> module's styling of <code>&lt;progress&gt;</code> elements is highly customizable.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -153,7 +153,7 @@
<div class="section"><h2>Donut spinner</h2></div>
<div class="section">
<p>The <strong>progress</strong> module's donut spinner uses a custom class and a few variables for custmization.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -192,7 +192,7 @@
<div class="section"><h2>Progress bar mixins</h2></div>
<div class="section">
<p>The <strong>progress</strong> module contains a couple of mixins for adding custom styles to <code>&lt;progress&gt;</code> elements (color and style variants), as well as a mixin for creating inline progress bars.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
@@ -212,7 +212,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-progress-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -235,7 +235,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-progress-alt-color</span> ('secondary', #e53935, #eeeeee);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-progress-alt-style</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -274,7 +274,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-progress-alt-style</span> ('nano', 2px, 1px, 1px, 1px solid #bdbdbd, 1px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-progress-inline</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -304,7 +304,7 @@
<div class="section"><h2>Donut spinner mixins</h2></div>
<div class="section">
<p>The <strong>progress</strong> module contains a couple of mixins for adding custom styles to donut spinners (color and style variants).</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
@@ -320,7 +320,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-spinner-donut-alt-color</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -343,7 +343,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-spinner-donut-alt-color</span> ('secondary', #ffebee, #c62828);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-spinner-donut-alt-style</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>

4
docs/customization/tab.html
View File

@@ -65,7 +65,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="tab-title">
@@ -96,7 +96,7 @@
<div class="section"><h2>Tab styling</h2></div>
<div class="section">
<p>The <strong>tab</strong> module contains definitions for tab styling, using custom classes and structures.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>

4
docs/customization/table.html
View File

@@ -71,7 +71,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="table-title">
@@ -102,7 +102,7 @@
<div class="section"><h2>Table styling</h2></div>
<div class="section">
<p>The <strong>table</strong> module contains definitions for tables and table variants.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>

28
docs/customization/utility.html
View File

@@ -65,7 +65,7 @@
<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="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a><br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="utility-title">
@@ -97,7 +97,7 @@
<div class="section"><h2>Visibility helpers &amp; legacy features</h2></div>
<div class="section">
<p>The <strong>utility</strong> module's visiblity helpers use a couple of custom classes, while certain legacy features are also available via certain variables and custom class definitions.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -156,7 +156,7 @@
<div class="section"><h2>Breadcrumbs</h2></div>
<div class="section">
<p>The <strong>utility</strong> module's breadcrumbs use a custom class and a few varaibles to allow you to customize their appearance.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -207,7 +207,7 @@
<div class="section"><h2>Close icon</h2></div>
<div class="section">
<p>The <strong>utility</strong> module's close icon uses a custom class and a few variable to customize its appearance.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Variables</caption>
<thead>
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -242,7 +242,7 @@
<div class="section"><h2>Generic border &amp; shadow mixins</h2></div>
<div class="section">
<p>The <strong>utility</strong> module contains a few mixins for creating generic borders, border styles and shadows.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
@@ -262,7 +262,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-border-generic</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -277,7 +277,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-border-generic</span> ('bordered');</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-border-radial-style</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -296,7 +296,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-border-radial-style</span> ('rounded', 2px);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-box-shadow-generic</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -326,7 +326,7 @@
<div class="section"><h2>Responsive sizing &amp; spacing mixins</h2></div>
<div class="section">
<p>The <strong>utility</strong> module contains a couple of mixins for creating responsive sizing and spacing classes.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
@@ -342,7 +342,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-margin-responsive</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -389,7 +389,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-margin-responsive</span> ('responsive-margin', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-padding-responsive</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -447,7 +447,7 @@
<div class="section"><h2>Responsive visibility helper mixins</h2></div>
<div class="section">
<p>The <strong>utility</strong> module contains a couple of mixins for creating responsive visibility helpers.</p><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption>Mixin definitions</caption>
<thead>
<tr><th>Mixin</th><th>Description</th></tr>
@@ -463,7 +463,7 @@
</tr>
</tbody>
</table><br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-hidden-responsive</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
@@ -510,7 +510,7 @@
<h3>Sample usage</h3>
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-hidden-responsive</span> ('hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');</pre>
<br/>
<table width="100%" class="striped">
<table style="width: 100%" class="striped">
<caption style="font-family: monospace, monospace">make-visually-hidden-responsive</caption>
<thead>
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>

5
docs/flavors.html
View File

@@ -46,7 +46,6 @@
<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>
</p>
</div>
</li>
<li class="card fluid">
@@ -56,7 +55,6 @@
<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>
</p>
</div>
</li>
<li class="card fluid">
@@ -66,7 +64,6 @@
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/Chalarangelo">Chalarangelo</a></p>
<p><strong>Size:</strong> 5 KB</p>
</p>
</div>
</li>
<li class="card fluid">
@@ -76,7 +73,6 @@
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/AngieDaskalakis">Angeliki Daskalakis</a></p>
<p><strong>Size:</strong> 7 KB (loads external fonts)</p>
</p>
</div>
</li>
<li class="card fluid">
@@ -86,7 +82,6 @@
<div class="section double-padded">
<p><strong>Author:</strong> <a href="https://github.com/tphecca">tphecca</a></p>
<p><strong>Size:</strong> 7 KB</p>
</p>
</div>
</li>
</ul>

4
docs/grid.html
View File

@@ -125,7 +125,7 @@
<h3>Sample code</h3>
<p>The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on <strong>Show sample code</strong> below to see the code sample for this example. Also, the example presented showcases the grid system's syntax for smaller screens, but you can do the same thing for any screen size.</p><br>
<div class="container"><div class="row"><div class="tabs stacked">
<input type="checkbox" id="grid-base-sample" autocomplete="off">
<input type="checkbox" id="grid-base-sample">
<label for="grid-base-sample">Show sample code</label>
<div>
<pre>&lt;div class=&quot;container&quot;&gt;
@@ -576,7 +576,7 @@
<div class="container">
<div class="row"><div class="col-sm"><br></div></div>
<div class="row">
<div class="col-sm col-sm-2"><img src="https://placehold.it/800x600"></div>
<div class="col-sm col-sm-2"><img src="https://placehold.it/800x600" alt="image"></div>
<div class="col-sm col-sm row">
<div class="col-sm">
<h3>Media object heading</h3>

15
docs/index.html
View File

@@ -119,12 +119,12 @@
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Browser support</h2>
<div class="row" style="padding: 0.5rem;">
<div class="col-sm" style="text-align:center; background: #35BCE6; padding: 1rem;"><img src="browser-logos/edge_128x128.png"><br/><h3><small>&nbsp;Edge</small>12</h3></div>
<div class="col-sm" style="text-align:center; background: #FF742E; padding: 1rem;"><img src="browser-logos/firefox_128x128.png"><br/><h3><small>&nbsp;Firefox</small>28</h3></div>
<div class="col-sm" style="text-align:center; background: #FFE270; padding: 1rem;"><img src="browser-logos/chrome_128x128.png"><br/><h3><small>&nbsp;Chrome</small>26</h3></div>
<div class="col-sm" style="text-align:center; background: #00D0FF; padding: 1rem;"><img src="browser-logos/safari_128x128.png"><br/><h3><small>&nbsp;Safari</small>7.1</h3></div>
<div class="col-sm" style="text-align:center; background: #FF6E6E; padding: 1rem;"><img src="browser-logos/opera_128x128.png"><br/><h3><small>&nbsp;Opera</small>17</h3></div>
<div class="col-sm" style="text-align:center; background: #0F98E0; padding: 1rem;"><img src="browser-logos/android_128x128.png"><br/><h3><small>&nbsp;Android</small>4.4</h3></div>
<div class="col-sm" style="text-align:center; background: #35BCE6; padding: 1rem;"><img src="browser-logos/edge_128x128.png" alt="edge"><br/><h3><small>&nbsp;Edge</small>12</h3></div>
<div class="col-sm" style="text-align:center; background: #FF742E; padding: 1rem;"><img src="browser-logos/firefox_128x128.png" alt="firefox"><br/><h3><small>&nbsp;Firefox</small>28</h3></div>
<div class="col-sm" style="text-align:center; background: #FFE270; padding: 1rem;"><img src="browser-logos/chrome_128x128.png" alt="chrome"><br/><h3><small>&nbsp;Chrome</small>26</h3></div>
<div class="col-sm" style="text-align:center; background: #00D0FF; padding: 1rem;"><img src="browser-logos/safari_128x128.png" alt="safari"><br/><h3><small>&nbsp;Safari</small>7.1</h3></div>
<div class="col-sm" style="text-align:center; background: #FF6E6E; padding: 1rem;"><img src="browser-logos/opera_128x128.png" alt="opera"><br/><h3><small>&nbsp;Opera</small>17</h3></div>
<div class="col-sm" style="text-align:center; background: #0F98E0; padding: 1rem;"><img src="browser-logos/android_128x128.png" alt="android"><br/><h3><small>&nbsp;Android</small>4.4</h3></div>
</div></div> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<p style="padding-top: 1rem; padding-bottom: 1rem;"><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;Due to the way <strong>mini.css</strong> is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. On a side note, remember that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p><hr>
</div>
@@ -168,8 +168,7 @@
</ul>
</div>
</div>
</div>
</div></main>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>

14
docs/input_control.html
View File

@@ -108,8 +108,8 @@
<form>
<fieldset>
<legend>Fluid form</legend>
<div class="input-group fluid"><label for="username">username</label> <input type="email" value="" id="username" placeholder="username"></div>
<div class="input-group fluid"><label for="pwd">password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
<div class="input-group fluid"><label for="username2">username</label> <input type="email" value="" id="username2" placeholder="username"></div>
<div class="input-group fluid"><label for="pwd2">password</label> <input type="password" value="" id="pwd2" placeholder="password"></div>
</fieldset>
</form>
<form>
@@ -244,7 +244,7 @@
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;When creating aligned forms using the <strong>grid</strong> module's classes, labels might be off-center vertically compared to their inline counterparts. Use a simple styling for their parent <code>.row</code> element, if you want to adjust their vertical alignment.</p>
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre><&lt;form&gt;
<pre>&lt;form&gt;
&lt;fieldset&gt;
&lt;legend&gt;Responsive form&lt;/legend&gt;
&lt;div class=&quot;row input-group&quot;&gt;
@@ -273,13 +273,13 @@
<div class="box-centered">
<br>
<div class="input-group">
<input type="checkbox" id="chk1" tabindex="0" autocomplete="off"> <label for="chk1">&nbsp;Checkbox</label>
<input type="checkbox" id="chk1" tabindex="0"> <label for="chk1">&nbsp;Checkbox</label>
</div>
<br><br>
<div class="input-group">
<input type="radio" name="radios" value="r1" id="r1" tabindex="0" autocomplete="off" checked> <label for="r1">&nbsp;Value 1</label>&nbsp;&nbsp;<br>
<input type="radio" name="radios" value="r2" id="r2" tabindex="0" autocomplete="off"> <label for="r2">&nbsp;Value 2</label>&nbsp;&nbsp;<br>
<input type="radio" name="radios" value="r3" id="r3" tabindex="0" autocomplete="off"> <label for="r3">&nbsp;Value 3</label>&nbsp;&nbsp;<br>
<input type="radio" name="radios" value="r1" id="r1" tabindex="0" checked> <label for="r1">&nbsp;Value 1</label>&nbsp;&nbsp;<br>
<input type="radio" name="radios" value="r2" id="r2" tabindex="0"> <label for="r2">&nbsp;Value 2</label>&nbsp;&nbsp;<br>
<input type="radio" name="radios" value="r3" id="r3" tabindex="0"> <label for="r3">&nbsp;Value 3</label>&nbsp;&nbsp;<br>
</div>
<br><br>
</div>

8
docs/tab.html
View File

@@ -214,18 +214,18 @@
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div class="tabs stacked" style="margin-top: 5px; margin-bottom: 5px;">
<input type="radio" name="accordion" id="a1" autocomplete="off" checked aria-hidden="true">
<input type="radio" name="accordion" id="a1" checked aria-hidden="true">
<label for="a1" aria-hidden="true">Accordion section 1</label>
<div> <h3>Section 1</h3> <p>This is the first accordion section's content.</p> </div>
<input type="radio" name="accordion" id="a2" autocomplete="off" aria-hidden="true">
<input type="radio" name="accordion" id="a2" aria-hidden="true">
<label for="a2" aria-hidden="true">Accordion section 2</label>
<div> <h3>Section 2</h3> <p>This is the second accordion section's content.</p> </div>
</div>
<div class="tabs stacked" style="margin-top: 5px; margin-bottom: 5px;">
<input type="checkbox" id="c1" autocomplete="off" aria-hidden="true">
<input type="checkbox" id="c1" aria-hidden="true">
<label for="c1" aria-hidden="true">Collapse section 1</label>
<div> <p>This is the first collapse section's content.</p> </div>
<input type="checkbox" id="c2" autocomplete="off" aria-hidden="true">
<input type="checkbox" id="c2" aria-hidden="true">
<label for="c2" aria-hidden="true">Collapse section 2</label>
<div> <p>This is the second collapse section's content.</p> </div>
</div>

4
docs/table.html
View File

@@ -311,7 +311,7 @@
<table class="preset">
<caption>Star Wars Character Alignment Table</caption>
<tbody>
<tr class="border-fix"><th></th><th>Lawful</td><th>Neutral</td><th>Chaotic</td></tr>
<tr class="border-fix"><th></th><th>Lawful</th><th>Neutral</th><th>Chaotic</th></tr>
<tr><th>Good</th><td>Yoda</td><td>Luke Skywalker</td><td>Chewbacca</td></tr>
<tr><th>Neutral</th><td>C-3PO</td><td>Boba Fett</td><td>Han Solo</td></tr>
<tr><th>Bad</th><td>Darth Vader</td><td>Emperor Palpatine</td><td>Jabba the Hutt</td></tr>
@@ -324,7 +324,7 @@
<h3>Sample code</h3>
<p>The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on <strong>Show sample code</strong> below to see the code sample for this example. By the way, we present a sample for a matrix table in he first example, but you can use the same principles and classes to create any table layout you wish.</p><br>
<div class="container"><div class="row"><div class="tabs stacked">
<input type="checkbox" id="grid-base-sample" autocomplete="off">
<input type="checkbox" id="grid-base-sample">
<label for="grid-base-sample">Show sample code</label>
<div>
<pre>&lt;table class=&quot;preset&quot;&gt;

28
docs/templates.html
View File

@@ -37,41 +37,41 @@
<h1>Templates</h1>
<p>Getting started with <strong>mini.css</strong> is reasonably easy, however sometimes you need a couple of examples or templates to figure out the optimal way to design your website or app. To help you get started, we maintain a handful of templates that can help you quickstart your projects without having to read the full documentation.</p><br/>
<ul style="margin-left:0px; padding-left: 10px">
<li class="card fluid">
<li class="card fluid" style="margin-bottom: 3rem;">
<p data-height="480" data-theme-id="0" data-slug-hash="WpPqaj" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Single Column Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/WpPqaj/">Single Column Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<h2 class="section double-padded">Single column template</h2>
<p class="section double-padded">The most basic layout template for a blog or website consists of a sticky header, one column used to display content and a footer at the bottom of the page. This template uses the grid system of <strong>mini.css</strong>, along with its navigational elements to provide a simple responsive website design, that you can use to display content across devices without the need for any changes in the layout.</p>
</li><br/>
<li class="card fluid">
</li>
<li class="card fluid" style="margin-bottom: 3rem;">
<p data-height="480" data-theme-id="0" data-slug-hash="Vbeeqj" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Two Column Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/Vbeeqj/">Two Column Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<h2 class="section double-padded">Two-column template</h2>
<p class="section double-padded">Another common layout template for blogs and websites consists of a sticky header, a footer and two columns for displaying content. Like in most templates, the grid system of <strong>mini.css</strong> is used to provide an easy way to create columns and make them responsive across multiple screen sizes and devices.</p>
</li><br/>
<li class="card fluid">
</li>
<li class="card fluid" style="margin-bottom: 3rem;">
<p data-height="480" data-theme-id="0" data-slug-hash="OmMNoa" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Three Column Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/OmMNoa/">Three Column Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<h2 class="section double-padded">Three-column template</h2>
<p class="section double-padded">Last but not least, the three-column website layout template is better used in websites with a lot of content. The grid system of <strong>mini.css</strong> provides an easy solution to handling lots of content on multiple screen sizes and devices, making the content responsive. Finally, as in most templates, navigational elements such as sticky headers and foooters are used to complete the template.</p>
</li><br/>
<li class="card fluid">
</li>
<li class="card fluid" style="margin-bottom: 3rem;">
<p data-height="480" data-theme-id="0" data-slug-hash="xdZOVP" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Card Showcase Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/xdZOVP/">Card Showcase Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<h2 class="section double-padded">Card showcase template</h2>
<p class="section double-padded">Card-based website layout templates are another common need, as many websites utilize a tile system to display lots of smaller pieces of content. Using the card and grid modules of <strong>mini.css</strong>, along with a couple of navigational elements, it's really easy to create a responsive website with lots of cards containing small pieces of content, such as a showcase for a website, a photo album or an article browser.</p>
</li><br/>
<li class="card fluid">
</li>
<li class="card fluid" style="margin-bottom: 3rem;">
<p data-height="480" data-theme-id="0" data-slug-hash="GmWrVv" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Login Form Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/xGmWrVv/">Login Form Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<h2 class="section double-padded">Login form template</h2>
<p class="section double-padded">Login forms are one of the most commonly used elements in any website design. Using the input_control and grid modules of <strong>mini.css</strong>, along with a couple of navigational elements and a couple of optional tricks, it's really easy to create a responsive login form with the required fields and buttons.</p>
</li><br/>
<li class="card fluid">
</li>
<li class="card fluid" style="margin-bottom: 3rem;">
<p data-height="480" data-theme-id="0" data-slug-hash="EmPyBe" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Android App Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/EmPyBe/">Android App Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<h2 class="section double-padded">Android app template</h2>
<p class="section double-padded">Web application layout templates are pretty popular these days, especially ones that look and feel like native Android apps. Utilizing some clever CSS tricks, the grid module and navigational elements from <strong>mini.css</strong>, we created a pretty simple app template, complete with a call-to-action button and header bar, making it look quite similar to a native Android app and display properly across multiple devices.</p>
</li><br/>
<li class="card fluid">
</li>
<li class="card fluid" style="margin-bottom: 3rem;">
<p data-height="480" data-theme-id="0" data-slug-hash="JNGREq" data-default-tab="result" data-user="chalarangelo" data-embed-version="2" data-pen-title="Tabbed App Template (mini.css)" data-preview="true" class="codepen section">See the Pen <a href="http://codepen.io/chalarangelo/pen/JNGREq/">Tabbed App Template (mini.css)</a> by Angelos Chalaris (<a href="http://codepen.io/chalarangelo">@chalarangelo</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<h2 class="section double-padded">Tabbed app template</h2>
<p class="section double-padded">A single page application layout template can be built using many things, but tabbed web applications are one of our favorites. Utilizing the tab module of <strong>mini.css</strong> and some CSS tricks, we created a simple single page app template with three tabs, containing different content. The template will switch to a stacked view on smaller devices, although if you add more than three tabs, you will have to alter a couple of values to make sure that everything fits nicely on the screen.</p>
</li><br/>
</li>
</ul>
<br/>
</div>

2
docs/utility.html
View File

@@ -128,7 +128,7 @@
<br>
<p>This is a paragraph with a piece of <span class="bordered">bordered text</span>.</p>
<button class="bordered">Bordered button</button><button class="bordered primary">Bordered button</button><br>
<p><img src="https://placehold.it/200x200?text=rounded" class="rounded">&nbsp;&nbsp;<img src="https://placehold.it/200x200?text=circular" class="circular"></p><br>
<p><img src="https://placehold.it/200x200?text=rounded" class="rounded" alt="image">&nbsp;&nbsp;<img src="https://placehold.it/200x200?text=circular" class="circular" alt="image"></p><br>
<p><span class="shadow-none">No shadow</span>&nbsp;&nbsp;<span class="shadow-small">Small shadow</span>&nbsp;&nbsp;<span class="shadow-medium">Medium shadow</span>&nbsp;&nbsp;<span class="shadow-large">Large shadow</span></p><br>
</div>
</div>

7
docs/v2/DEVLOG.md
View File

@@ -1057,3 +1057,10 @@
- Added sidebar navigation for `\customization` pages, updated them all.
- Added template for login forms.
- Updated front-page a little bit, adding logos and changing the content around a little bit.
# v2.1.4 Development Log
## 20170503
- Started validating the HTML pages with the W3C Validator, making sure to fix as many issues as possible.
- Fixed 7 errors in `index.html`, 5 error in `flavors.html`, 2 errors in `core.html`, 2 errors in `grid.html`, 9 errors in `input_control.html`, 4 errors in `table.html`, 3 errors in `card.html`, 4 errors in `tab.html`, 7 errors in `templates.html`, 2 errors in `utilty.html`, all errors in the customization docs stemming from `width="100%"` in `table` elements, 5 errors in `customization\card.html`, 20 errors in `customization\navigation.html` (~100 errors in total).