1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-22 13:21:56 +02:00

Quick Reference housekeeping

This commit is contained in:
Angelos Chalaris 2017-02-07 12:28:41 +02:00
parent 9d002418c2
commit b7abad8230
2 changed files with 15 additions and 39 deletions

@ -44,22 +44,15 @@
<div class="row">
<div class="col-sm">
<div class="card fluid">
<div class="section">
<h2>Setup &amp; usage</h2>
</div>
<div class="section"><h2>Setup &amp; usage</h2></div>
<div class="section">
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference 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://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<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.1.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
<div class="row">
<div class="col-sm-12 col-md-6">
<pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre>
</div>
<div class="col-sm-12 col-md-6">
<pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre>
</div>
</div>
<br>
<div class="col-sm-12 col-md-6"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
<div class="col-sm-12 col-md-6"><pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre></div>
</div><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>
<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>
@ -69,9 +62,7 @@
<div class="row">
<div class="col-sm">
<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.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 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>
@ -136,9 +127,7 @@
<div class="row">
<div class="col-sm">
<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.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 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>
@ -323,9 +312,7 @@
<div class="row">
<div class="col-sm">
<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.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 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>
@ -508,9 +495,7 @@
<div class="row">
<div class="col-sm">
<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.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 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>
@ -659,9 +644,7 @@
<div class="row">
<div class="col-sm">
<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.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 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>
@ -764,9 +747,7 @@
<div class="row">
<div class="col-sm">
<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.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 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>
@ -855,9 +836,7 @@
<div class="row">
<div class="col-sm">
<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.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 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>
@ -933,9 +912,7 @@
<div class="row">
<div class="col-sm">
<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.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 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>
@ -1006,9 +983,7 @@
<div class="row">
<div class="col-sm">
<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.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 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>

@ -831,3 +831,4 @@
- Shrinked the size of `core.html`, minimized the internal CSS of the page.
- Minimized the internal CSS of all the pages.
- Shrinked page sizes a little bit across all pages, except `quick_reference.html`.
- Minor updates to `quick_reference.html` to get size a bit lower.