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;
}
< / style >
< / head >
< body >
< header >
< img class = "logo" src = "mini-logo.svg" id = "header-logo" > < 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 = "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" >
< h2 > Setup and usage< / h2 >
< / 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" >
< h2 > Core< / h2 >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
< h3 > Headings < a href = "https://codepen.io/chalarangelo/pen/ZBVGMq" target = "_blank" class = "button small" > < i class = "fa fa-codepen" aria-hidden = "true" > < / i > View on Codepen< / a > < / h3 >
< pre > < h1> Heading 1< small> Subheading< /small> < /h1>
< h2> Heading 2< small> Subheading< /small> < /h2>
< h3> Heading 3< small> Subheading< /small> < /h3>
< h4> Heading 4< small> Subheading< /small> < /h4>
< h5> Heading 5< small> Subheading< /small> < /h5>
< h6> Heading 6< small> Subheading< /small> < /h6> < / pre >
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Typography< / h3 >
< ul >
< li > Basic reset and fix rules applied, based on < a href = "http://necolas.github.io/normalize.css/" > Normalize.css< / a > v5.0.0< / li >
< li > A < a href = "https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/" > native font stack< / a > is used< / li >
< li > The colors are set to < code > background: #f5f5f5;< / code > and < code > color: #212121;< / code > < / li >
< li > The < code > font-size< / code > is < code > 16px< / code > for the root element< / li >
< li > The < code > line-height< / code > is < code > 1.5< / code > < / li >
< li > All HTML headings are pre-styled< / li >
< li > Styling provided for < code > < small> < / code > elements inside headings< / li >
< li > Common HTML elements like paragraphs, horizontal rules, lists and code elements are pre-styled< / li >
< li > Images are responsive by default< / li >
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
< h3 > Common textual elements < a href = "http://codepen.io/chalarangelo/pen/RoEWwK" target = "_blank" class = "button small" > < i class = "fa fa-codepen" aria-hidden = "true" > < / i > View on Codepen< / a > < / h3 >
< pre > < p> This is a paragraph with some < strong> bold text< /strong> and some < em> italics text< /em> .< /p>
< a href=" #" > This is a link.< /a>
< small> This is some small text.< /small>
< sub> Subscript< /sub>
< sup> Superscript< /sup>
< code> Inline code< /code>
< kbd> Keyboard Input< /kbd>
< hr>
< pre> This is some preformatted text.< /pre>
< blockquote cite=" Quotation source" >
This is some quoted text from another website or person.
< /blockquote> < / pre >
< / div >
< div class = "col-sm-12 col-md-6" >
< h3 > Lists & images< a href = "http://codepen.io/chalarangelo/pen/woRKay" target = "_blank" class = "button small" > < i class = "fa fa-codepen" aria-hidden = "true" > < / i > View on Codepen< / a > < / h3 >
< pre > < ul>
< li> Apple< /li>
< li> Orange< /li>
< li> Strawberry< /li>
< /ul>
< ol>
< li> Wake up< /li>
< li> Eat breakfast< /li>
< li> Go to work< /li>
< /ol>
< img src=" ..." > < / pre >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm" >
< div class = "card fluid" >
< div class = "section" >
< h2 > Grid< / h2 >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
< h3 > Basic layout < a href = "https://codepen.io/chalarangelo/pen/ZBVGMq" target = "_blank" class = "button small" > < i class = "fa fa-codepen" aria-hidden = "true" > < / i > View on Codepen< / a > < / h3 >
< pre > < / pre >
< / div >
< div class = "col-sm-12 col-md-6" >
< ul >
< li > < / li >
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
< h3 > Screen-specific layouts < a href = "http://codepen.io/chalarangelo/pen/RoEWwK" target = "_blank" class = "button small" > < i class = "fa fa-codepen" aria-hidden = "true" > < / i > View on Codepen< / a > < / h3 >
< pre > < / pre >
< / div >
< div class = "col-sm-12 col-md-6" >
< ul >
< li > < / li >
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
< h3 > Column offsets < a href = "http://codepen.io/chalarangelo/pen/RoEWwK" target = "_blank" class = "button small" > < i class = "fa fa-codepen" aria-hidden = "true" > < / i > View on Codepen< / a > < / h3 >
< pre > < / pre >
< / div >
< div class = "col-sm-12 col-md-6" >
< ul >
< li > < / li >
< / ul >
< / div >
< / div >
< div class = "section row" >
< div class = "col-sm-12 col-md-6 col-md-first col-sm-first" >
< h3 > Column reordering < a href = "http://codepen.io/chalarangelo/pen/RoEWwK" target = "_blank" class = "button small" > < i class = "fa fa-codepen" aria-hidden = "true" > < / i > View on Codepen< / a > < / h3 >
< pre > < / pre >
< / div >
< div class = "col-sm-12 col-md-6" >
< ul >
< li > < / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row box-centered" >
< div class = "col-sm-12" >
< / div >
< / div >
< / div > < / main >
<!-- End of page content -->
< footer > < strong > mini.css< / strong > was designed and built by < a href = "https://github.com/Chalarangelo" > @Chalarangelo< / a > . It is licensed under the < a href = "https://github.com/Chalarangelo/mini.css/blob/master/LICENSE" > MIT License< / a > . You can view the project's source code on < a href = "https://github.com/Chalarangelo/mini.css" > Github< / a > .< / footer >
< / body >
< / html >