2016-12-16 09:07:06 +00:00
<!DOCTYPE html>
2017-02-07 10:23:53 +00:00
< html lang = "en" >
2016-12-16 09:07:06 +00:00
< head >
2017-02-07 10:23:53 +00:00
< link rel = "stylesheet" href = "https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/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 >
2017-02-07 14:32:10 +00:00
#header-logo { position:relative; top: -4px; display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
2017-02-07 10:23:53 +00:00
.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;}
< / style >
2016-12-16 09:07:06 +00:00
< / head >
2017-01-31 08:31:04 +00:00
< body >
2017-02-07 10:23:53 +00:00
< header class = "sticky" >
2017-02-07 14:32:10 +00:00
< a href = "index.html" class = "logo" > < img src = "mini-logo.svg" id = "header-logo" > < span style = "position: relative; top:-12px;" > < span style = "font-size: 1.35em;" > m< / span > ini< span style = "font-size:0.65em; color: #558b2f;" > .css< / span > < / span > < / a >
2017-02-07 10:23:53 +00:00
< div style = "display: inline; overflow: auto;" >
< a href = "index.html" class = "button" > Introduction< / a > < a href = "modules.html" class = "button" > Modules< / a >
< a href = "flavors.html" class = "button" > Flavors< / a > < a href = "customization.html" class = "button" > Customization< / a >
< a href = "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.4em; position: relative; bottom: -2px; margin-right: 2px;" > < / i > Github< / a >
< / div >
< / header >
2016-12-16 09:07:06 +00:00
<!-- Insert your page content here -->
< main > < div class = "container" >
< div class = "row" style = "padding-top: 40px;" >
< div class = "col-sm" >
< h1 > Quick Reference< / h1 >
2017-02-07 14:05:36 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< p > < small > All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.< / small > < / p > < br >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
2017-02-07 10:28:41 +00:00
< div class = "section" > < h2 > Setup & usage< / h2 > < / div >
2016-12-16 09:07:06 +00:00
< div class = "section" >
< p > You can import the default flavor of < strong > mini.css< / strong > in your webpage by simply adding the following reference inside your HTML page's < code > < head> < / code > tag:< / p >
2017-02-07 10:28:41 +00:00
< 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.0/dist/mini-default.min.css" < / span > > < / pre > < br >
2016-12-16 09:07:06 +00:00
< p > If you want to download the package using your favorite package manager, you can use either < strong > Bower< / strong > or < strong > NPM< / strong > :< / p >
< div class = "row" >
2017-02-07 10:28:41 +00:00
< div class = "col-sm-12 col-md-6" > < pre > < span class = "fore-tertiary" > bower install< / span > < span class = "fore-primary" > mini.css< / span > < / pre > < / div >
< div class = "col-sm-12 col-md-6" > < pre > < span class = "fore-tertiary" > npm install< / span > < span class = "fore-primary" > mini.css< / span > < / pre > < / div >
< / div > < br >
2016-12-16 09:07:06 +00:00
< p > We strongly suggest you add the following line inside your HTML page's < code > < head> < / code > to utilize the viewport meta tag:< / p >
< pre > < < span class = "fore-tertiary" > meta< / span > < span class = "fore-secondary" > name< / span > =< span class = "fore-primary" > " viewport" < / span > < span class = "fore-secondary" > content< / span > =< span class = "fore-primary" > " width=device-width, initial-scale=1" < / span > > < / pre >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
2017-02-07 10:28:41 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< 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" >
2016-12-16 14:35:59 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< 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" >
2016-12-16 14:35:59 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< pre > < ul>
< li> Apple< /li>
< li> Orange< /li>
< li> Strawberry< /li>
< /ul>
< ol>
< li> Wake up< /li>
< li> Eat breakfast< /li>
< li> Go to work< /li>
< /ol>
< img src=" ..." > < / pre >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
2017-02-07 10:28:41 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-16 14:35:59 +00:00
< 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" >
2017-01-31 08:31:04 +00:00
< div class=" col-sm-12" >
2016-12-16 14:35:59 +00:00
< /div>
< div class=" row" >
< div class=" col-sm" >
< /div>
< div class=" col-sm" >
< /div>
< /div>
< /div> < / pre >
2016-12-16 09:07:06 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
2016-12-16 14:35:59 +00:00
< h3 > Notes< / h3 >
2016-12-16 09:07:06 +00:00
< ul >
2016-12-16 14:35:59 +00:00
< 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 >
2017-01-31 08:31:04 +00:00
< li > < code > < span class = "fore-primary" > SCR_SZ< / span > < / code > values:
2016-12-16 14:35:59 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-16 14:35:59 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
2016-12-16 14:35:59 +00:00
< h3 > Notes< / h3 >
2016-12-16 09:07:06 +00:00
< ul >
2016-12-16 14:35:59 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-16 14:35:59 +00:00
< 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" >
2017-01-31 08:31:04 +00:00
< div class=" col-sm-5 col-sm-offset-1" >
2016-12-16 14:35:59 +00:00
< /div>
2017-01-31 08:31:04 +00:00
< div class=" col-sm-5 col-sm-offset-1" >
2016-12-16 14:35:59 +00:00
< /div>
2017-01-31 08:31:04 +00:00
< /div>
2016-12-16 14:35:59 +00:00
< /div> < / pre >
2016-12-16 09:07:06 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
2016-12-16 14:35:59 +00:00
< h3 > Notes< / h3 >
2016-12-16 09:07:06 +00:00
< ul >
2016-12-16 14:35:59 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-16 14:35:59 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
2016-12-16 14:35:59 +00:00
< h3 > Notes< / h3 >
2016-12-16 09:07:06 +00:00
< ul >
2016-12-16 14:35:59 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
2016-12-16 21:25:19 +00:00
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
2017-02-07 10:28:41 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-16 21:51:26 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-16 21:51:26 +00:00
< li > Use the < code > .logo< / code > class for the first child (either textual element or image)< / li >
< li > The rest of the elements inside the < code > < header> < / code > must be < code > < button> < / code > , < code > < label class=" button" > < / code > or < code > < a class=" button" > < / code > elements< / li >
< li > Use < code > < span> < / code > elements as separators< / li >
< li > You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons< / li >
< li > The logo element should not be a < code > < button> < / code > element or of the < code > .button< / code > class< / li >
< li > Header is not displayed as fixed by default< / li >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-16 21:51:26 +00:00
< 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>
2017-01-31 08:31:04 +00:00
< a href=" #" class=" sublink-1" > Policy Update< /a>
2016-12-16 21:51:26 +00:00
< a href=" #" > About< /a>
< a href=" #" > Contact< /a>
< /nav> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-16 21:51:26 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-16 21:51:26 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-16 21:51:26 +00:00
< li > Simple syntax and structure, add content as normal< / li >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
< div class = "section" >
< h2 > < a href = "input_control.html" target = "_blank" class = "button tertiary small" > < i class = "fa fa-keyboard-o fa-fw" aria-hidden = "true" > < / i > < / a > Input Control< / h2 >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< pre > < form>
< fieldset>
< legend> Simple form< /legend>
< div class=" input-group" >
2017-01-31 08:31:04 +00:00
< label for=" username" > username< /label>
2016-12-19 11:58:13 +00:00
< input type=" email" value=" " id=" username" placeholder=" username" >
< /div>
< div class=" input-group" >
2017-01-31 08:31:04 +00:00
< label for=" pwd" > password< /label>
2016-12-19 11:58:13 +00:00
< input type=" password" value=" " id=" pwd" placeholder=" password" >
< /div>
< /fieldset>
< /form> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
2017-01-31 08:31:04 +00:00
< ul >
2016-12-20 08:51:32 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< pre > < div class=" input-group" >
2017-01-31 08:31:04 +00:00
< input type=" checkbox" id=" check1" tabindex=" 0" >
2016-12-19 11:58:13 +00:00
< label for=" check1" > Checkbox< /label>
< /div>
< div class=" input-group" >
2017-01-31 08:31:04 +00:00
< input type=" radio" id=" rad1" tabindex=" 0" name=" radio-group-1" >
2016-12-19 11:58:13 +00:00
< label for=" rad1" > Radio< /label>
< /div> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 08:51:32 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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>
2017-01-31 08:31:04 +00:00
< button class=" large" > Large button< /button>
2016-12-19 11:58:13 +00:00
< button disabled> Disabled button< /button>
< a href=" #" class=" button" > Link button< /a>
< label class=" button" > Label button< /label>
< div class=" button-group" >
< button> Button< /button>
< button> Button< /button>
< button> Button< /button>
< /div> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 08:51:32 +00:00
< li > All button types have been stylized< / li >
< li > Button styles are available for other elements, using the < code > .button< / code > class< / 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 >
2016-12-20 11:44:28 +00:00
< li > Button groups are responsive, but might be displayed incorrectly in older browsers< / li >
2016-12-20 08:51:32 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< pre > < input type=" file" id=" file-input" >
< label for=" file-input" class=" button" > Upload file...< /label> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 08:51:32 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
2017-02-07 10:28:41 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:05:00 +00:00
< 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 > For horizontal tables or matrices, check the examples below< / li >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:05:00 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:05:00 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
2017-02-07 10:28:41 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:36:39 +00:00
< li > Requires familiarity with the grid module< / li >
2016-12-20 10:05:00 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:05:00 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:05:00 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
2017-02-07 10:28:41 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:36:39 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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>
2017-01-31 08:31:04 +00:00
< /div>
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:36:39 +00:00
< li > Use the < code > .stacked< / code > class to create stacked tabs< / li >
2016-12-20 11:44:28 +00:00
< 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 >
2016-12-20 10:36:39 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
2017-02-07 10:28:41 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:44:59 +00:00
< li > Use the < code > < mark> < / code > element for highlighting text< / li >
< li > < code > .secondary< / code > and < code > .tertiary< / code > classes offer color variants< / li >
2016-12-20 11:44:28 +00:00
< li > Highlighted text is inline by default, use the < code > .inline-block< / code > class for longer text highlights< / li >
2016-12-20 10:44:59 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:44:59 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 12:26:35 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 10:44:59 +00:00
< li > Animated alerts are available using th < code > .animated< / code > class< / li >
< li > Compatible with modern browsers, but might cause some problems and bluriness in Webkit-based or older browsers< / li >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
2017-02-07 10:28:41 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 21:46:09 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< pre > < progress value=" 0" max=" 1000" > < /progress>
< progress value=" 450" max=" 1000" > < /progress>
< progress value=" 1000" max=" 1000" > < /progress> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 11:03:15 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 21:46:09 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 11:03:15 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 21:46:09 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< pre > < div class=" spinner-donut" > < /div> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 11:03:15 +00:00
< 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 >
2016-12-20 11:48:33 +00:00
< li > Donut spinners can be displayed inline< / li >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 21:46:09 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< pre > < div class=" spinner-donut secondary" > < /div>
< div class=" spinner-donut tertiary" > < /div>
< div class=" spinner-donut large" > < /div> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 11:03:15 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
2017-02-07 10:28:41 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 21:46:09 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< pre > < span class=" hidden" > Hidden text< /span>
< span class=" visually-hidden" > Screen-reader-only text< /span> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 11:18:33 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 21:46:09 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 11:18:33 +00:00
< li > Create generic borders using < code > .bordered< / code > < / li >
< li > Rounded and circular border radii available using < code > .rounded< / code > and < code > .ciruclar< / 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 21:46:09 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< pre > < div class=" responsive-padding" > Responsive padding< /div>
< div class=" responsive-margin" > Responsive margin< /div> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 11:18:33 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 21:46:09 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< pre > < ul class=" breadcrumbs" >
< li> < a href=" #" > Root< /a> < /li>
< li> < a href=" #" > Folder< /a> < /li>
< li> File< /li>
< /ul> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 11:20:30 +00:00
< li > To create breadcrumbs, create a < code > < ul> < / code > element implementing the < code > .breadcrumbs< / code > class< / li >
2016-12-20 11:18:33 +00:00
< li > Do not use < code > < ol> < / code > for breadcrumbs< / li >
< li > Do not nest lists inside the < code > .breadcrumbs< / code > < / li >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
2016-12-19 21:46:09 +00:00
< 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 >
2016-12-19 11:58:13 +00:00
< pre > < span class=" close" > < /span> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
2016-12-20 11:18:33 +00:00
< 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 >
2016-12-16 21:25:19 +00:00
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
2016-12-16 09:07:06 +00:00
< div class = "row box-centered" >
< div class = "col-sm-12" >
< / div >
< / div >
< / div > < / main >
<!-- End of page content -->
2017-01-08 16:40:56 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< / body >
2017-01-31 08:31:04 +00:00
< / html >
