821 lines
41 KiB
HTML
821 lines
41 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Live demo styled as of 20161213 -->
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/0f7cd386b36094d9878c6b43bc8aa58d010c450d/dist/mini-default.min.css">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Quick Reference</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, reference, cheatsheet">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<style>
|
|
/* Classes and ids used in multiple pages - page top and utilities */
|
|
#header-logo {
|
|
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
|
padding: 4px;
|
|
}
|
|
#top-logo {
|
|
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
|
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
#top-heading {
|
|
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
|
}
|
|
#top-version-tag {
|
|
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
|
}
|
|
.box-centered { text-align: center; }
|
|
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
|
.box-colored.red { background: #b71c1c; }
|
|
.box-centered > .card.fluid {
|
|
-webkit-box-pack: start;
|
|
-webkit-box-align: start;
|
|
-webkit-justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
-webkit-align-self: auto;
|
|
align-self: auto;
|
|
}
|
|
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
|
/* Local classes and ids for this page */
|
|
.box-left { text-align: left; }
|
|
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
|
|
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
|
|
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
|
|
.col-sm-12.col-md-6.col-sm-first.col-md-first {
|
|
box-sizing: border-box;
|
|
border-right: 1px solid #bdbdbd;
|
|
}
|
|
@media (max-width: 767px){
|
|
.col-sm-12.col-md-6.col-sm-first.col-md-first {
|
|
border: 0;
|
|
border-bottom: 1px solid #bdbdbd;
|
|
}
|
|
}
|
|
h3 > a{
|
|
font-size: 1rem;
|
|
}
|
|
h2 > a {
|
|
font-size: 0.85em;
|
|
}
|
|
pre {
|
|
max-height: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;">
|
|
<a href="index.html" class="button">Introduction</a>
|
|
<a href="modules.html" class="button">Modules</a>
|
|
<a href="flavors.html" class="button">Flavors</a>
|
|
<a href="customization.html" class="button">Customization</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
|
</div>
|
|
</header>
|
|
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="box-centered">
|
|
<img src="mini-logo.svg" id="top-logo">
|
|
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
|
<mark class="tertiary" id="top-version-tag">v2.0</mark>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Insert your page content here-->
|
|
<main><div class="container">
|
|
<div class="row" style="padding-top: 40px;">
|
|
<div class="col-sm">
|
|
<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 toolkit 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>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Setup & 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><head></code> tag:</p>
|
|
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css"</span>></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>
|
|
<p>We strongly suggest you add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p>
|
|
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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> 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> View on Codepen</a></h3>
|
|
<pre><h1>Heading 1<small>Subheading</small></h1>
|
|
<h2>Heading 2<small>Subheading</small></h2>
|
|
<h3>Heading 3<small>Subheading</small></h3>
|
|
<h4>Heading 4<small>Subheading</small></h4>
|
|
<h5>Heading 5<small>Subheading</small></h5>
|
|
<h6>Heading 6<small>Subheading</small></h6></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Typography</h3>
|
|
<ul>
|
|
<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>
|
|
<li>The <code>font-size</code> is <code>16px</code> for the root element</li>
|
|
<li>The <code>line-height</code> is <code>1.5</code></li>
|
|
<li>All HTML headings are pre-styled</li>
|
|
<li>Styling provided for <code><small></code> elements inside headings</li>
|
|
<li>Common HTML elements like paragraphs, horizontal rules, lists and code elements are pre-styled</li>
|
|
<li>Images are responsive by default</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Common textual elements <a href="https://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><p>This is a paragraph with some <strong>bold text</strong> and some <em>italics text</em>.</p>
|
|
<a href="#">This is a link.</a>
|
|
<small>This is some small text.</small>
|
|
<sub>Subscript</sub>
|
|
<sup>Superscript</sup>
|
|
<code>Inline code</code>
|
|
<kbd>Keyboard Input</kbd>
|
|
<hr>
|
|
<pre>This is some preformatted text.</pre>
|
|
<blockquote cite="Quotation source">
|
|
This is some quoted text from another website or person.
|
|
</blockquote></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Lists & images<a href="https://codepen.io/chalarangelo/pen/woRKay" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><ul>
|
|
<li>Apple</li>
|
|
<li>Orange</li>
|
|
<li>Strawberry</li>
|
|
</ul>
|
|
|
|
<ol>
|
|
<li>Wake up</li>
|
|
<li>Eat breakfast</li>
|
|
<li>Go to work</li>
|
|
</ol>
|
|
|
|
<img src="..."></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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> 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> View on Codepen</a></h3>
|
|
<pre><div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-1">
|
|
</div>
|
|
<div class="col-sm-11">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
</div>
|
|
<div class="col-sm-10">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-3">
|
|
</div>
|
|
<div class="col-sm-9">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
</div>
|
|
<div class="col-sm-8">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-5">
|
|
</div>
|
|
<div class="col-sm-7">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
</div>
|
|
<div class="col-sm-6">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
</div>
|
|
<div class="col-sm">
|
|
</div>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
<li><code>.container</code> serves as the grid system's wrapper</li>
|
|
<li>Multiple <code>.row</code> elements serve as the grid system's rows</li>
|
|
<li>Multiple <code>.col-<span class="fore-primary">SCR_SZ</span></code> and/or <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code> elements specify serve as the grid system's columns (fluid and preset respectively)</li>
|
|
</ol>
|
|
</li>
|
|
<li><code><span class="fore-primary">SCR_SZ</span></code> values:
|
|
<ul>
|
|
<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>
|
|
</ul>
|
|
</li>
|
|
<li><code><span class="fore-secondary">COL_WD</span></code> can be any integer value between <code>1</code> and <code>12</code> (both inclusive)</li>
|
|
<li>Fluid columns can create irregularly-sized columns in a layout</li>
|
|
<li>You can nest rows inside columns, but not columns inside columns or rows inside rows</li>
|
|
<li>An element can be a row and column at the same time</li>
|
|
<li>You can mix preset and fluid columns</li>
|
|
<li>Always wrap content in columns, never leave content unwrapped inside a row</li>
|
|
<li>Do not mix rows or columns with unwrapped content on the same level</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Screen-specific layouts <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="container">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-3 col-lg-2">
|
|
</div>
|
|
<div class="col-sm-12 col-md-5 col-lg-7">
|
|
</div>
|
|
<div class="col-sm-12 col-md-4 col-lg-3">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
</div>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
<li>Combine with offsets and reordering as shown below</li>
|
|
<li>You can omit the style of a screen size if it is the same one as the one applied in the immediately smaller screen size</li>
|
|
<li>Always start with a <code>.col-sm</code> or <code>.col-sm-<span class="fore-secondary">COL_WD</span></code> style, otherwise smaller devices will not display your content properly</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Column offsets <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-10 col-sm-offset-1">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm col-sm-offset-2">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6 col-sm-offset-3">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-8 col-sm-offset-4">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-5 col-sm-offset-1">
|
|
</div>
|
|
<div class="col-sm-5 col-sm-offset-1">
|
|
</div>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
<li>Specify offsets in combination with existing column styling, not instead</li>
|
|
<li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
|
|
<li>You can omit offsets whenever not needed, but you will have to override existing offsets for larger screen sizes, using <code>.col-<span class="fore-primary">SCR_SZ</span>-offset-0</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Column reordering <a href="https://codepen.io/chalarangelo/pen/vyvyNo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="container">
|
|
<div class="row">
|
|
<div class="col-sm col-md-last col-lg-normal">
|
|
</div>
|
|
<div class="col-sm-first col-md-normal">
|
|
</div>
|
|
<div class="col-sm col-md-first col-lg-normal">
|
|
</div>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
<li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
|
|
<li>You can use multiple <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code> and <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code> elements to group your elements according to the desired layout</li>
|
|
<li>You can omit reorders whenever not needed, but you will have to override existing reorders for larger screen sizes, using <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</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> 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> View on Codepen</a></h3>
|
|
<pre><header>
|
|
<a href="#" class="logo">Logo</a>
|
|
<button>Home</button>
|
|
<a href="#" class="button">News</a>
|
|
<span>|</span>
|
|
<button>About</button>
|
|
<button>Contact</button>
|
|
</header></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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><header></code> must be <code><button></code>, <code><label class="button"></code> or <code><a class="button"></code> elements</li>
|
|
<li>Use <code><span></code> elements as separators</li>
|
|
<li>You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons</li>
|
|
<li>The logo element should not be a <code><button></code> element or of the <code>.button</code> class</li>
|
|
<li>Header is not displayed as fixed by default</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/ENGbwa" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><nav>
|
|
<a href="#">Home</a>
|
|
<span>News</span>
|
|
<a href="#" class="sublink-1">New Courses</a>
|
|
<a href="#" class="sublink-1">Certifications</a>
|
|
<span class="sublink-1">Events</span>
|
|
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
|
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
|
<a href="#" class="sublink-1">Policy Update</a>
|
|
<a href="#">About</a>
|
|
<a href="#">Contact</a>
|
|
</nav></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Use <code><nav></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>
|
|
</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/dOwZVO" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><footer>
|
|
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
|
</footer></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Simple syntax and structure, add content as normal</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> Input Control</h2>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Forms & input <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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 & radio buttons <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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 & button groups <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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> 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> Table</h2>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Basic syntax & responsiveness <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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> 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 & matrices <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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> 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> 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 & media <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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 & fluidity <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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 & clearfix <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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 & shadows <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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 & spacing classes <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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> 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> 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>
|
|
</div>
|
|
</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>
|
|
</html> |