beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Navigation update for all pages

Browse source
This commit is contained in:
Angelos Chalaris 2017-02-03 00:27:22 +02:00
parent 62c5220a3b
commit d233113756
16 changed files with 589 additions and 577 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
docs/card.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Card</title> <title>mini.css - Card</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, card"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, card ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -69,30 +69,35 @@
.box-colored { .box-colored {
color: #f5f5f5; color: #f5f5f5;
} }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;Github</a>
</div> </div>
</header> </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);"> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<div class="row"> <a href="core.html" class="button">Core</a>
<div class="col-sm"> <a href="grid.html" class="button">Grid</a>
<div class="box-centered"> <a href="navigation.html" class="button">Navigation</a>
<img src="mini-logo.svg" id="top-logo"> <a href="input_control.html" class="button">Input Control</a>
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1> <a href="table.html" class="button">Table</a>
<mark class="tertiary" id="top-version-tag">v2.0</mark> <a href="card.html" class="button">Card</a>
</div> <a href="tab.html" class="button">Tab</a>
</div> <a href="contextual.html" class="button">Contextual</a>
</div> <a href="progress.html" class="button">Progress</a>
</div> <a href="utility.html" class="button">Utility</a>
</div>
</header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
@ -126,7 +131,7 @@
</div> </div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
<div class="container"> <div class="container">
<br> <br>
<div class="row"> <div class="row">
<div class="card"><div class="section"><h3>Card 1</h3><p>This is a basic card with some sample content.</p></div></div> <div class="card"><div class="section"><h3>Card 1</h3><p>This is a basic card with some sample content.</p></div></div>
@ -245,14 +250,14 @@
</div> </div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
<div class="container"> <div class="container">
<br> <br>
<div class="row"> <div class="row">
<div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="http://placehold.it/800x600"><div class="section"><p>Content</p></div></div> <div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="http://placehold.it/800x600"><div class="section"><p>Content</p></div></div>
<div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0"></iframe><div class="section"><h3>Card with video</h3></div></div> <div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0"></iframe><div class="section"><h3>Card with video</h3></div></div>
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section double-padded"><h3>Double-padded section</h3></div></div> <div class="card"><div class="section"><h3>Normal section</h3></div><div class="section double-padded"><h3>Double-padded section</h3></div></div>
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div><div class="section darker"><h3>Darker section</h3></div></div> <div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div><div class="section darker"><h3>Darker section</h3></div></div>
<div class="card inverse"><div class="section"><h3>Inverse card</h3></div><img class="section media" src="http://placehold.it/800x600"><div class="section"><p>Content</p></div><div class="section"><p>More content</p></div></div> <div class="card inverse"><div class="section"><h3>Inverse card</h3></div><img class="section media" src="http://placehold.it/800x600"><div class="section"><p>Content</p></div><div class="section"><p>More content</p></div></div>
</div> </div>
<br> <br>
</div> </div>
@ -283,7 +288,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
@ -292,7 +297,7 @@
</div> </div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
<div class="container"> <div class="container">
<br> <br>
<div class="row"> <div class="row">
<div class="card small"><div class="section"><h3>Small Card</h3><p>Small cards are <code>240px</code> wide.</p></div></div> <div class="card small"><div class="section"><h3>Small Card</h3><p>Small cards are <code>240px</code> wide.</p></div></div>
@ -373,4 +378,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

91
docs/contextual.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Contextual</title> <title>mini.css - Contextual</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, contextual"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, contextual ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -69,30 +69,35 @@
.box-colored { .box-colored {
color: #f5f5f5; color: #f5f5f5;
} }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;Github</a>
</div> </div>
</header> </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);"> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<div class="row"> <a href="core.html" class="button">Core</a>
<div class="col-sm"> <a href="grid.html" class="button">Grid</a>
<div class="box-centered"> <a href="navigation.html" class="button">Navigation</a>
<img src="mini-logo.svg" id="top-logo"> <a href="input_control.html" class="button">Input Control</a>
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1> <a href="table.html" class="button">Table</a>
<mark class="tertiary" id="top-version-tag">v2.0</mark> <a href="card.html" class="button">Card</a>
</div> <a href="tab.html" class="button">Tab</a>
</div> <a href="contextual.html" class="button">Contextual</a>
</div> <a href="progress.html" class="button">Progress</a>
</div> <a href="utility.html" class="button">Utility</a>
</div>
</header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
@ -164,13 +169,13 @@
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid combining two contextual color classes or a <code>.tag</code> and an <code>.inline-block</code>, as these combinations might result in unexpected behavior.</p> <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid combining two contextual color classes or a <code>.tag</code> and an <code>.inline-block</code>, as these combinations might result in unexpected behavior.</p>
</div> </div>
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6">
<pre>&lt;mark class=&quot;inline-block&quot;&gt;some <pre>&lt;mark class=&quot;inline-block&quot;&gt;some
&lt;mark class=&quot;secondary&quot;&gt;text&lt;/mark&gt; &lt;mark class=&quot;secondary&quot;&gt;text&lt;/mark&gt;
&lt;/mark&gt;</pre> &lt;/mark&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can only nest a <code>&lt;mark&gt;</code> inside another if the outer one is of the <code>.inline-block</code> class. You can color the inner <code>&lt;mark&gt;</code> using any of the contextual color classes or even make it a <code>.tag</code>. Be careful, however, to not make the inner <code>&lt;mark&gt;</code> an <code>.inline-block</code> as well.</p> <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can only nest a <code>&lt;mark&gt;</code> inside another if the outer one is of the <code>.inline-block</code> class. You can color the inner <code>&lt;mark&gt;</code> using any of the contextual color classes or even make it a <code>.tag</code>. Be careful, however, to not make the inner <code>&lt;mark&gt;</code> an <code>.inline-block</code> as well.</p>
</div> </div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal"> <div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;mark&gt;some <pre>&lt;mark&gt;some
&lt;mark class=&quot;secondary&quot;&gt;text&lt;/mark&gt; &lt;mark class=&quot;secondary&quot;&gt;text&lt;/mark&gt;
&lt;/mark&gt;</pre> &lt;/mark&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using nested <code>&lt;mark&gt;</code> elements, unless the outer <code>&lt;mark&gt;</code> element is an <code>.inline-block</code>.</p> <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using nested <code>&lt;mark&gt;</code> elements, unless the outer <code>&lt;mark&gt;</code> element is an <code>.inline-block</code>.</p>
@ -232,7 +237,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
@ -270,7 +275,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;"> <div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm"> <div class="col-sm">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p> <p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
@ -280,4 +285,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

93
docs/core.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Core</title> <title>mini.css - Core</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, core"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, core ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -57,42 +57,47 @@
border-top: 1px solid #bdbdbd; border-top: 1px solid #bdbdbd;
} }
} }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;Github</a>
</div> </div>
</header> </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);"> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<div class="row"> <a href="core.html" class="button">Core</a>
<div class="col-sm"> <a href="grid.html" class="button">Grid</a>
<div class="box-centered"> <a href="navigation.html" class="button">Navigation</a>
<img src="mini-logo.svg" id="top-logo"> <a href="input_control.html" class="button">Input Control</a>
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1> <a href="table.html" class="button">Table</a>
<mark class="tertiary" id="top-version-tag">v2.0</mark> <a href="card.html" class="button">Card</a>
</div> <a href="tab.html" class="button">Tab</a>
</div> <a href="contextual.html" class="button">Contextual</a>
</div> <a href="progress.html" class="button">Progress</a>
</div> <a href="utility.html" class="button">Utility</a>
</div>
</header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
<div class="col-sm"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h1>Core</h1> <h1>Core</h1>
<p>The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p> <p>The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</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> <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>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Core</li></ul> <ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Core</li></ul><br />
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Quick overview</h2> <h2>Quick overview</h2>
@ -107,7 +112,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Typography</h2> <h2>Typography</h2>
@ -127,7 +132,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Headings</h2> <h2>Headings</h2>
@ -156,7 +161,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Common textual elements</h2> <h2>Common textual elements</h2>
@ -193,7 +198,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Lists</h2> <h2>Lists</h2>
@ -236,7 +241,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Image responsiveness</h2> <h2>Image responsiveness</h2>
@ -257,7 +262,7 @@
</div> </div>
</div> </div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;"> <div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p> <p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div> </div>
</div> </div>
@ -265,4 +270,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

58
docs/customization.html
View file

@ -1,15 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Customization</title> <title>mini.css - Customization</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, customization, flavor"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, customization, flavor ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<link rel="icon" type="image/png" href="favicon.png"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/>
<meta property="og:description" content="mini.css is a tiny CSS framework 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/">
<link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -31,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -45,28 +50,17 @@
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; } .fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
</style> </style>
</head> </head>
<body> <body>
<header> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); ">
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;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> </header>
</div>
</div>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
@ -244,4 +238,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

63
docs/flavors.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Flavors</title> <title>mini.css - Flavors</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, flavor, flavors"> <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 name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -54,28 +54,17 @@
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; } .fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
</style> </style>
</head> </head>
<body> <body>
<header> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); ">
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;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> </header>
</div>
</div>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
@ -125,4 +114,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

91
docs/grid.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Grid</title> <title>mini.css - Grid</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, grid"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, grid ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -69,30 +69,35 @@
.box-colored { .box-colored {
color: #f5f5f5; color: #f5f5f5;
} }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;Github</a>
</div> </div>
</header> </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);"> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<div class="row"> <a href="core.html" class="button">Core</a>
<div class="col-sm"> <a href="grid.html" class="button">Grid</a>
<div class="box-centered"> <a href="navigation.html" class="button">Navigation</a>
<img src="mini-logo.svg" id="top-logo"> <a href="input_control.html" class="button">Input Control</a>
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1> <a href="table.html" class="button">Table</a>
<mark class="tertiary" id="top-version-tag">v2.0</mark> <a href="card.html" class="button">Card</a>
</div> <a href="tab.html" class="button">Tab</a>
</div> <a href="contextual.html" class="button">Contextual</a>
</div> <a href="progress.html" class="button">Progress</a>
</div> <a href="utility.html" class="button">Utility</a>
</div>
</header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
@ -133,7 +138,7 @@
<div class="row"><div class="col-sm-4"><div class="box-colored">4</div></div><div class="col-sm-8"><div class="box-colored">8</div></div></div> <div class="row"><div class="col-sm-4"><div class="box-colored">4</div></div><div class="col-sm-8"><div class="box-colored">8</div></div></div>
<div class="row"><div class="col-sm-5"><div class="box-colored">5</div></div><div class="col-sm-7"><div class="box-colored">7</div></div></div> <div class="row"><div class="col-sm-5"><div class="box-colored">5</div></div><div class="col-sm-7"><div class="box-colored">7</div></div></div>
<div class="row"><div class="col-sm-6"><div class="box-colored">6</div></div><div class="col-sm-6"><div class="box-colored">6</div></div></div> <div class="row"><div class="col-sm-6"><div class="box-colored">6</div></div><div class="col-sm-6"><div class="box-colored">6</div></div></div>
<div class="row"><div class="col-sm-12"><div class="box-colored">12</div></div></div> <div class="row"><div class="col-sm-12"><div class="box-colored">12</div></div></div>
<div class="row"><div class="col-sm"><div class="box-colored">fluid</div></div><div class="col-sm"><div class="box-colored">fluid</div></div></div> <div class="row"><div class="col-sm"><div class="box-colored">fluid</div></div><div class="col-sm"><div class="box-colored">fluid</div></div></div>
</div> </div>
</div> </div>
@ -193,7 +198,7 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-12&quot;&gt; &lt;div class=&quot;col-sm-12&quot;&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm&quot;&gt; &lt;div class=&quot;col-sm&quot;&gt;
@ -429,11 +434,11 @@
&lt;div class=&quot;col-sm-8 col-sm-offset-4&quot;&gt; &lt;div class=&quot;col-sm-8 col-sm-offset-4&quot;&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-5 col-sm-offset-1&quot;&gt; &lt;div class=&quot;col-sm-5 col-sm-offset-1&quot;&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;col-sm-5 col-sm-offset-1&quot;&gt; &lt;div class=&quot;col-sm-5 col-sm-offset-1&quot;&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;</pre><br> &lt;/div&gt;</pre><br>
</div> </div>
</div> </div>
@ -552,4 +557,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

4
docs/index.html
View file

@ -2,14 +2,12 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css">
<!-- Local tests -->
<link rel="stylesheet" href="../dist/mini-default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title> <title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <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, toolkit, "> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/>

121
docs/input_control.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Input Control</title> <title>mini.css - Input Control</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, input, control, form, button"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, input, control, form, button ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -69,30 +69,35 @@
.box-colored { .box-colored {
color: #f5f5f5; color: #f5f5f5;
} }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;Github</a>
</div> </div>
</header> </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);"> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<div class="row"> <a href="core.html" class="button">Core</a>
<div class="col-sm"> <a href="grid.html" class="button">Grid</a>
<div class="box-centered"> <a href="navigation.html" class="button">Navigation</a>
<img src="mini-logo.svg" id="top-logo"> <a href="input_control.html" class="button">Input Control</a>
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1> <a href="table.html" class="button">Table</a>
<mark class="tertiary" id="top-version-tag">v2.0</mark> <a href="card.html" class="button">Card</a>
</div> <a href="tab.html" class="button">Tab</a>
</div> <a href="contextual.html" class="button">Contextual</a>
</div> <a href="progress.html" class="button">Progress</a>
</div> <a href="utility.html" class="button">Utility</a>
</div>
</header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
@ -137,7 +142,7 @@
.responsive-label { .responsive-label {
align-items: center; align-items: center;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.responsive-label .col-md-3 { .responsive-label .col-md-3 {
text-align: right; text-align: right;
} }
@ -192,11 +197,11 @@
&lt;fieldset&gt; &lt;fieldset&gt;
&lt;legend&gt;Simple form&lt;/legend&gt; &lt;legend&gt;Simple form&lt;/legend&gt;
&lt;div class=&quot;input-group&quot;&gt; &lt;div class=&quot;input-group&quot;&gt;
&lt;label for=&quot;username&quot;&gt;username&lt;/label&gt; &lt;label for=&quot;username&quot;&gt;username&lt;/label&gt;
&lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt; &lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt; &lt;div class=&quot;input-group&quot;&gt;
&lt;label for=&quot;pwd&quot;&gt;password&lt;/label&gt; &lt;label for=&quot;pwd&quot;&gt;password&lt;/label&gt;
&lt;input type=&quot;password&quot; value=&quot;&quot; id=&quot;pwd&quot; placeholder=&quot;password&quot;&gt; &lt;input type=&quot;password&quot; value=&quot;&quot; id=&quot;pwd&quot; placeholder=&quot;password&quot;&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/fieldset&gt; &lt;/fieldset&gt;
@ -218,7 +223,7 @@
&lt;legend&gt;Responsive form&lt;/legend&gt; &lt;legend&gt;Responsive form&lt;/legend&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt; &lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
&lt;label for=&quot;username&quot;&gt;username&lt;/label&gt; &lt;label for=&quot;username&quot;&gt;username&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;col-sm-12 col-md&quot;&gt; &lt;div class=&quot;col-sm-12 col-md&quot;&gt;
&lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt; &lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt;
@ -226,7 +231,7 @@
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt; &lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
&lt;label for=&quot;pwd&quot;&gt;password&lt;/label&gt; &lt;label for=&quot;pwd&quot;&gt;password&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt; &lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
&lt;input type=&quot;password&quot; value=&quot;&quot; id=&quot;pwd&quot; placeholder=&quot;password&quot;&gt; &lt;input type=&quot;password&quot; value=&quot;&quot; id=&quot;pwd&quot; placeholder=&quot;password&quot;&gt;
@ -242,13 +247,13 @@
&lt;legend&gt;Responsive form&lt;/legend&gt; &lt;legend&gt;Responsive form&lt;/legend&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-12 col-md-10 col-md-offset-1&quot;&gt; &lt;div class=&quot;col-sm-12 col-md-10 col-md-offset-1&quot;&gt;
&lt;label for=&quot;username&quot;&gt;username&lt;/label&gt; &lt;label for=&quot;username&quot;&gt;username&lt;/label&gt;
&lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt; &lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-12 col-md-10 col-md-offset-1&quot;&gt; &lt;div class=&quot;col-sm-12 col-md-10 col-md-offset-1&quot;&gt;
&lt;label for=&quot;pwd&quot;&gt;password&lt;/label&gt; &lt;label for=&quot;pwd&quot;&gt;password&lt;/label&gt;
&lt;input type=&quot;password&quot; value=&quot;&quot; id=&quot;pwd&quot; placeholder=&quot;password&quot;&gt; &lt;input type=&quot;password&quot; value=&quot;&quot; id=&quot;pwd&quot; placeholder=&quot;password&quot;&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -267,7 +272,7 @@
&lt;legend&gt;Responsive form&lt;/legend&gt; &lt;legend&gt;Responsive form&lt;/legend&gt;
&lt;div class=&quot;row label-aligned&quot;&gt; &lt;div class=&quot;row label-aligned&quot;&gt;
&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt; &lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
&lt;label for=&quot;username&quot;&gt;username&lt;/label&gt; &lt;label for=&quot;username&quot;&gt;username&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;col-sm-12 col-md&quot;&gt; &lt;div class=&quot;col-sm-12 col-md&quot;&gt;
&lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt; &lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt;
@ -283,7 +288,7 @@
&lt;legend&gt;Responsive form&lt;/legend&gt; &lt;legend&gt;Responsive form&lt;/legend&gt;
&lt;div class=&quot;row input-group&quot;&gt; &lt;div class=&quot;row input-group&quot;&gt;
&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt; &lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
&lt;label for=&quot;username&quot;&gt;username&lt;/label&gt; &lt;label for=&quot;username&quot;&gt;username&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;col-sm-12 col-md&quot;&gt; &lt;div class=&quot;col-sm-12 col-md&quot;&gt;
&lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt; &lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt;
@ -324,12 +329,12 @@
<p>Checkboxes and radio buttons come pre-styled, using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, while remaining fully accessible. To create a checkbox or radio button, start using a <code>&lt;div&gt;</code> that implements the <code>.input-group</code> class, and then add an <code>&lt;input&gt;</code> of the proper <code><span class="secondary">type</span></code> inside it (<code><span class="fore-primary">&quot;checkbox&quot;</span></code> or <code><span class="fore-primary">&quot;radio&quot;</span></code>), followed immediately by a <code>&lt;label&gt;</code> linking to it. Remember to add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">&quot;0&quot;</span></code> to your <code>&lt;input&gt;</code>, so that it will register properly for screen readers.</p> <p>Checkboxes and radio buttons come pre-styled, using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, while remaining fully accessible. To create a checkbox or radio button, start using a <code>&lt;div&gt;</code> that implements the <code>.input-group</code> class, and then add an <code>&lt;input&gt;</code> of the proper <code><span class="secondary">type</span></code> inside it (<code><span class="fore-primary">&quot;checkbox&quot;</span></code> or <code><span class="fore-primary">&quot;radio&quot;</span></code>), followed immediately by a <code>&lt;label&gt;</code> linking to it. Remember to add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">&quot;0&quot;</span></code> to your <code>&lt;input&gt;</code>, so that it will register properly for screen readers.</p>
<h3>Sample code</h3> <h3>Sample code</h3>
<pre>&lt;div class=&quot;input-group&quot;&gt; <pre>&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; tabindex=&quot;0&quot;&gt; &lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; tabindex=&quot;0&quot;&gt;
&lt;label for=&quot;check1&quot;&gt;Checkbox&lt;/label&gt; &lt;label for=&quot;check1&quot;&gt;Checkbox&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt; &lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;rad1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt; &lt;input type=&quot;radio&quot; id=&quot;rad1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt;
&lt;label for=&quot;rad1&quot;&gt;Radio&lt;/label&gt; &lt;label for=&quot;rad1&quot;&gt;Radio&lt;/label&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
</div> </div>
@ -343,15 +348,15 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6 col-lg-4"> <div class="col-sm-12 col-md-6 col-lg-4">
<pre>&lt;div class=&quot;input-group&quot;&gt; <pre>&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;rad1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt; &lt;input type=&quot;radio&quot; id=&quot;rad1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt;
&lt;label for=&quot;rad1&quot;&gt;Value 1&lt;/label&gt; &lt;label for=&quot;rad1&quot;&gt;Value 1&lt;/label&gt;
&lt;input type=&quot;radio&quot; id=&quot;rad2&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt; &lt;input type=&quot;radio&quot; id=&quot;rad2&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt;
&lt;label for=&quot;rad2&quot;&gt;Value 2&lt;/label&gt; &lt;label for=&quot;rad2&quot;&gt;Value 2&lt;/label&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can add multiple <code>radio</code> buttons inside one <code>.input-group</code>, as long as they follow the syntax shown above. In fact, we strongly recommend grouping controls that are relevant to each other in this manner.</p> <p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can add multiple <code>radio</code> buttons inside one <code>.input-group</code>, as long as they follow the syntax shown above. In fact, we strongly recommend grouping controls that are relevant to each other in this manner.</p>
</div> </div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last"> <div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
<pre>&lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; tabindex=&quot;0&quot;&gt; <pre>&lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; tabindex=&quot;0&quot;&gt;
&lt;label for=&quot;check1&quot;&gt;Checkbox&lt;/label&gt;</pre> &lt;label for=&quot;check1&quot;&gt;Checkbox&lt;/label&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Always use an <code>.input-group</code> for your checkboxes and radio buttons. Not doing so will cause the checkbox or radio button to not display properly.</p> <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Always use an <code>.input-group</code> for your checkboxes and radio buttons. Not doing so will cause the checkbox or radio button to not display properly.</p>
</div> </div>
@ -363,7 +368,7 @@
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Remember to add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">&quot;0&quot;</span></code> to all your checkboxes and radio buttons to make them accessible.</p> <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Remember to add <code><span class="fore-secondary">tabindex</span>=<span class="fore-primary">&quot;0&quot;</span></code> to all your checkboxes and radio buttons to make them accessible.</p>
</div> </div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last"> <div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
<pre>&lt;div class=&quot;input-group&quot;&gt; <pre>&lt;div class=&quot;input-group&quot;&gt;
&lt;label for=&quot;check1&quot;&gt;Checkbox&lt;/label&gt; &lt;label for=&quot;check1&quot;&gt;Checkbox&lt;/label&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; tabindex=&quot;0&quot;&gt; &lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; tabindex=&quot;0&quot;&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
@ -371,8 +376,8 @@
</div> </div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last"> <div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
<pre>&lt;div class=&quot;input-group&quot;&gt; <pre>&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;rad1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt; &lt;input type=&quot;radio&quot; id=&quot;rad1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;rad2&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt; &lt;input type=&quot;radio&quot; id=&quot;rad2&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt;
&lt;label for=&quot;rad2&quot;&gt;Value 2&lt;/label&gt; &lt;label for=&quot;rad2&quot;&gt;Value 2&lt;/label&gt;
&lt;label for=&quot;rad1&quot;&gt;Value 1&lt;/label&gt; &lt;label for=&quot;rad1&quot;&gt;Value 1&lt;/label&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
@ -388,7 +393,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
@ -403,7 +408,7 @@
<button class="tertiary">Tertiary button</button> <button class="tertiary">Tertiary button</button>
<button class="inverse">Inverse button</button> <button class="inverse">Inverse button</button>
<button class="small">Small button</button> <button class="small">Small button</button>
<button class="large">Large button</button> <button class="large">Large button</button>
<button disabled>Disabled button</button> <button disabled>Disabled button</button>
<h4>Button group</h4> <h4>Button group</h4>
<div class="button-group"> <div class="button-group">
@ -423,7 +428,7 @@
&lt;input type=&quot;submit&quot; class=&quot;tertiary&quot; value=&quot;Tertiary button&quot;&gt; &lt;input type=&quot;submit&quot; class=&quot;tertiary&quot; value=&quot;Tertiary button&quot;&gt;
&lt;button class=&quot;inverse&quot;&gt;Inverse button&lt;/button&gt; &lt;button class=&quot;inverse&quot;&gt;Inverse button&lt;/button&gt;
&lt;button class=&quot;small&quot;&gt;Small button&lt;/button&gt; &lt;button class=&quot;small&quot;&gt;Small button&lt;/button&gt;
&lt;button class=&quot;large&quot;&gt;Large button&lt;/button&gt; &lt;button class=&quot;large&quot;&gt;Large button&lt;/button&gt;
&lt;button disabled&gt;Disabled button&lt;/button&gt; &lt;button disabled&gt;Disabled button&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Link button&lt;/a&gt; &lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Link button&lt;/a&gt;
&lt;label class=&quot;button&quot;&gt;Label button&lt;/label&gt; &lt;label class=&quot;button&quot;&gt;Label button&lt;/label&gt;
@ -526,4 +531,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

79
docs/modules.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Modules</title> <title>mini.css - Modules</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, modules"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, modules">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -47,45 +47,34 @@
.box-left { text-align: left; } .box-left { text-align: left; }
</style> </style>
</head> </head>
<body> <body>
<header> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); ">
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;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> </header>
</div>
</div>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
<div class="col-sm"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h1>Modules</h1> <h1>Modules</h1>
<p><strong>mini.css</strong> uses modules as its base building blocks. Each module contains one or more components that affect the same part of the user experience. Below you can see a quick overview of all the modules that compose <strong>mini.css</strong>.</p><br> <p><strong>mini.css</strong> uses modules as its base building blocks. Each module contains one or more components that affect the same part of the user experience. Below you can see a quick overview of all the modules that compose <strong>mini.css</strong>.</p><br>
</div> </div>
</div> </div>
<div class="row box-centered"> <div class="row box-centered">
<div class="col-sm-12 col-md-6 row"> <div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1 row">
<div class="card fluid"> <div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-font fa-fw" aria-hidden="true"></i></mark>&nbsp;Core</h2> <h2 class="section"><mark class="primary"><i class="fa fa-font fa-fw" aria-hidden="true"></i></mark>&nbsp;Core</h2>
<p class="section box-left">The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p> <p class="section box-left">The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p>
<a href="core.html" class="button section">See more</a> <a href="core.html" class="button section">See more</a>
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-6 row"> <div class="col-sm-12 col-md-6 col-lg-5 row">
<div class="card fluid"> <div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></mark>&nbsp;Grid</h2> <h2 class="section"><mark class="secondary"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></mark>&nbsp;Grid</h2>
<p class="section box-left">The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p> <p class="section box-left">The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p>
@ -94,14 +83,14 @@
</div> </div>
</div> </div>
<div class="row box-centered"> <div class="row box-centered">
<div class="col-sm-12 col-md-6 row"> <div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1 row">
<div class="card fluid"> <div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark>&nbsp;Navigation</h2> <h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark>&nbsp;Navigation</h2>
<p class="section box-left">The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p> <p class="section box-left">The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p>
<a href="navigation.html" class="button section">See more</a> <a href="navigation.html" class="button section">See more</a>
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-6 row"> <div class="col-sm-12 col-md-6 col-lg-5 row">
<div class="card fluid"> <div class="card fluid">
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Input Control</h2> <h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Input Control</h2>
<p class="section box-left">The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p> <p class="section box-left">The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
@ -110,14 +99,14 @@
</div> </div>
</div> </div>
<div class="row box-centered"> <div class="row box-centered">
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1 row">
<div class="card fluid"> <div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-table fa-fw" aria-hidden="true"></i></mark>&nbsp;Table</h2> <h2 class="section"><mark class="primary"><i class="fa fa-table fa-fw" aria-hidden="true"></i></mark>&nbsp;Table</h2>
<p class="section box-left">The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.</p> <p class="section box-left">The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.</p>
<a href="table.html" class="button section">See more</a> <a href="table.html" class="button section">See more</a>
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6 col-lg-5 row">
<div class="card fluid"> <div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Card</h2> <h2 class="section"><mark class="secondary"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Card</h2>
<p class="section box-left">The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p> <p class="section box-left">The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p>
@ -126,14 +115,14 @@
</div> </div>
</div> </div>
<div class="row box-centered"> <div class="row box-centered">
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1 row">
<div class="card fluid"> <div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Tab</h2> <h2 class="section"><mark class="secondary"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Tab</h2>
<p class="section box-left">The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</p> <p class="section box-left">The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</p>
<a href="tab.html" class="button section">See more</a> <a href="tab.html" class="button section">See more</a>
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6 col-lg-5 row">
<div class="card fluid"> <div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark>&nbsp;Contextual</h2> <h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark>&nbsp;Contextual</h2>
<p class="section box-left">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p> <p class="section box-left">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
@ -142,14 +131,14 @@
</div> </div>
</div> </div>
<div class="row box-centered" style="padding-bottom: 40px;"> <div class="row box-centered" style="padding-bottom: 40px;">
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1 row">
<div class="card fluid"> <div class="card fluid">
<h2 class="section"><mark class="tertiary"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></mark>&nbsp;Progress</h2> <h2 class="section"><mark class="tertiary"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></mark>&nbsp;Progress</h2>
<p class="section box-left">The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p> <p class="section box-left">The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
<a href="progress.html" class="button section">See more</a> <a href="progress.html" class="button section">See more</a>
</div> </div>
</div> </div>
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6 col-lg-5 row">
<div class="card fluid"> <div class="card fluid">
<h2 class="section"><mark class="tertiary"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></mark>&nbsp;Utility</h2> <h2 class="section"><mark class="tertiary"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></mark>&nbsp;Utility</h2>
<p class="section box-left">The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.</p> <p class="section box-left">The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.</p>
@ -161,4 +150,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

87
docs/navigation.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Navigation</title> <title>mini.css - navigation</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, navigation"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, navigation ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -69,30 +69,35 @@
.box-colored { .box-colored {
color: #f5f5f5; color: #f5f5f5;
} }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;Github</a>
</div> </div>
</header> </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);"> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<div class="row"> <a href="core.html" class="button">Core</a>
<div class="col-sm"> <a href="grid.html" class="button">Grid</a>
<div class="box-centered"> <a href="navigation.html" class="button">Navigation</a>
<img src="mini-logo.svg" id="top-logo"> <a href="input_control.html" class="button">Input Control</a>
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1> <a href="table.html" class="button">Table</a>
<mark class="tertiary" id="top-version-tag">v2.0</mark> <a href="card.html" class="button">Card</a>
</div> <a href="tab.html" class="button">Tab</a>
</div> <a href="contextual.html" class="button">Contextual</a>
</div> <a href="progress.html" class="button">Progress</a>
</div> <a href="utility.html" class="button">Utility</a>
</div>
</header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
@ -203,7 +208,7 @@
<span class="sublink-1">Events</span> <span class="sublink-1">Events</span>
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a> <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a> <a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
<a href="#" class="sublink-1">Policy Update</a> <a href="#" class="sublink-1">Policy Update</a>
<a href="#">About</a> <a href="#">About</a>
<a href="#">Contact</a> <a href="#">Contact</a>
</nav> </nav>
@ -221,7 +226,7 @@
&lt;span class=&quot;sublink-1&quot;&gt;Events&lt;/span&gt; &lt;span class=&quot;sublink-1&quot;&gt;Events&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Course Showcase - 12th, Dec&lt;/a&gt; &lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Course Showcase - 12th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Staff AMA - 16th, Dec&lt;/a&gt; &lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Staff AMA - 16th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Policy Update&lt;/a&gt; &lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Policy Update&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt; &lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
&lt;/nav&gt;</pre> &lt;/nav&gt;</pre>
@ -274,7 +279,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;"> <div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm"> <div class="col-sm">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p> <p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
@ -284,4 +289,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

81
docs/progress.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Progress</title> <title>mini.css - Progress</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, progress"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, progress ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -69,30 +69,35 @@
.box-colored { .box-colored {
color: #f5f5f5; color: #f5f5f5;
} }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;Github</a>
</div> </div>
</header> </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);"> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<div class="row"> <a href="core.html" class="button">Core</a>
<div class="col-sm"> <a href="grid.html" class="button">Grid</a>
<div class="box-centered"> <a href="navigation.html" class="button">Navigation</a>
<img src="mini-logo.svg" id="top-logo"> <a href="input_control.html" class="button">Input Control</a>
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1> <a href="table.html" class="button">Table</a>
<mark class="tertiary" id="top-version-tag">v2.0</mark> <a href="card.html" class="button">Card</a>
</div> <a href="tab.html" class="button">Tab</a>
</div> <a href="contextual.html" class="button">Contextual</a>
</div> <a href="progress.html" class="button">Progress</a>
</div> <a href="utility.html" class="button">Utility</a>
</div>
</header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
@ -293,4 +298,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

57
docs/quick_reference.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Quick Reference</title> <title>mini.css - Quick Reference</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, reference, cheatsheet"> <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 name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -70,27 +70,16 @@
</style> </style>
</head> </head>
<body> <body>
<header> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); ">
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;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> </header>
</div>
</div>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">

89
docs/tab.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Tab</title> <title>mini.css - Tab</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, tab, tabs"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, tab, tabs ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -69,30 +69,35 @@
.box-colored { .box-colored {
color: #f5f5f5; color: #f5f5f5;
} }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;Github</a>
</div> </div>
</header> </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);"> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<div class="row"> <a href="core.html" class="button">Core</a>
<div class="col-sm"> <a href="grid.html" class="button">Grid</a>
<div class="box-centered"> <a href="navigation.html" class="button">Navigation</a>
<img src="mini-logo.svg" id="top-logo"> <a href="input_control.html" class="button">Input Control</a>
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1> <a href="table.html" class="button">Table</a>
<mark class="tertiary" id="top-version-tag">v2.0</mark> <a href="card.html" class="button">Card</a>
</div> <a href="tab.html" class="button">Tab</a>
</div> <a href="contextual.html" class="button">Contextual</a>
</div> <a href="progress.html" class="button">Progress</a>
</div> <a href="utility.html" class="button">Utility</a>
</div>
</header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
@ -262,7 +267,7 @@
<div> <div>
<h3>Section 1</h3> <h3>Section 1</h3>
<p>This is the first accordion section's content.</p> <p>This is the first accordion section's content.</p>
</div> </div>
<input type="radio" name="accordion" id="a2" autocomplete="off" aria-hidden="true"> <input type="radio" name="accordion" id="a2" autocomplete="off" aria-hidden="true">
<label for="a2" aria-hidden="true">Accordion section 2</label> <label for="a2" aria-hidden="true">Accordion section 2</label>
<div> <div>
@ -281,7 +286,7 @@
<div> <div>
<p>This is the second collapse section's content.</p> <p>This is the second collapse section's content.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal"> <div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p>Apart from the normal tab layout, you can make your tabs stacked instead, using the <code>.stacked</code> class in your <code>.tabs</code> container element. Stacked tabs are more versatile, allowing you to use checkboxes and/or radio buttons to implement collapses, accordions and spoilers. Carousel-styled elements can also be displayed in this fashion, if you wish. Remember to use the <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> attribute to make your tabs fully accessible, as before.</p> <p>Apart from the normal tab layout, you can make your tabs stacked instead, using the <code>.stacked</code> class in your <code>.tabs</code> container element. Stacked tabs are more versatile, allowing you to use checkboxes and/or radio buttons to implement collapses, accordions and spoilers. Carousel-styled elements can also be displayed in this fashion, if you wish. Remember to use the <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> attribute to make your tabs fully accessible, as before.</p>
@ -292,7 +297,7 @@
&lt;div&gt; &lt;div&gt;
&lt;h3&gt;Section 1&lt;/h3&gt; &lt;h3&gt;Section 1&lt;/h3&gt;
&lt;p&gt;This is the first accordion section's content.&lt;/p&gt; &lt;p&gt;This is the first accordion section's content.&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a2&quot;aria-hidden=&quot;true&quot;&gt; &lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a2&quot;aria-hidden=&quot;true&quot;&gt;
&lt;label for=&quot;a2&quot; aria-hidden=&quot;true&quot;&gt;Accordion section 2&lt;/label&gt; &lt;label for=&quot;a2&quot; aria-hidden=&quot;true&quot;&gt;Accordion section 2&lt;/label&gt;
&lt;div&gt; &lt;div&gt;
@ -339,7 +344,7 @@
&lt;label for=&quot;a1&quot; aria-hidden=&quot;true&quot;&gt;Single accordion section&lt;/label&gt; &lt;label for=&quot;a1&quot; aria-hidden=&quot;true&quot;&gt;Single accordion section&lt;/label&gt;
&lt;div&gt; &lt;div&gt;
&lt;p&gt;This accordion section cannot close once opened&lt;/p&gt; &lt;p&gt;This accordion section cannot close once opened&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;</pre> &lt;/div&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid having a single radio-based tab in a <code>.tabs</code><code>.stacked</code> container, as this might result in unexpected behavior.</p> <p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid having a single radio-based tab in a <code>.tabs</code><code>.stacked</code> container, as this might result in unexpected behavior.</p>
</div> </div>
@ -357,4 +362,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

89
docs/table.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Table</title> <title>mini.css - Table</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, table"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, table ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; } .box-colored.red { background: #e53935; }
.box-centered > .card.fluid { .box-centered > .card.fluid {
-webkit-box-pack: start; -webkit-box-pack: start;
-webkit-box-align: start; -webkit-box-align: start;
-webkit-justify-content: flex-start; -webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
-webkit-align-self: auto; -webkit-align-self: auto;
@ -102,30 +102,35 @@
font-weight: 700; } font-weight: 700; }
table#carded td:last-child { table#carded td:last-child {
border-bottom: 0; } border-bottom: 0; }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;Github</a>
</div> </div>
</header> </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);"> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<div class="row"> <a href="core.html" class="button">Core</a>
<div class="col-sm"> <a href="grid.html" class="button">Grid</a>
<div class="box-centered"> <a href="navigation.html" class="button">Navigation</a>
<img src="mini-logo.svg" id="top-logo"> <a href="input_control.html" class="button">Input Control</a>
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1> <a href="table.html" class="button">Table</a>
<mark class="tertiary" id="top-version-tag">v2.0</mark> <a href="card.html" class="button">Card</a>
</div> <a href="tab.html" class="button">Tab</a>
</div> <a href="contextual.html" class="button">Contextual</a>
</div> <a href="progress.html" class="button">Progress</a>
</div> <a href="utility.html" class="button">Utility</a>
</div>
</header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
@ -408,7 +413,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
@ -509,10 +514,10 @@
<hr> <hr>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6">
<pre>&lt;style&gt; <pre>&lt;style&gt;
.border-fix &gt; td, .border-fix &gt; th { .border-fix &gt; td, .border-fix &gt; th {
border-top: 0; border-top: 0;
} }
&lt;/style&gt; &lt;/style&gt;
&lt;table class=&quot;preset&quot;&gt; &lt;table class=&quot;preset&quot;&gt;
@ -547,7 +552,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;"> <div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm"> <div class="col-sm">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p> <p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
@ -557,4 +562,4 @@
<!-- End of page content--> <!-- End of page content-->
<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> <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>
</body> </body>
</html> </html>

75
docs/utility.html
View file

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> <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"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Utility</title> <title>mini.css - Utility</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass, module, utility, helper, classes, utilities"> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, utility, helper, classes, utilities ">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG"> <meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
<style> <style>
/* Classes and ids used in multiple pages - page top and utilities */ /* Classes and ids used in multiple pages - page top and utilities */
#header-logo { #header-logo {
@ -69,30 +69,35 @@
.box-colored { .box-colored {
color: #f5f5f5; color: #f5f5f5;
} }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;"> <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="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;">
<a href="index.html" class="button">Introduction</a> <a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a> <a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</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>&nbsp;Github</a>
</div> </div>
</header> </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);"> <header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); height: 36px;">
<div class="row"> <a href="core.html" class="button">Core</a>
<div class="col-sm"> <a href="grid.html" class="button">Grid</a>
<div class="box-centered"> <a href="navigation.html" class="button">Navigation</a>
<img src="mini-logo.svg" id="top-logo"> <a href="input_control.html" class="button">Input Control</a>
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1> <a href="table.html" class="button">Table</a>
<mark class="tertiary" id="top-version-tag">v2.0</mark> <a href="card.html" class="button">Card</a>
</div> <a href="tab.html" class="button">Tab</a>
</div> <a href="contextual.html" class="button">Contextual</a>
</div> <a href="progress.html" class="button">Progress</a>
</div> <a href="utility.html" class="button">Utility</a>
</div>
</header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">

3
docs/v2/DEVLOG.md
View file

@ -816,3 +816,6 @@
- Updated `.card.section` to work properly with `[role="button"]` elements. - Updated `.card.section` to work properly with `[role="button"]` elements.
- #22: Spent a lot of time testing possible implementation of *Media Object*. See related issue for what I ended up with. - #22: Spent a lot of time testing possible implementation of *Media Object*. See related issue for what I ended up with.
- Updated `index.html`. It's now ready for v2.1.0. - Updated `index.html`. It's now ready for v2.1.0.
- Created the module `header` navigation bar to help make navigation easier.
- Updated all `head` elements for all pages.
- Updated top navigation for all pages.