2016-12-16 09:07:06 +00:00
<!DOCTYPE html>
< html >
< head >
<!-- Live demo styled as of 20161213 -->
< link rel = "stylesheet" href = "https://cdn.rawgit.com/Chalarangelo/mini.css/0f7cd386b36094d9878c6b43bc8aa58d010c450d/dist/mini-default.min.css" >
<!-- Font Awesome -->
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
< title > mini.css - Quick Reference< / title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "mini.css - Minimal, responsive, style-agnostic CSS toolkit" >
< meta name = "keywords" content = "mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, reference, cheatsheet" >
< meta name = "author" content = "Angelos Chalaris (chalarangelo)" >
< link rel = "icon" type = "image/png" href = "favicon.png" >
< style >
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #b71c1c; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.box-left { text-align: left; }
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-md-6.col-sm-first.col-md-first {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-md-6.col-sm-first.col-md-first {
border: 0;
2016-12-16 10:54:37 +00:00
border-bottom: 1px solid #bdbdbd;
2016-12-16 09:07:06 +00:00
}
}
h3 > a{
font-size: 1rem;
}
2016-12-16 14:55:04 +00:00
h2 > a {
font-size: 0.85em;
}
2016-12-16 14:35:59 +00:00
pre {
max-height: 400px;
}
2016-12-16 09:07:06 +00:00
< / style >
< / head >
< body >
< header >
2016-12-16 21:51:26 +00:00
< a href = "index.html" > < img class = "logo" src = "mini-logo.svg" id = "header-logo" > < / a > < div style = "display: inline; overflow: auto;" >
2016-12-16 09:07:06 +00:00
< 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 >
2016-12-16 21:54:46 +00:00
< a href = "quick_reference.html" class = "button" > Quick Reference< / a >
2016-12-16 09:07:06 +00:00
< a href = "https://github.com/Chalarangelo/mini.css" class = "button" > Github< / a >
< / div >
< / header >
< div class = "container" style = "height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);" >
< div class = "row" >
< div class = "col-sm" >
< div class = "box-centered" >
< img src = "mini-logo.svg" id = "top-logo" >
< h1 id = "top-heading" > < span style = "font-size: 1.35em;" > m< / span > ini< span style = "font-size:0.65em; color: #558b2f;" > .css< / span > < / h1 >
< mark class = "tertiary" id = "top-version-tag" > v2.0< / mark >
< / div >
< / div >
< / div >
< / div >
<!-- Insert your page content here -->
< main > < div class = "container" >
< div class = "row" style = "padding-top: 40px;" >
< div class = "col-sm" >
< h1 > Quick Reference< / h1 >
< p > If you are familiar with < strong > mini.css< / strong > and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the toolkit and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the < a href = "modules.html" > modules< / a > page.< / p >
< p > < small > All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.< / small > < / p > < br >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
< div class = "section" >
2016-12-16 14:35:59 +00:00
< h2 > Setup & usage< / h2 >
2016-12-16 09:07:06 +00:00
< / div >
< div class = "section" >
< p > You can import the default flavor of < strong > mini.css< / strong > in your webpage by simply adding the following reference inside your HTML page's < code > < head> < / code > tag:< / p >
< pre > < < span class = "fore-tertiary" > link< / span > < span class = "fore-secondary" > rel< / span > =< span class = "fore-primary" > " stylesheet" < / span > < span class = "fore-secondary" > href< / span > =< span class = "fore-primary" > " https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.0/dist/mini-default.min.css" < / span > > < / pre > < br >
< p > If you want to download the package using your favorite package manager, you can use either < strong > Bower< / strong > or < strong > NPM< / strong > :< / p >
< div class = "row" >
< div class = "col-sm-12 col-md-6" >
< pre > < span class = "fore-tertiary" > bower install< / span > < span class = "fore-primary" > mini.css< / span > < / pre >
< / div >
< div class = "col-sm-12 col-md-6" >
< pre > < span class = "fore-tertiary" > npm install< / span > < span class = "fore-primary" > mini.css< / span > < / pre >
< / div >
< / div >
< br >
< p > We strongly suggest you add the following line inside your HTML page's < code > < head> < / code > to utilize the viewport meta tag:< / p >
< pre > < < span class = "fore-tertiary" > meta< / span > < span class = "fore-secondary" > name< / span > =< span class = "fore-primary" > " viewport" < / span > < span class = "fore-secondary" > content< / span > =< span class = "fore-primary" > " width=device-width, initial-scale=1" < / span > > < / pre >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
< div class = "section" >
2016-12-16 14:55:04 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< / 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" >
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" >
< div class = "section" >
2016-12-16 14:55:04 +00:00
< 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 >
2016-12-16 09:07:06 +00:00
< / 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 > 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 >
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 >
< 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 >
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" >
< div class=" col-sm-5 col-sm-offset-1" >
< /div>
< div class=" col-sm-5 col-sm-offset-1" >
< /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 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" >
< 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" >
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>
< a href=" #" class=" sublink-1" > Policy Update< /a>
< 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" >
< label for=" username" > username< /label>
< input type=" email" value=" " id=" username" placeholder=" username" >
< /div>
< div class=" input-group" >
< label for=" pwd" > password< /label>
< 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 >
< ul >
< li > < / li >
< / 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" >
< 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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
< li > < / li >
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
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>
< button class=" large" > Large button< /button>
< 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 >
< li > < / li >
< / 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 >
< li > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
< div class = "section" >
< h2 > < a href = "table.html" target = "_blank" class = "button primary small" > < i class = "fa fa-table fa-fw" aria-hidden = "true" > < / i > < / a > Table< / h2 >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
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 >
< li > < / li >
< / 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 >
< li > < / li >
< / 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 >
< li > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
< div class = "section" >
< h2 > < a href = "card.html" target = "_blank" class = "button secondary small" > < i class = "fa fa-id-card-o fa-fw" aria-hidden = "true" > < / i > < / a > Card< / h2 >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
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 >
< li > < / li >
< / 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 >
< li > < / li >
< / 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 >
< li > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
< div class = "section" >
< h2 > < a href = "tab.html" target = "_blank" class = "button secondary small" > < i class = "fa fa-files-o fa-fw" aria-hidden = "true" > < / i > < / a > Tab< / h2 >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
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 >
< li > < / li >
< / 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>
< /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 >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
< li > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
< div class = "section" >
< h2 > < a href = "contextual.html" target = "_blank" class = "button secondary small" > < i class = "fa fa-tags fa-fw" aria-hidden = "true" > < / i > < / a > Contextual< / h2 >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
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 >
< li > < / li >
< / 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 >
< li > < / li >
< / 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 >
< li > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
< div class = "section" >
< h2 > < a href = "progress.html" target = "_blank" class = "button tertiary small" > < i class = "fa fa-spinner fa-fw" aria-hidden = "true" > < / i > < / a > Progress< / h2 >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
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 >
< li > < / li >
< / 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 >
< li > < / li >
< / 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 >
< li > < / li >
< / 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 >
< li > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
< div class = "section" >
< h2 > < a href = "utility.html" target = "_blank" class = "button tertiary small" > < i class = "fa fa-wrench fa-fw" aria-hidden = "true" > < / i > < / a > Utility< / h2 >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
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 >
< li > < / li >
< / 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 > Floats, centering & clearfix < a href = "https://codepen.io/chalarangelo/pen/pNGGjE" 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=" float-left" > Float left< /span>
< span class=" float-right" > Float right< /span>
< span class=" clearfix" > Clearfix< /span>
< span class=" center-block" > Center block< /span> < / pre >
2016-12-16 21:25:19 +00:00
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Notes< / h3 >
< ul >
< li > < / li >
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
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 >
< li > < / li >
< / 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 >
< li > < / li >
< / 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 >
< li > < / li >
< / 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 >
< li > < / li >
< / 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 -->
2016-12-16 14:55:04 +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 >
< / html >