mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 13:56:27 +02:00
Code Issues Releases Wiki Activity

Quick reference page layout complete

Browse Source
This commit is contained in:
Angelos Chalaris
2016-12-16 23:25:19 +02:00
parent 9829deefb1
commit 932f700f0c
4 changed files with 412 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
docs/quick_reference.html
View File

@@ -375,6 +375,414 @@
</div>
</div>
</div>
<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 row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Header <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Navigation bar <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Footer <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<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>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Forms &amp; input <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Checkboxes &amp; radio buttons <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Buttons &amp; button groups <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>File upload buttons <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<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 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/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Horizontal tables <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Table variants &amp; matrices <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<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 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/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Sections &amp; media <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Card sizing &amp; fluidity <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<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 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/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Stacked tabs <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<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 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/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Alerts <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Animated alerts <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<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 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/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Progress bar variants <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Donut spinner <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Donut spinner variants <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<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 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/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Floats, centering &amp; clearfix <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Generic border &amp; shadows <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Responsive sizing &amp; spacing classes <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Breadcrumbs <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Close icon <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>
<pre></pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row box-centered">
<div class="col-sm-12">
</div>