7cb2329762
All docs (except customization which will be updated in the next commit) have been updated to use the new drawer on mobile and have had their version tags updated. New menu items and links are now properly shown in the menus.
1229 lines
78 KiB
HTML
1229 lines
78 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="mini-default.min.css">
|
|
<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 framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, reference, cheatsheet ">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
|
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
|
<style>
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
|
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
|
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; } @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm.col-lg-offset.col-lg-10{padding: 0 !important;}}
|
|
.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; } .box-left { text-align: left; }
|
|
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
|
.col-sm-12.col-md-6.col-sm-first.col-md-first {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
|
@media (max-width: 767px){.col-sm-12.col-md-6.col-sm-first.col-md-first {border: 0;border-bottom: 1px solid #c9c9c9;}}
|
|
h3 > a{font-size: 1rem;} h2 > a {font-size: 0.85em;} pre {max-height: 400px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="sticky">
|
|
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
|
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
|
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
|
</header>
|
|
<div class="container" style="padding-left: 0.25rem;">
|
|
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
|
<label class="close" for="navigation-toggle"></label>
|
|
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
|
<a href="index.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
|
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
|
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
|
<a href="#core">Core</a> <a href="#grid">Grid</a> <a href="#input_control">Input Control</a> <a href="#navigation">Navigation</a> <a href="#table">Table</a>
|
|
<a href="#card">Card</a> <a href="#tab">Tab</a> <a href="#contextual">Contextual</a> <a href="#progress">Progress</a> <a href="#utility">Utility</a> <br/>
|
|
</nav>
|
|
<!-- Insert your page content here-->
|
|
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Setup & 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>
|
|
<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><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://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
|
<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.2.0/dist/mini-default.min.css"</span>></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><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" id="core">
|
|
<div class="col-sm-12">
|
|
<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> for the root element is <code>16px</code></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>
|
|
|
|
<figure>
|
|
<img src="...">
|
|
<figcaption>Image caption</figcaption>
|
|
</figure></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="grid">
|
|
<div class="col-sm-12">
|
|
<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>Predefined layouts <a href="https://codepen.io/chalarangelo/pen/ygGqQg" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="row cols-sm-6">
|
|
<div>
|
|
<p>col-sm-6</p>
|
|
</div>
|
|
<div>
|
|
<p>col-sm-6</p>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
</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 class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Media object pattern<a href="https://codepen.io/chalarangelo/pen/oBdvPX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="row">
|
|
<div class="col-sm-1">
|
|
<img src="...">
|
|
</div>
|
|
<div class="col-sm">
|
|
<h2>Media object heading</h2>
|
|
<p>Media object content...</p>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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><img></code>) and one for the textual content</li>
|
|
<li>Compatible with most elements</li>
|
|
<li>Can use screen-specific layouts, reordering and offsets</li>
|
|
<li>Media objects can easily be nested inside each other</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="input_control">
|
|
<div class="col-sm-12">
|
|
<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/qqgVKb" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><form>
|
|
<fieldset>
|
|
<legend>Simple 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>
|
|
</fieldset>
|
|
</form></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Link <code><label></code> elements to their respective <code><input></code> elements for ease-of-use</li>
|
|
<li>Use of the <code><fieldset></code> and <code><legend></code> elements is highly recommended</li>
|
|
<li>Forms are inline by default, use <code>.input-group</code> to align elements inside them</li>
|
|
<li>Non-standard input types are not stylized like the rest</li>
|
|
<li>Checkboxes and radio buttons are stylized differently, as shown below</li>
|
|
<li>You can use the grid module's column classes to align form elements or make them responsive</li>
|
|
<li>Avoid using <code>.input-group</code> in aligned forms</li>
|
|
<li>Make <code>.input-group</code>s responsive by adding the <code>.fluid</code> class</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/yVZPEZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="input-group">
|
|
<input type="checkbox" id="check1" tabindex="0">
|
|
<label for="check1">Checkbox</label>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input type="radio" id="rad1" tabindex="0" name="radio-group-1">
|
|
<label for="rad1">Radio</label>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Pre-styled using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, fully accessible</li>
|
|
<li>Create a <code><div <span class="fore-secondary">class</span>=<span class="fore-primary">"input-group"</span>></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">"0"</span></code> to the <code><input></code> element to make full accessible</li>
|
|
<li>Add multiple radio buttons in the same group inside the same <code>.input-group</code> wrapper</li>
|
|
<li>Always use <code>.input-group</code> and follow the code structure provided in the examples</li>
|
|
<li>Remember to use <code><label></code> elements for every single one of your checkbox or radio buttons</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/xRMPJG" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><button>Default button</button>
|
|
<input type="button" class="primary" value="Primary button">
|
|
<input type="reset" class="secondary" value="Secondary button">
|
|
<input type="submit" class="tertiary" value="Tertiary button">
|
|
<button class="inverse">Inverse button</button>
|
|
<button class="small">Small button</button>
|
|
<button class="large">Large button</button>
|
|
<button disabled>Disabled button</button>
|
|
<a href="#" class="button">Link button</a>
|
|
<a href="#" role="button">Link button</a>
|
|
<label class="button">Label button</label>
|
|
<label role="button">Label button</label>
|
|
|
|
<div class="button-group">
|
|
<button>Button</button>
|
|
<button>Button</button>
|
|
<button>Button</button>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> attribute</li>
|
|
<li><code>.primary</code>, <code>.secondary</code>, <code>.tertiary</code> and <code>.inverse</code> color variants</li>
|
|
<li><code>.small</code> and <code>.large</code> size variants</li>
|
|
<li>Create responsive button groups by wrapping multiple button elements inside a <code>.button-group</code> wrapper</li>
|
|
<li>Button groups are responsive, but might be displayed incorrectly in older browsers</li>
|
|
<li>Mix size and color variants, don't mix two variants of the same type</li>
|
|
<li>Avoid using different size variants inside a <code>.button-group</code></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/NbowBz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><input type="file" id="file-input">
|
|
<label for="file-input" class="button">Upload file...</label></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Link an <code><input <span class="fore-secondary">type</span>=<span class="fore-primary">"file"</span>></code> element to a <code><label></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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="navigation">
|
|
<div class="col-sm-12">
|
|
<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 button elements (i.e. <code><button></code>, <code><input <span class="fore-secondary">type</span>=<span class="fore-primary">"button"</span>></code>, <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">button</a>"</span></code> or <code>.button</code>)</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>Drawer <a href="https://codepen.io/chalarangelo/pen/JNvPrB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><header>
|
|
<label for="drawer-checkbox" class="button drawer-toggle"></label>
|
|
</header>
|
|
|
|
<input type="checkbox" id="drawer-checkbox">
|
|
<div class="drawer">
|
|
<label for="drawer-checkbox" class="close"></label>
|
|
<a href="#">Home</a>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Structure as follows:<ol>
|
|
<li><code><label></code> element with the <code>.drawer-toggle</code> class in the <code><header></code> element, linked to the <code class="fore-secondary">id</code> of the <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code> used to toggle the drawer component</li>
|
|
<li><code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code> element with a unique <code class="fore-secondary">id</code></li>
|
|
<li><code><div></code> element with the <code>.drawer</code> class immediately after the <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code></li>
|
|
<li>Empty <code><label></code> element with the <code>.close</code> class inside the <code>.drawer</code>, linked to the <code class="fore-secondary">id</code> of the <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code></li>
|
|
</ol></li>
|
|
<li>Drawers are left-aligned and expand on non-mobile screen sizes by default</li>
|
|
<li>Use <code>.right</code> to create right-aligned drawers or <code>.persistent</code> for non-responsive drawers.</li>
|
|
<li>Apply the <code>.drawer</code> class on a navigation bar and combine with grid classes for best results</li>
|
|
<li>Use the syntax exactly as presented in the examples, do not add elements between the checkbox and the container</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 class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Sticky headers and footers <a href="https://codepen.io/chalarangelo/pen/ZLVMzX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><header class="sticky">
|
|
<a href="#" class="logo">Logo</a> <button>Home</button> <button>About</button>
|
|
</header>
|
|
|
|
<footer class="sticky">
|
|
<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>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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="table">
|
|
<div class="col-sm-12">
|
|
<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/XNOzBv" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><table>
|
|
<caption>People</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Surname</th>
|
|
<th>Alias</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Name">Chad</td>
|
|
<td data-label="Surname">Wilberts</td>
|
|
<td data-label="Alias">MrOne</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Alias">TheSmith</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Sophia</td>
|
|
<td data-label="Surname">Canderson</td>
|
|
<td data-label="Alias">Candee</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Table structure is as follows:
|
|
<ol>
|
|
<li><code><table></code> element is the table's root element</li>
|
|
<li><code><caption></code> (optional) serves as the table's title and must be the first element inside the table</li>
|
|
<li><code><thead></code> serves as the table's header row, populated with <code><th></code></li>
|
|
<li><code><tfoot></code> (optional) serves as the table's footer and must be immediately after <code><thead></code></li>
|
|
<li><code><tbody></code> is the table's body, populated with <code><td></code> elements</li>
|
|
</ol>
|
|
</li>
|
|
<li>Tables are responsive and collapse into cards on mobile devices</li>
|
|
<li>Always specify a <code>data-label</code> for each <code><td></code> element corresponding to the column's header to properly display table on mobile devices</li>
|
|
<li>Avoid having multiline <code><thead></code> elements, however if you need to, you can use <a href="https://codepen.io/chalarangelo/pen/VPqWQE">this fix</a></li>
|
|
<li>For horizontal tables or matrices, check the examples below</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/vybWzx" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><table class="horizontal">
|
|
<caption>People</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Surname</th>
|
|
<th>Alias</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Name">Chad</td>
|
|
<td data-label="Surname">Wilberts</td>
|
|
<td data-label="Alias">MrOne</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Alias">TheSmith</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Sophia</td>
|
|
<td data-label="Surname">Canderson</td>
|
|
<td data-label="Alias">Candee</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Use the <code>.horizontal</code> class to make a <code><table></code> horizontal</li>
|
|
<li>Does not support the <code><tfoot></code> element</li>
|
|
<li>Horizontal tables might not be fully compatible with older browsers</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/qqgVQZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><table class="preset">
|
|
<caption>Star Wars Character Alignment Table</caption>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th>Lawful</td>
|
|
<th>Neutral</td>
|
|
<th>Chaotic</td>
|
|
</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>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="striped">
|
|
<caption>People</caption>
|
|
<thead>
|
|
<span class="fore-primary"><!-- ... --></span>
|
|
</thead>
|
|
<tbody>
|
|
<span class="fore-primary"><!-- ... --></span>
|
|
</tbody>
|
|
</table></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Use the <code>.striped</code> class to make a <code><table></code> striped</li>
|
|
<li>Use the <code>.preset</code> class to make a <code><table></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>
|
|
<li>You can combine <code>.striped</code>, <code>.preset</code> and <code>.horizontal</code>, respecting the rules of the combined structures</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="card">
|
|
<div class="col-sm-12">
|
|
<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/NbowEB" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="row">
|
|
<div class="card">
|
|
<div class="section">
|
|
<h3>Card Title</h3>
|
|
<p>Card content...</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="section">
|
|
<h3>Card Title</h3>
|
|
<p>Card content...</p>
|
|
</div>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Requires familiarity with the grid module</li>
|
|
<li>Card structure as follows:
|
|
<ol>
|
|
<li><code>.row</code> element is the outermost wrapper of the cards layout</li>
|
|
<li><code><div <span class="fore-secondary">class</span>=<span class="fore-primary">"card"</span>></code> elements are the cards</li>
|
|
<li><code>.section</code> elements inside the <code>.card</code> serve as the card's sections</li>
|
|
</ol>
|
|
</li>
|
|
<li>Cards are responsive, might be incompatible with older browsers</li>
|
|
<li>A card can have as many sections as needed, sections can be almost any element</li>
|
|
<li>Wrap all card content in <code>.section</code> classes</li>
|
|
<li>Add multiple <code>.card</code> elements in the same <code>.row</code></li>
|
|
<li>Cards cannot be rows or columns at the same time, sections can be rows</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/gWvJEw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="card">
|
|
<img src="..." class="section media">
|
|
<div class="section double-padded"><p>Content</p></div>
|
|
<div class="section dark"><p>Content</p></div>
|
|
<div class="section darker"><p>Content</p></div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
<li><code>.media</code> sections might not be fully supported in older browsers</li>
|
|
<li><code>.media</code> sections have a preset height of <code>200px</code></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/mOvqaM" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="card small">
|
|
<div class="section">
|
|
<p>Content</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card large">
|
|
<div class="section">
|
|
<p>Content</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<p>Content</p>
|
|
</div>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
<li>Always wrap <code>.fluid</code> cards in columns, don't mix with non-fluid cards</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Card color variants <a href="https://codepen.io/chalarangelo/pen/BRYeeW" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="card warning">
|
|
<div class="section">
|
|
<p>Warning</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card error">
|
|
<div class="section">
|
|
<p>Error</p>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="tab">
|
|
<div class="col-sm-12">
|
|
<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/QGYOzZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="tabs">
|
|
<input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
|
|
<label for="tab1" aria-hidden="true">Tab 1</label>
|
|
<div>
|
|
<h3>Tab 1</h3>
|
|
<p>This is the first tab's content.</p>
|
|
</div>
|
|
<input type="radio" name="tab-group" id="tab2" aria-hidden="true">
|
|
<label for="tab2" aria-hidden="true">Tab 2</label>
|
|
<div>
|
|
<h3>Tab 2</h3>
|
|
<p>This is the second tab's content.</p>
|
|
</div>
|
|
<input type="radio" name="tab-group" id="tab3" aria-hidden="true">
|
|
<label for="tab3" aria-hidden="true">Tab 3</label>
|
|
<div>
|
|
<h3>Tab 3</h3>
|
|
<p>This is the third tab's content.</p>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Tabs structure as follows:
|
|
<ol>
|
|
<li><code>.tabs</code> element is the outermost wrapper of the tabbed layout</li>
|
|
<li>Multiple <code><input <span class="fore-secondary">type</span>=<span class="fore-primary">"radio"</span>></code> elements followed by their linked <code><label></code> elements are the titles of tabs<li>
|
|
<li>Multiple <code><div></code> elements, each one after the <code><label></code> of the tab it corresponds to, as the content of each tab</li>
|
|
</ol>
|
|
</li>
|
|
<li>Tabs are responsive, might be incompatible with some older browsers</li>
|
|
<li>Make a radio button <code><span class="fore-secondary">checked</span></code> to select the tab open by default</li>
|
|
<li>Use <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">"true"</span></code> to input elements to add accessibility</li>
|
|
<li>Use the syntax exactly as presented in the examples, do not substitute with checkboxes</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/MbLOZd" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="tabs stacked">
|
|
<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"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">
|
|
<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" 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></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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">"true"</span></code> to input elements in order to add accessibility</li>
|
|
<li>Use either checkboxes or radio buttons as the <code><input></code> elements of stacked tabs</li>
|
|
<li>Use single checkbox in a <code>.stacked</code> tabs container, but not a single radio button</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="contextual">
|
|
<div class="col-sm-12">
|
|
<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/gLqXqo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><mark>primary</mark>
|
|
<mark class="secondary">secondary</mark>
|
|
<mark class="tertiary">tertiary</mark>
|
|
<mark class="inline-block">long highlight text...</mark>
|
|
<mark class="tag">tag</mark></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Use the <code><mark></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>
|
|
<li>Use the <code>.tag</code> class for highlighted tags</li>
|
|
<li>Combine color variants with the <code>.inline-block</code> or <code>.tag</code> class, do not combine color variants or <code>.tag</code> and <code>.inline-block</code> with each other</li>
|
|
<li>Do not nest <code><mark></code> elements, unless the outer element is an <code>.inline-block</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Toasts <a href="https://codepen.io/chalarangelo/pen/XREdeq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><span class="toast">This is a normal toast message!</span>
|
|
<span class="toast small">This is a large toast message!</span>
|
|
<span class="toast large">This is a small toast message!</span></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Use the <code>.toast</code> class on <code><span></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>
|
|
<li>Toasts display at the bottom of the screen on top of everything else</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Tooltips <a href="https://codepen.io/chalarangelo/pen/MJZPrM" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><span class="tooltip" aria-label="This is a tooltip">Hover over this text to see a tooltip!</span>
|
|
<span class="tooltip bottom" aria-label="This is a tooltip">Hover over this text to see a reverse tooltip!</span></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="progress">
|
|
<div class="col-sm-12">
|
|
<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/BQMMyX" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><progress value="0" max="1000"></progress>
|
|
<progress value="450" max="1000"></progress>
|
|
<progress value="1000" max="1000"></progress></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Use the <code><progress></code> element to create progress bars</li>
|
|
<li>Set <code><span class="fore-secondary">max</span>=<span class="fore-primary">"1000"</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>
|
|
</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/OmQePm" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><progress class="secondary" value="600" max="1000"></progress>
|
|
<progress class="tertiary" value="300" max="1000"></progress>
|
|
<progress class="inline" value="150" max="1000"></progress></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
</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/XNOOba" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="spinner-donut"></div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Use the <code>.spinner-donut</code> class to create donut spinners</li>
|
|
<li>Apply class to a <code><div></code> or <code><span></code> element</li>
|
|
<li>Do not insert text inside the <code>.spinner-donut</code> element</li>
|
|
<li>Donut spinners can be displayed inline</li>
|
|
<li>Use the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a>"</span></code> attribute to make donut spinner accessible</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/VmggLE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="spinner-donut secondary"></div>
|
|
<div class="spinner-donut tertiary"></div>
|
|
<div class="spinner-donut large"></div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="utility">
|
|
<div class="col-sm-12">
|
|
<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/ObddVK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><span class="hidden">Hidden text</span>
|
|
<span class="visually-hidden">Screen-reader-only text</span></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
<li>Do not use both classes together</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Generic borders & shadows <a href="https://codepen.io/chalarangelo/pen/bWLPdo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><span class="bordered">Bordered</span>
|
|
<span class="rounded">Rounded</span>
|
|
<span class="circular">Circular</span>
|
|
<span class="shadowed">Casts shadow</span></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
<li>Combine generic borders, border radii and generic shadows with each other but not with themselves</li>
|
|
<li>All classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
|
|
<li>Generic borders work well with buttons</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/VmggvE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="responsive-padding">Responsive padding</div>
|
|
<div class="responsive-margin">Responsive margin</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Responsive visibility helpers <a href="https://codepen.io/chalarangelo/pen/EmVvWz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><span class="hidden-sm">Hidden in smaller screens</span>
|
|
<span class="hidden-md">Hidden in medium-sized screens</span>
|
|
<span class="hidden-lg">Hidden in larger screens</span>
|
|
|
|
<span class="visually-hidden-sm">Visually hidden in smaller screens</span>
|
|
<span class="visually-hidden-md">Visually hidden in medium-sized screens</span>
|
|
<span class="visually-hidden-lg">Visually hidden in larger screens</span></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<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>
|
|
<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>Responsive visibility helper classes can be combined for different screen sizes, avoid using both for the same size</li>
|
|
<li>Responsive visibility helper classes use <code><span class="fore-secondary">!important</span></code> declarations</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/bBzzEN" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><ul class="breadcrumbs">
|
|
<li><a href="#">Root</a></li>
|
|
<li><a href="#">Folder</a></li>
|
|
<li>File</li>
|
|
</ul></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>To create breadcrumbs, create a <code><ul></code> element implementing the <code>.breadcrumbs</code> class</li>
|
|
<li>Do not use <code><ol></code> for breadcrumbs</li>
|
|
<li>Do not nest lists inside the <code>.breadcrumbs</code></li>
|
|
<li>Use the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://www.w3.org/TR/wai-aria/roles#navigation">navigation</a>"</span></code> attribute to make breadcrumbs accessible</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/KNJJVM" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><span class="close"></span></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Use the <code>.close</code> class to create a close icon</li>
|
|
<li>Use a <code><span></code> or <code><div></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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row box-centered">
|
|
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
|
</div>
|
|
</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>
|
|
</body>
|
|
</html>
|