2017-01-06 17:19:12 +00:00
<!DOCTYPE html>
< html >
< head >
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini - default.min.css"> -->
< link rel = "stylesheet" href = "../../dist/mini-default.css" >
2017-01-12 22:29:46 +00:00
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
2017-01-06 17:19:12 +00:00
< title > mini.css - v2.1.0 Test page< / 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" >
< meta name = "author" content = "Angelos Chalaris (chalarangelo)" >
< meta property = "og:title" content = "mini.css - Minimal, responsive, style-agnostic CSS toolkit" >
< meta property = "og:type" content = "website" / >
< meta property = "og:description" content = "mini.css is a tiny CSS toolkit designed to build quick, modern and responsive websites." / >
< meta property = "og:image" content = "page_thumb.PNG" >
< meta property = "og:url" content = "https://chalarangelo.github.io/mini.css/" >
2017-01-12 22:29:46 +00:00
< link rel = "icon" type = "image/png" href = "favicon.png" >
2017-01-06 17:19:12 +00:00
< 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;
}
2017-01-07 12:45:39 +00:00
#top-area {
2017-01-12 22:29:46 +00:00
height: 320px;
background: -webkit-linear-gradient(#455a64,#192024);
2017-01-07 12:45:39 +00:00
background: linear-gradient(#455a64,#192024);
}
2017-01-06 17:19:12 +00:00
#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;
}
2017-01-07 12:45:39 +00:00
@media (min-width: 768px) {
#top-area {
height: 440px;
}
#top-logo {
margin: 88px auto -24px;
}
#top-heading {
margin-bottom: -6px;
}
}
2017-01-06 17:19:12 +00:00
#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: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
2017-01-12 22:29:46 +00:00
-webkit-box-align: start;
2017-01-06 17:19:12 +00:00
-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 */
.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-sm-last.col-md-4.col-md-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
< / style >
< / head >
2017-01-12 22:29:46 +00:00
< body >
2017-01-07 12:45:39 +00:00
< div class = "container" id = "top-area" >
2017-01-06 17:19:12 +00:00
< 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 >
2017-01-07 12:45:39 +00:00
< header class = "sticky" style = "box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); " >
2017-01-16 22:53:29 +00:00
< a href = "index.html" class = "logo" > < img src = "mini-logo.svg" id = "header-logo" > < span style = "display:inline-block; vertical-align: top; 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 > < div style = "display: inline; overflow: auto;" >
2017-01-07 12:45:39 +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 >
< a href = "quick_reference.html" class = "button" > Quick Reference< / a >
< a href = "https://github.com/Chalarangelo/mini.css" class = "button" > Github< / a >
< / div >
< / header >
2017-01-06 17:19:12 +00:00
<!-- Insert your page content here -->
< main > < div class = "container" >
< div class = "row cols-sm-12" style = "padding-top: 20px" >
2017-01-08 16:40:56 +00:00
< div > < h2 > Quick-layout system< / h2 > < / div >
2017-01-06 17:19:12 +00:00
< / div >
< div class = "row cols-sm-12 cols-md-6 cols-lg-4" >
< div > < div class = "box-colored" > < / div > < / div >
< div > < div class = "box-colored" > < / div > < / div >
< div > < div class = "box-colored" > < / div > < / div >
< div > < div class = "box-colored" > < / div > < / div >
< div > < div class = "box-colored" > < / div > < / div >
< div > < div class = "box-colored" > < / div > < / div >
< / div >
< div class = "row cols-sm-12" >
2017-01-08 16:40:56 +00:00
< div > < h2 > Classic system< / h2 > < / div >
2017-01-06 17:19:12 +00:00
< / div >
< div class = "row" >
< div class = "col-sm-12 col-md-6 col-lg-4" > < div class = "box-colored" > < / div > < / div >
< div class = "col-sm-12 col-md-6 col-lg-4" > < div class = "box-colored" > < / div > < / div >
< div class = "col-sm-12 col-md-6 col-lg-4" > < div class = "box-colored" > < / div > < / div >
< div class = "col-sm-12 col-md-6 col-lg-4" > < div class = "box-colored" > < / div > < / div >
< div class = "col-sm-12 col-md-6 col-lg-4" > < div class = "box-colored" > < / div > < / div >
< div class = "col-sm-12 col-md-6 col-lg-4" > < div class = "box-colored" > < / div > < / div >
< / div >
2017-01-12 22:29:46 +00:00
< div class = "row col-sm-12" >
< div >
2017-01-12 23:06:04 +00:00
< a role = "button" class = "tertiary" href = "#" > Test span button< / a >
< div class = "button-group" >
< button > Button< / button >
< a role = "button" > Button< / a >
< label class = "button" > Button< / label >
< / div >
2017-01-12 22:29:46 +00:00
< / div >
< / div >
2017-01-16 21:41:27 +00:00
< div class = "row cols-sm-12 cols-md-10" >
< div class = "col-md-offset-1" >
< ul class = "breadcrumbs" >
< li > < a href = "#" > Root< / a > < / li >
< li > < a href = "#" > Folder< / a > < / li >
< li > File< / li >
< / ul >
< / div >
2017-01-16 22:53:29 +00:00
< div class = "col-md-offset-1" >
2017-01-27 08:51:13 +00:00
< mark class = "tooltip large" aria-label = "This is some sample tooltip text" > Show a tooltip while hovering< / mark > < br / > < br / > < br / >
2017-01-27 09:27:02 +00:00
< 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 >
2017-01-27 11:54:03 +00:00
< form >
< fieldset >
< legend > Simple form< / legend >
< div class = "input-group fluid" >
< label for = "username" > username< / label >
< input type = "email" value = "" id = "username" placeholder = "username" >
< label for = "pwd" > password< / label >
< input type = "password" value = "" id = "pwd" placeholder = "password" >
< / div >
< div class = "input-group" >
< label for = "username" > username< / label >
< input type = "email" value = "" id = "username" placeholder = "username" >
< / div >
< 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 >
< / fieldset >
< / form >
2017-01-16 22:53:29 +00:00
< / div >
2017-01-16 21:41:27 +00:00
< / div >
2017-01-06 17:19:12 +00:00
< / div > < / main >
<!-- End of page content -->
2017-01-08 16:40:56 +00:00
< footer class = "sticky" > < 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 >
2017-01-06 17:19:12 +00:00
< / body >
2017-01-12 22:29:46 +00:00
< / html >