1210 lines
76 KiB
HTML
1210 lines
76 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; }
|
|
.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 #bdbdbd;}
|
|
@media (max-width: 767px){.col-sm-12.col-md-6.col-sm-first.col-md-first {border: 0;border-bottom: 1px solid #bdbdbd;}}
|
|
h3 > a{font-size: 1rem;} h2 > a {font-size: 0.85em;} pre {max-height: 400px;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
|
|
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.html" class="button">Customization</a>
|
|
<a href="quick_reference.html" class="button">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>
|
|
<header class="sticky" style="height:36px;">
|
|
<a href="#core" class="button">Core</a> <a href="#grid" class="button">Grid</a>
|
|
<a href="#navigation" class="button">Navigation</a> <a href="#input_control" class="button">Input Control</a>
|
|
<a href="#table" class="button">Table</a> <a href="#card" class="button">Card</a>
|
|
<a href="#tab" class="button">Tab</a> <a href="#contextual" class="button">Contextual</a>
|
|
<a href="#progress" class="button">Progress</a> <a href="#utility" class="button">Utility</a>
|
|
</header>
|
|
<!-- Insert your page content here-->
|
|
<main><div class="container">
|
|
<div class="row" style="padding-top: 40px;">
|
|
<div class="col-sm col-lg-10 col-lg-offset-1">
|
|
<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 col-lg-10 col-lg-offset-1">
|
|
<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.1.3/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 col-lg-10 col-lg-offset-1">
|
|
<div class="card fluid">
|
|
<div class="section"><h2><a href="core.html" target="_blank" class="button primary small"><i class="fa fa-font fa-fw" aria-hidden="true"></i></a> Core</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Headings <a href="https://codepen.io/chalarangelo/pen/ZBVGMq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><h1>Heading 1<small>Subheading</small></h1>
|
|
<h2>Heading 2<small>Subheading</small></h2>
|
|
<h3>Heading 3<small>Subheading</small></h3>
|
|
<h4>Heading 4<small>Subheading</small></h4>
|
|
<h5>Heading 5<small>Subheading</small></h5>
|
|
<h6>Heading 6<small>Subheading</small></h6></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Typography</h3>
|
|
<ul>
|
|
<li>Basic reset and fix rules applied, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0</li>
|
|
<li>A <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> is used</li>
|
|
<li>The colors are set to <code>background: #f5f5f5;</code> and <code>color: #212121;</code></li>
|
|
<li>The <code>font-size</code> is <code>16px</code> for the root element</li>
|
|
<li>The <code>line-height</code> is <code>1.5</code></li>
|
|
<li>All HTML headings are pre-styled</li>
|
|
<li>Styling provided for <code><small></code> elements inside headings</li>
|
|
<li>Common HTML elements like paragraphs, horizontal rules, lists and code elements are pre-styled</li>
|
|
<li>Images are responsive by default</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Common textual elements <a href="https://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><p>This is a paragraph with some <strong>bold text</strong> and some <em>italics text</em>.</p>
|
|
<a href="#">This is a link.</a>
|
|
<small>This is some small text.</small>
|
|
<sub>Subscript</sub>
|
|
<sup>Superscript</sup>
|
|
<code>Inline code</code>
|
|
<kbd>Keyboard Input</kbd>
|
|
<hr>
|
|
<pre>This is some preformatted text.</pre>
|
|
<blockquote cite="Quotation source">
|
|
This is some quoted text from another website or person.
|
|
</blockquote></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Lists & images<a href="https://codepen.io/chalarangelo/pen/woRKay" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><ul>
|
|
<li>Apple</li>
|
|
<li>Orange</li>
|
|
<li>Strawberry</li>
|
|
</ul>
|
|
|
|
<ol>
|
|
<li>Wake up</li>
|
|
<li>Eat breakfast</li>
|
|
<li>Go to work</li>
|
|
</ol>
|
|
|
|
<figure>
|
|
<img src="...">
|
|
<figcaption>Image caption</figcaption>
|
|
</figure></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="grid">
|
|
<div class="col-sm col-lg-10 col-lg-offset-1">
|
|
<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="navigation">
|
|
<div class="col-sm col-lg-10 col-lg-offset-1">
|
|
<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>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="input_control">
|
|
<div class="col-sm col-lg-10 col-lg-offset-1">
|
|
<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="table">
|
|
<div class="col-sm col-lg-10 col-lg-offset-1">
|
|
<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 col-lg-10 col-lg-offset-1">
|
|
<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/oYmoJz" 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>
|
|
|
|
<div class="card inverse">
|
|
<div class="section"><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>Card color variant is available using the <code>.inverse</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>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="tab">
|
|
<div class="col-sm col-lg-10 col-lg-offset-1">
|
|
<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 col-lg-10 col-lg-offset-1">
|
|
<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>Alerts <a href="https://codepen.io/chalarangelo/pen/bBzYzj" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="alert">
|
|
<h3>This is an alert</h3>
|
|
<p>Make sure you read this!</p>
|
|
</div>
|
|
<div class="alert urgent">
|
|
<h3>This is an urgent alert</h3>
|
|
<p>Make absolutely sure you read this!</p>
|
|
</div>
|
|
<div class="alert critical">
|
|
<h3>This is a critical alert</h3>
|
|
<p>Make certain you read and actually understand this!</p>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Use the <code>.alert</code> class to create alerts</li>
|
|
<li>Color variants available using the <code>.urgent</code> and <code>.critical</code> classes</li>
|
|
<li>Alerts have no pre-defined behavior, use Javascript</li>
|
|
<li>The <code>.alert</code> class can be applied to <code><div></code> elements and textual elements alike</li>
|
|
<li>Avoid applying the <code>.alert</code> class to non-textual elements, such as images</li>
|
|
<li>Use either 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_alert_role">alert</a>"</span></code> attribute 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_alertdialog_role">alertdialog</a>"</span></code> attribute for accessible alerts</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
|
<h3>Animated alerts <a href="https://codepen.io/chalarangelo/pen/NbowoL" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
|
<pre><div class="alert animated">
|
|
<h3>Animated alert</h3>
|
|
</div>
|
|
<div class="alert urgent animated">
|
|
<h3>Animated urgent alert</h3>
|
|
</div>
|
|
<div class="alert critical animated">
|
|
<h3>Animated critical alert</h3>
|
|
</div></pre>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>Animated alerts are available using the <code>.animated</code> class</li>
|
|
<li>Compatible with modern browsers, but might cause some problems and bluriness in Webkit-based or 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>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 col-lg-10 col-lg-offset-1">
|
|
<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/MbLLwb" 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="nano" value="750" 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>Size variants available using the <code>.nano</code> and <code>.inline</code> classes</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 col-lg-10 col-lg-offset-1">
|
|
<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/aBXXvE" 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="shadow-none">No shadow</span>
|
|
<span class="shadow-small">Small shadow</span>
|
|
<span class="shadow-medium">Medium shadow</span>
|
|
<span class="shadow-large">Large 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>.shadow-small</code>, <code>.shadow-medium</code>, <code>.shadow-large</code> and <code>.shadow-none</code> classes</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>
|
|
</div></main>
|
|
<!-- End of page content-->
|
|
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
|
</body>
|
|
</html>
|