3b621be609
Core module has been initialized, as well as a default flavor. Minor changes (read DEVLOG), moved things around, cleaned up some things and built some of the basic features.
1320 lines
83 KiB
HTML
1320 lines
83 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" class="logo"><span id="header-logo">m</span></a>
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="index" class="button hidden-sm">Introduction</a> <a href="modules" class="button hidden-sm">Modules</a>
|
|
<a href="flavors" class="button hidden-sm">Flavors</a> <a href="templates" class="button hidden-sm">Templates</a>
|
|
<a href="customization" class="button hidden-sm">Customization</a> <a href="quick_reference" 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"><h4 style="margin-left: 0;">Introduction</h4></a>
|
|
<a href="modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
|
<a href="flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<a href="customization"><h4 style="margin-left: 0;">Customization</h4></a>
|
|
<a href="quick_reference"><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 style="text-align:justify">If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules">modules</a> page.</p>
|
|
<p style="text-align:justify"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Setup & usage</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">You can download <strong>mini.css</strong> using <strong>npm</strong>, <strong>yarn</strong> or <strong>Bower</strong>:</p>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-12 col-lg-4"><pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre></div>
|
|
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">yarn add</span> <span class="fore-primary">mini.css</span></pre></div>
|
|
<div class="col-sm-12 col-md-6 col-lg-4"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
|
|
</div><br>
|
|
<p style="text-align:justify">You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references inside your HTML page's <code><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.3.4/dist/mini-default.min.css"</span>></pre><br>
|
|
<p style="text-align:justify">You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
|
|
<p style="text-align:justify">We strongly suggest you add the following line inside your HTML page's <code><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" 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 style="text-align:justify">
|
|
<li>Basic reset and fix rules applied, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0</li>
|
|
<li>A <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> is used</li>
|
|
<li>The colors are set to <code>background: #f5f5f5;</code> and <code>color: #212121;</code></li>
|
|
<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" 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 style="text-align:justify">
|
|
<li>Based on the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout Module</a></li>
|
|
<li>Grid structured as follows:
|
|
<ol>
|
|
<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 style="text-align:justify">
|
|
<li><code><span class="fore-tertiary">sm</span></code> for screens below <code>768px</code> wide</li>
|
|
<li><code><span class="fore-tertiary">md</span></code> for screens between <code>768px</code>(inclusive) and <code>1280px</code>(exclusive)</li>
|
|
<li><code><span class="fore-tertiary">lg</span></code> for screens wider than <code>1280px</code></li>
|
|
</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 style="text-align:justify">
|
|
<li>Apply multiple column classes to the same element, one for each screen size, to define different layouts</li>
|
|
<li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
|
|
<li>Try to make page content vertical for smaller devices, using <code>.col-sm-12</code> and transition to two or three columns on larger screen sizes</li>
|
|
<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 style="text-align:justify">
|
|
<li>Available both as fluid column layouts, using <code>.cols-<span class="fore-primary">SCR_SZ</span></code>, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names and fixed width column layouts, using <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code>, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names and <code><span class="fore-secondary">COL_WD</span></code> with a number from <code>1</code> to <code>12</code> specifying the width of the columns</li>
|
|
<li>Can define screen-specific predefined layouts</li>
|
|
<li>Can be combined with offsets and reordering, but not normal grid layout classes</li>
|
|
</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 style="text-align:justify">
|
|
<li>Create offsets using the <code>.col-<span class="fore-primary">SCR_SZ</span>-offset-<span class="fore-secondary">COL_WD</span></code> classes</li>
|
|
<li><code><span class="fore-secondary">COL_WD</span></code> can be any integer from <code>0</code> to <code>11</code> (both inclusive)</li>
|
|
<li>You can mix offset columns and non-offset columns</li>
|
|
<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 style="text-align:justify">
|
|
<li>Create reorders using <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code>, <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code> and <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code> classes for first, last and normal ordering respectively</li>
|
|
<li>Default ordering is based on order of appearance</li>
|
|
<li>Specify reorders in combination with existing column styling, not instead</li>
|
|
<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 style="text-align:justify">
|
|
<li>Not a new component, rather a <a href="https://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">popular pattern</a></li>
|
|
<li>Use two columns, one for the media (i.e. <code><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" 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>
|
|
<div class="input-group vertical">
|
|
<label for="nmbr">Number</label>
|
|
<input type="number" id="nmbr" value="5">
|
|
</div>
|
|
</fieldset>
|
|
</form></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align:justify">
|
|
<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>
|
|
<li>Vertically align <code>.input-group</code>s using the <code>.vertical</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 style="text-align:justify">
|
|
<li>Pre-styled using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, fully accessible</li>
|
|
<li>Create a <code><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>Switches <a href="https://codepen.io/chalarangelo/pen/rwxBPv" 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="switch1" tabindex="0">
|
|
<label for="switch1" class="switch">Checkbox switch</label>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<input type="radio" id="radswitch1" tabindex="0" name="radio-group-1">
|
|
<label for="radswitch1" class="switch">Radio switch</label>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align:justify">
|
|
<li>Use the same structure as checkboxes and radios, add <code>.switch</code> to the <code><label></code> element</li>
|
|
<li>Add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">"0"</span></code> to the <code><input></code> element for accessibility</li>
|
|
<li>You can add two <code><label></code> elements inside the <code>.input-group</code>, the first one containing the text and the second one the <code>.switch</code> component to reverse the switch's layout</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 style="text-align:justify">
|
|
<li>All button types have been stylized</li>
|
|
<li>Button styles are available for other elements, using the <code>.button</code> class or the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<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 style="text-align:justify">
|
|
<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" 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 style="text-align:justify">
|
|
<li>Use the <code>.logo</code> class for the first child (either textual element or image)</li>
|
|
<li>The rest of the elements inside the <code><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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<li>Use <code>.sticky</code> class to create</li>
|
|
<li>Compatible with modern browsers, support for <a href="http://caniuse.com/#feat=css-sticky"><code>position:sticky</code></a> is growing</li>
|
|
</ul>
|
|
</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" 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 style="text-align:justify">
|
|
<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>Scrollable tables <a href="https://codepen.io/chalarangelo/pen/OgMgRb" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><table class="scrollable">
|
|
<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 style="text-align:justify">
|
|
<li>Use the <code>.scrollable</code> class to make a <code><table></code> scrollable</li>
|
|
<li>Does not support the <code><tfoot></code> element</li>
|
|
<li>Scrollable 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>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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<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" 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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<li>Create media sections for images or video, using the <code>.media</code> class</li>
|
|
<li>Color variants for sections are available using the <code>.dark</code> and <code>.darker</code> classes</li>
|
|
<li>Extra padding section variant available using the <code>.double-padded</code> class</li>
|
|
<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 style="text-align:justify">
|
|
<li>Card size variants available using the <code>.large</code> and <code>.small</code> classes</li>
|
|
<li>Fluid cards available using the <code>.fluid</code> class, require the use of grid columns</li>
|
|
<li>Fluid cards might not display properly in older browsers and will sometimes slightly disrespect margins on certain layouts</li>
|
|
<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 style="text-align:justify">
|
|
<li>Create yellow warning cards, using the <code>.warning</code> class</li>
|
|
<li>Create red error cards, using <code>.error</code> class</li>
|
|
<li>Avoid combining two or more card color variants</li>
|
|
</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" 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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<li>Use the <code>.stacked</code> class to create stacked tabs</li>
|
|
<li>Use <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">"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" 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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<li>Create using the <code>.tooltip</code> class</li>
|
|
<li>Put tooltip text in the <code><span class="fore-secondary">aria-label</span></code> attribute's value</li>
|
|
<li>Use the <code>.bottom</code> class to make a tooltip display at the bottom of its context</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Modals <a href="https://codepen.io/chalarangelo/pen/rwagLK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><label for="modal-toggle">Show modal</label>
|
|
|
|
<input id="modal-toggle" type="checkbox"/>
|
|
<div class="modal">
|
|
<div class="card">
|
|
<label for="modal-toggle" class="close"></label>
|
|
<h3 class="section">Modal</h3>
|
|
<p class="section">This is a modal window!</p>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align:justify">
|
|
<li>Create an <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">checkbox</span>"></code> element, immediately followed by a <code><div></code> element with the <code>.modal</code> class</li>
|
|
<li>Use a <code>.card</code> inside the <code>.modal</code> to display contents</li>
|
|
<li>Remember to use a <code><label></code> or some Javascript to allow users to close the dialog</li>
|
|
<li>Modal dialogs can be placed and toggled from anywhere, although the structure must be kept intact</li>
|
|
<li>Use <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_dialog_role">dialog</a>"</span></code> to add accessibility to modal dialogs</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" 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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<li>Color variants available using the <code>.secondary</code> and <code>.tertiary</code> classes</li>
|
|
<li>Inline variant available using the <code>.inline</code> class</li>
|
|
<li>Mix color and size variants, but not multiple of the same type</li>
|
|
</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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<li>Color variants available using the <code>.secondary</code> and <code>.tertiary</code> classes</li>
|
|
<li>Alternate size available using the <code>.large</code> class</li>
|
|
<li>You can mix color variants with the <code>.large</code> class, but not with each other</li>
|
|
</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" 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 style="text-align:justify">
|
|
<li>Use <code>.hidden</code> to hide elements</li>
|
|
<li>Use <code>.visually-hidden</code> to show elements only in screen readers</li>
|
|
<li>Both classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
|
|
<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 style="text-align:justify">
|
|
<li>Create generic borders using <code>.bordered</code></li>
|
|
<li>Rounded and circular border radii available using <code>.rounded</code> and <code>.circular</code> classes</li>
|
|
<li>Generic shadows available using the <code>.shadowed</code> class</li>
|
|
<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 style="text-align:justify">
|
|
<li>Use the <code>.responsive-padding</code> and <code>.responsive-margin</code> classes to apply responsive padding or margin respectively to any element</li>
|
|
<li>The two classes can be combined</li>
|
|
<li>Both classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
|
|
</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 style="text-align:justify">
|
|
<li>Use the <code>.hidden-<span class="fore-primary">SCR_SZ</span></code> or <code>.visually-hidden-<span class="fore-primary">SCR_SZ</span></code> syntax, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names</li>
|
|
<li><code><span class="fore-primary">SCR_SZ</span></code> values:
|
|
<ul style="text-align:justify">
|
|
<li><code><span class="fore-tertiary">sm</span></code> for screens below <code>768px</code> wide</li>
|
|
<li><code><span class="fore-tertiary">md</span></code> for screens between <code>768px</code>(inclusive) and <code>1280px</code>(exclusive)</li>
|
|
<li><code><span class="fore-tertiary">lg</span></code> for screens wider than <code>1280px</code></li>
|
|
</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 style="text-align:justify">
|
|
<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 style="text-align:justify">
|
|
<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 style="text-align:justify"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
|
</body>
|
|
</html>
|