mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-09 07:16:29 +02:00
Code Issues Releases Wiki Activity

Documentation update

Browse Source 
Pretty sizeable documentation update, improving layout, typos etc. Also added the Codepen Project to the templates page, a small note to star the project in the front page and two more examples in the drawer component documentation to make sure that everything is properly documented.
This commit is contained in:
Angelos Chalaris
2017-05-22 17:05:40 +03:00
parent a7fc3f827e
commit 0afb5277ad
29 changed files with 476 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
docs/quick_reference.html
View File

@@ -50,8 +50,8 @@
<div class="row" style="padding-top: 40px;">
<div class="col-sm-12">
<h1>Quick Reference</h1>
<p>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><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>
<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"><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>
<div class="row">
@@ -59,17 +59,17 @@
<div class="card fluid">
<div class="section"><h2>Setup &amp; usage</h2></div>
<div class="section">
<p>You can download <strong>mini.css</strong> using <strong>npm</strong>, <strong>yarn</strong> or <strong>Bower</strong>:</p>
<p style="text-align:justify">You can download <strong>mini.css</strong> using <strong>npm</strong>, <strong>yarn</strong> or <strong>Bower</strong>:</p>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4"><pre><span class="fore-tertiary">npm install</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">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><br>
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<p style="text-align:justify">You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding 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>
<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://cdn.rawgit.com/Chalarangelo/mini.css/v2.2.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
<p>We strongly suggest you 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">You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
<p style="text-align:justify">We strongly suggest you 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>
</div>
</div>
@@ -91,7 +91,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Typography</h3>
<ul>
<ul style="text-align:justify">
<li>Basic reset and fix rules applied, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0</li>
<li>A <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> is used</li>
<li>The colors are set to <code>background: #f5f5f5;</code> and <code>color: #212121;</code></li>
@@ -200,7 +200,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Based on the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout Module</a></li>
<li>Grid structured as follows:
<ol>
@@ -210,7 +210,7 @@
</ol>
</li>
<li><code><span class="fore-primary">SCR_SZ</span></code> values:
<ul>
<ul style="text-align:justify">
<li><code><span class="fore-tertiary">sm</span></code> for screens below <code>768px</code> wide</li>
<li><code><span class="fore-tertiary">md</span></code> for screens between <code>768px</code>(inclusive) and <code>1280px</code>(exclusive)</li>
<li><code><span class="fore-tertiary">lg</span></code> for screens wider than <code>1280px</code></li>
@@ -250,7 +250,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Apply multiple column classes to the same element, one for each screen size, to define different layouts</li>
<li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
<li>Try to make page content vertical for smaller devices, using <code>.col-sm-12</code> and transition to two or three columns on larger screen sizes</li>
@@ -274,7 +274,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Available both as fluid column layouts, using <code>.cols-<span class="fore-primary">SCR_SZ</span></code>, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names and fixed width column layouts, using <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code>, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names and <code><span class="fore-secondary">COL_WD</span></code> with a number from <code>1</code> to <code>12</code> specifying the width of the columns</li>
<li>Can define screen-specific predefined layouts</li>
<li>Can be combined with offsets and reordering, but not normal grid layout classes</li>
@@ -310,7 +310,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Create offsets using the <code>.col-<span class="fore-primary">SCR_SZ</span>-offset-<span class="fore-secondary">COL_WD</span></code> classes</li>
<li><code><span class="fore-secondary">COL_WD</span></code> can be any integer from <code>0</code> to <code>11</code> (both inclusive)</li>
<li>You can mix offset columns and non-offset columns</li>
@@ -336,7 +336,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Create reorders using <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code>, <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code> and <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code> classes for first, last and normal ordering respectively</li>
<li>Default ordering is based on order of appearance</li>
<li>Specify reorders in combination with existing column styling, not instead</li>
@@ -361,7 +361,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Not a new component, rather a <a href="https://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">popular pattern</a></li>
<li>Use two columns, one for the media (i.e. <code>&lt;img&gt;</code>) and one for the textual content</li>
<li>Compatible with most elements</li>
@@ -398,7 +398,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Link <code>&lt;label&gt;</code> elements to their respective <code>&lt;input&gt;</code> elements for ease-of-use</li>
<li>Use of the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements is highly recommended</li>
<li>Forms are inline by default, use <code>.input-group</code> to align elements inside them</li>
@@ -425,7 +425,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Pre-styled using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, fully accessible</li>
<li>Create a <code>&lt;div <span class="fore-secondary">class</span>=<span class="fore-primary">&quot;input-group&quot;</span>&gt;</code> containing the checkbox or radio button along with its linked label</li>
<li>Add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">&quot;0&quot;</span></code> to the <code>&lt;input&gt;</code> element to make full accessible</li>
@@ -459,7 +459,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>All button types have been stylized</li>
<li>Button styles are available for other elements, using the <code>.button</code> class or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>&quot;</span></code> attribute</li>
<li><code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code> and <code>.inverse</code> color variants</li>
@@ -479,7 +479,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Link an <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;file&quot;</span>&gt;</code> element to a <code>&lt;label&gt;</code></li>
<li>The file button will not change text when uploading a file, Javascript may be required</li>
<li>Compatible with <code>.input-group</code></li>
@@ -507,7 +507,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
<li>The rest of the elements inside the <code>&lt;header&gt;</code> must be button elements (i.e. <code>&lt;button&gt;</code>, <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;button&quot;</span>&gt;</code>, <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>&quot;</span></code> or <code>.button</code>)</li>
<li>Use <code>&lt;span&gt;</code> elements as separators</li>
@@ -535,7 +535,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use <code>&lt;nav&gt;</code> element, populate it with links</li>
<li>Use <code>.sublink-1</code> and <code>.sublink-2</code> classes to create subcategories in your navigation menu</li>
<li>Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays</li>
@@ -557,7 +557,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Structure as follows:<ol>
<li><code>&lt;label&gt;</code> element with the <code>.drawer-toggle</code> class in the <code>&lt;header&gt;</code> element, linked to the <code class="fore-secondary">id</code> of the <code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> used to toggle the drawer component</li>
<li><code>&lt;input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"&gt;</code> element with a unique <code class="fore-secondary">id</code></li>
@@ -580,7 +580,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Simple syntax and structure, add content as normal</li>
</ul>
</div>
@@ -598,7 +598,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use <code>.sticky</code> class to create</li>
<li>Compatible with modern browsers, support for <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a> is growing</li>
</ul>
@@ -644,7 +644,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Table structure is as follows:
<ol>
<li><code>&lt;table&gt;</code> element is the table's root element</li>
@@ -694,7 +694,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>.horizontal</code> class to make a <code>&lt;table&gt;</code> horizontal</li>
<li>Does not support the <code>&lt;tfoot&gt;</code> element</li>
<li>Horizontal tables might not be fully compatible with older browsers</li>
@@ -746,7 +746,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>.striped</code> class to make a <code>&lt;table&gt;</code> striped</li>
<li>Use the <code>.preset</code> class to make a <code>&lt;table&gt;</code> to create matrices or otherwise preset tables</li>
<li>Preset matrix tables might require some CSS tweaks to deal with border styling errors</li>
@@ -781,7 +781,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Requires familiarity with the grid module</li>
<li>Card structure as follows:
<ol>
@@ -810,7 +810,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Create media sections for images or video, using the <code>.media</code> class</li>
<li>Color variants for sections are available using the <code>.dark</code> and <code>.darker</code> classes</li>
<li>Extra padding section variant available using the <code>.double-padded</code> class</li>
@@ -844,7 +844,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Card size variants available using the <code>.large</code> and <code>.small</code> classes</li>
<li>Fluid cards available using the <code>.fluid</code> class, require the use of grid columns</li>
<li>Fluid cards might not display properly in older browsers and will sometimes slightly disrespect margins on certain layouts</li>
@@ -869,7 +869,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Create yellow warning cards, using the <code>.warning</code> class</li>
<li>Create red error cards, using <code>.error</code> class</li>
<li>Avoid combining two or more card color variants</li>
@@ -909,7 +909,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Tabs structure as follows:
<ol>
<li><code>.tabs</code> element is the outermost wrapper of the tabbed layout</li>
@@ -957,7 +957,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>.stacked</code> class to create stacked tabs</li>
<li>Use <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> to input elements in order to add accessibility</li>
<li>Use either checkboxes or radio buttons as the <code>&lt;input&gt;</code> elements of stacked tabs</li>
@@ -983,7 +983,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>&lt;mark&gt;</code> element for highlighting text</li>
<li><code>.secondary</code> and <code>.tertiary</code> classes offer color variants</li>
<li>Highlighted text is inline by default, use the <code>.inline-block</code> class for longer text highlights</li>
@@ -1002,7 +1002,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>.toast</code> class on <code>&lt;span&gt;</code> elements to create toast messages</li>
<li>Size variants available using the <code>.small</code> and <code>.large</code> classes</li>
<li>Toasts have no pre-defined behavior, use Javascript</li>
@@ -1018,7 +1018,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Create using the <code>.tooltip</code> class</li>
<li>Put tooltip text in the <code><span class="fore-secondary">aria-label</span></code> attribute's value</li>
<li>Use the <code>.bottom</code> class to make a tooltip display at the bottom of its context</li>
@@ -1041,7 +1041,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>&lt;progress&gt;</code> element to create progress bars</li>
<li>Set <code><span class="fore-secondary">max</span>=<span class="fore-primary">&quot;1000&quot;</span></code> and a <code>value</code> between <code>0</code> and <code>1000</code></li>
<li>Do not use floating point values for the progress bar</li>
@@ -1057,7 +1057,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Color variants available using the <code>.secondary</code> and <code>.tertiary</code> classes</li>
<li>Inline variant available using the <code>.inline</code> class</li>
<li>Mix color and size variants, but not multiple of the same type</li>
@@ -1071,7 +1071,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>.spinner-donut</code> class to create donut spinners</li>
<li>Apply class to a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> element</li>
<li>Do not insert text inside the <code>.spinner-donut</code> element</li>
@@ -1089,7 +1089,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Color variants available using the <code>.secondary</code> and <code>.tertiary</code> classes</li>
<li>Alternate size available using the <code>.large</code> class</li>
<li>You can mix color variants with the <code>.large</code> class, but not with each other</li>
@@ -1111,7 +1111,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use <code>.hidden</code> to hide elements</li>
<li>Use <code>.visually-hidden</code> to show elements only in screen readers</li>
<li>Both classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
@@ -1129,7 +1129,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Create generic borders using <code>.bordered</code></li>
<li>Rounded and circular border radii available using <code>.rounded</code> and <code>.circular</code> classes</li>
<li>Generic shadows available using the <code>.shadowed</code> class</li>
@@ -1147,7 +1147,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>.responsive-padding</code> and <code>.responsive-margin</code> classes to apply responsive padding or margin respectively to any element</li>
<li>The two classes can be combined</li>
<li>Both classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
@@ -1167,10 +1167,10 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>.hidden-<span class="fore-primary">SCR_SZ</span></code> or <code>.visually-hidden-<span class="fore-primary">SCR_SZ</span></code> syntax, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names</li>
<li><code><span class="fore-primary">SCR_SZ</span></code> values:
<ul>
<ul style="text-align:justify">
<li><code><span class="fore-tertiary">sm</span></code> for screens below <code>768px</code> wide</li>
<li><code><span class="fore-tertiary">md</span></code> for screens between <code>768px</code>(inclusive) and <code>1280px</code>(exclusive)</li>
<li><code><span class="fore-tertiary">lg</span></code> for screens wider than <code>1280px</code></li>
@@ -1192,7 +1192,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>To create breadcrumbs, create a <code>&lt;ul&gt;</code> element implementing the <code>.breadcrumbs</code> class</li>
<li>Do not use <code>&lt;ol&gt;</code> for breadcrumbs</li>
<li>Do not nest lists inside the <code>.breadcrumbs</code></li>
@@ -1207,7 +1207,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul style="text-align:justify">
<li>Use the <code>.close</code> class to create a close icon</li>
<li>Use a <code>&lt;span&gt;</code> or <code>&lt;div&gt;</code> element to create a close icon</li>
<li>Use a button element implementing the <code>.close</code> class to stylize the close icon as a button</li>
@@ -1223,6 +1223,6 @@
</div>
</main></div></div></div>
<!-- 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>
<footer style="text-align:justify"><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>
</html>