2016-12-13 09:39:04 +00:00
<!DOCTYPE html>
2017-02-07 10:23:53 +00:00
< html lang = "en" >
2016-12-13 09:39:04 +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 - Flavors< / 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, flavor, flavors " >
< 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; }
h2 > a{ font-size: 1rem; float: right;} .box-left { text-align: left; }
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
< / style >
2016-12-13 09:39:04 +00:00
< / head >
2017-02-02 22:27:22 +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-13 09:39:04 +00:00
<!-- Insert your page content here -->
< main > < div class = "container" >
< div class = "row" style = "padding-top: 40px;" >
2017-02-12 20:38:52 +00:00
< div class = "col-sm col-lg-10 col-lg-offset-1" >
2016-12-13 09:39:04 +00:00
< h1 > Flavors< / h1 >
< p > One of the core ideas behind < strong > mini.css< / strong > is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using < strong > mini.css< / strong > , you usually try out the default flavor, using the following reference inside your HTML page's < code > < head> < / code > tag:< / p >
2017-02-12 20:38:52 +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-13 09:39:04 +00:00
< p > There are, however a handful of other flavors included with < strong > mini.css< / strong > . Below, you can see a full list of them:< / p > < br >
< ul style = "margin-left:0px; padding-left: 10px" >
< li class = "card fluid" >
< h2 class = "section double-padded" > Default < small > mini-default< / small > < / h2 >
2017-02-12 20:38:52 +00:00
< pre class = "section double-padded" style = "border-left:0; box-shadow: none;" > < < 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 >
2016-12-13 09:39:04 +00:00
< p class = "section double-padded" > The default flavor for < strong > mini.css< / strong > uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners with blurred shadows to give it a material-like design. All of the colors used in this flavor are based on < a href = "https://material.google.com/style/color.html" > Google's Material design color palette< / a > .< / p >
2017-01-02 15:32:15 +00:00
< div class = "section double-padded" >
< p > < strong > Author:< / strong > < a href = "https://github.com/Chalarangelo" > Chalarangelo< / a > < / p >
2017-02-12 20:38:52 +00:00
< p > < strong > Latest version:< / strong > v2.1.0< / p >
2017-01-02 15:32:15 +00:00
< p > < strong > Size:< / strong > 7 KB< / p >
< / p >
< / div >
2016-12-13 09:39:04 +00:00
< / li >
< li class = "card fluid" >
< h2 class = "section double-padded" > Classic < small > mini-classic< / small > < / h2 >
< p class = "section double-padded" > Simpler, lighter version of the default flavor. Coming soon...< / p >
< / li >
2017-01-02 15:32:15 +00:00
< li class = "card fluid" >
< h2 class = "section double-padded" > Sucroa < a href = "http://codepen.io/chalarangelo/pen/YNKYgz" target = "_blank" class = "button small" > < i class = "fa fa-codepen" aria-hidden = "true" > < / i > View on Codepen< / a > < small > mini-sucroa< / small > < / h2 >
2017-02-12 20:38:52 +00:00
< pre class = "section double-padded" style = "border-left:0; box-shadow: none;" > < < 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-sucroa.min.css" < / span > > < / pre >
2017-01-02 15:32:15 +00:00
< p class = "section double-padded" > Sucroa is a full flavor that uses a yellow-pink-lilac background color palette with dark purple-black foreground colors. It uses the default naming conventions (< code > .primary< / code > , < code > .secondary< / code > etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. The card module's < code > .dark< / code > and < code > .darker< / code > classes have been replaced by the < code > .light< / code > and < code > .lighter< / code > classes respectively. Finally, < code > .animated< / code > alerts are not available.< / p >
< div class = "section double-padded" >
< p > < strong > Author:< / strong > < a href = "https://github.com/AngieDaskalakis" > Angeliki Daskalakis< / a > < / p >
2017-02-12 20:38:52 +00:00
< p > < strong > Latest version:< / strong > v2.1.0< / p >
2017-01-02 15:32:15 +00:00
< p > < strong > Size:< / strong > 7 KB< / p >
< / p >
< / div >
< / li >
2016-12-13 09:39:04 +00:00
< / ul >
< p > If you would rather modify one of the pre-defined flavors or create your own, check out our < a href = "customization.html" > customization< / a > page for instructions.< / p >
< / div >
< / div >
< 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-13 09:39:04 +00:00
< / body >
2017-02-02 22:27:22 +00:00
< / html >
