mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 13:56:27 +02:00
Code Issues Releases Wiki Activity

Housekeeping

Browse Source
This commit is contained in:
Angelos Chalaris
2017-02-07 12:23:53 +02:00
parent 74a815642f
commit 9d002418c2
16 changed files with 730 additions and 1832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
docs/card.html
View File

@@ -1,102 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
<style> .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Classes and ids used in multiple pages - page top and utilities */ [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
#header-logo { .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;}
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #bdbdbd;}}
padding: 4px; .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
} .box-colored {color: #f5f5f5;}header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
#top-logo { </style>
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-md-12.col-md-normal {
box-sizing: border-box;
border-bottom: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-12.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
</head> </head>
<body> <body>
<header> <header>
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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> <header class="sticky" style="height:36px;">
<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;"> <a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="core.html" class="button">Core</a> <a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="grid.html" class="button">Grid</a> <a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="navigation.html" class="button">Navigation</a> <a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="input_control.html" class="button">Input Control</a> <a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
<a href="table.html" class="button">Table</a>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<a href="utility.html" class="button">Utility</a>
</div>
</header> </header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
@@ -126,9 +68,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"> <h2>Basic syntax</h2></div>
<h2>Basic syntax</h2>
</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">
@@ -171,8 +111,7 @@
<ul> <ul>
<li>The <strong>card</strong> module is compatible with modern browsers, but might not display properly in older browsers.</li> <li>The <strong>card</strong> module is compatible with modern browsers, but might not display properly in older browsers.</li>
<li>If you want to further customize your <code>.section</code>s, check the section below.</li> <li>If you want to further customize your <code>.section</code>s, check the section below.</li>
</ul> </ul><hr>
<hr>
<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;card&quot;&gt; <pre>&lt;div class=&quot;card&quot;&gt;
@@ -245,21 +184,17 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Sections &amp; media</h2></div>
<h2>Sections &amp; media</h2>
</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>
</div> </div>
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal"> <div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
@@ -292,13 +227,10 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Card sizing &amp; fluidity</h2></div>
<h2>Card sizing &amp; fluidity</h2>
</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>
<div class="card large"><div class="section"><h3>Large Card</h3><p>Large cards are <code>480px</code> wide.</p></div></div> <div class="card large"><div class="section"><h3>Large Card</h3><p>Large cards are <code>480px</code> wide.</p></div></div>
@@ -338,8 +270,7 @@
<ul> <ul>
<li><code>.fluid</code> cards might not display properly in older browsers, especially legacy versions of Internet Explorer.</li> <li><code>.fluid</code> cards might not display properly in older browsers, especially legacy versions of Internet Explorer.</li>
<li>Due to the fact that <code>.fluid</code> cards stretch to fill their parent container, they might not fully respect their margins, like the rest of the cards. However, this should not cause any noticable problems with layout, except maybe the odd pixel here and there.</li> <li>Due to the fact that <code>.fluid</code> cards stretch to fill their parent container, they might not fully respect their margins, like the rest of the cards. However, this should not cause any noticable problems with layout, except maybe the odd pixel here and there.</li>
</ul> </ul><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;div class=&quot;card&quot;&gt; <pre>&lt;div class=&quot;card&quot;&gt;

150
docs/contextual.html
View File

@@ -1,103 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
<style> .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Classes and ids used in multiple pages - page top and utilities */ [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
#header-logo { .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
padding: 4px; .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
} .box-colored {color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
#top-logo { </style>
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
</head> </head>
<body> <body>
<header> <header>
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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> <header class="sticky" style="height:36px;">
<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;"> <a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="core.html" class="button">Core</a> <a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="grid.html" class="button">Grid</a> <a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="navigation.html" class="button">Navigation</a> <a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="input_control.html" class="button">Input Control</a> <a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
<a href="table.html" class="button">Table</a> </header>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<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,9 +68,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Text highlighting</h2></div>
<h2>Text highlighting</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div> <div>
@@ -153,8 +93,7 @@
<ul> <ul>
<li>Try to use elements with the <code>.inline-block</code> class only when absolutely necessary, as they break the normal text flow of the document. Avoid using this class on shorter pieces of text that span a few words and contain no line breaks.</li> <li>Try to use elements with the <code>.inline-block</code> class only when absolutely necessary, as they break the normal text flow of the document. Avoid using this class on shorter pieces of text that span a few words and contain no line breaks.</li>
<li><code>&lt;mark&gt;</code> elements, along with their supporting classes (except for <code>.inline-block</code>) can be easily used in paragraphs, headings and other elements, as they scale according to their parent element.</li> <li><code>&lt;mark&gt;</code> elements, along with their supporting classes (except for <code>.inline-block</code>) can be easily used in paragraphs, headings and other elements, as they scale according to their parent element.</li>
</ul> </ul><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;mark class=&quot;tag tertiary&quot;&gt;green tag&lt;/mark&gt; <pre>&lt;mark class=&quot;tag tertiary&quot;&gt;green tag&lt;/mark&gt;
@@ -188,9 +127,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Alerts</h2></div>
<h2>Alerts</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div> <div>
@@ -220,8 +157,7 @@
<h3>Notes</h3> <h3>Notes</h3>
<ul> <ul>
<li>Alert elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li> <li>Alert elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.</li>
</ul> </ul><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;p class=&quot;alert&quot;&gt;Short and to the point&lt;/p&gt; <pre>&lt;p class=&quot;alert&quot;&gt;Short and to the point&lt;/p&gt;
@@ -241,9 +177,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Animated alerts</h2></div>
<h2>Animated alerts</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div> <div>

146
docs/core.html
View File

@@ -1,90 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework"> <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: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:type" content="website"/><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> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
/* Classes and ids used in multiple pages - page top and utilities */ .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
#header-logo { .box-centered { text-align: center; } .box-colored.red { background: #e53935; }
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
padding: 4px; [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
} .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
#top-logo { @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; } }
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px; header.sticky a.button { padding: 4px 6px; font-size: 0.95em; }
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35); </style>
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
</head> </head>
<body> <body>
<header> <header>
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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> <header class="sticky" style="height:36px;">
<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;"> <a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="core.html" class="button">Core</a> <a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="grid.html" class="button">Grid</a> <a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="navigation.html" class="button">Navigation</a> <a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="input_control.html" class="button">Input Control</a> <a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
<a href="table.html" class="button">Table</a>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<a href="utility.html" class="button">Utility</a>
</div>
</header> </header>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
@@ -114,9 +68,7 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1"> <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></div>
<h2>Typography</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12"> <div class="col-sm-12">
<p>For the basic typography rules we did the following, along with other things presented below:</p> <p>For the basic typography rules we did the following, along with other things presented below:</p>
@@ -134,9 +86,7 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1"> <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></div>
<h2>Headings</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal row"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal row">
<div class="col-sm-12 col-lg-6 col-lg-first"><h1>Heading 1<small>Subheading</small></h1></div> <div class="col-sm-12 col-lg-6 col-lg-first"><h1>Heading 1<small>Subheading</small></h1></div>
@@ -163,13 +113,10 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1"> <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></div>
<h2>Common textual elements</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div><br><p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.1 is codenamed <strong>Fermion</strong>? No? Well, now you do! Oh, by the way, that was some Bold text and here is some <em>text in Italics</em>. Maybe you want to know what our inline elements look like. For example a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! Neat, right? Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. Finally, check out the horizontal rule, preformatted code block and quotation below.</p> <div><br><p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.1 is codenamed <strong>Fermion</strong>? No? Well, now you do! Oh, by the way, that was some Bold text and here is some <em>text in Italics</em>. Maybe you want to know what our inline elements look like. For example a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! Neat, right? Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. Finally, check out the horizontal rule, preformatted code block and quotation below.</p><hr>
<hr>
<pre>function sum(num1, num2) { <pre>function sum(num1, num2) {
var num3 = num1 + num2; var num3 = num1 + num2;
console.log('Result: ' + num3); console.log('Result: ' + num3);
@@ -200,25 +147,20 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1"> <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></div>
<h2>Lists</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div> <div><br>
<br>
<ul> <ul>
<li>Apple</li> <li>Apple</li>
<li>Orange</li> <li>Orange</li>
<li>Strawberry</li> <li>Strawberry</li>
</ul> </ul><br>
<br>
<ol> <ol>
<li>Wake up</li> <li>Wake up</li>
<li>Eat breakfast</li> <li>Eat breakfast</li>
<li>Go to work</li> <li>Go to work</li>
</ol> </ol><br>
<br>
</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">
@@ -243,14 +185,10 @@
<div class="row"> <div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1"> <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></div>
<h2>Image responsiveness</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div> <div><img src="https://placehold.it/800x600"></div>
<img src="http://placehold.it/800x600">
</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>Image elements (<code>&lt;img&gt;</code>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.</p> <p>Image elements (<code>&lt;img&gt;</code>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.</p>

131
docs/customization.html
View File

@@ -1,66 +1,34 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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)"> <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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
<style> .box-colored.red { background: #e53935; } .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; } .box-left { text-align: left; }
/* Classes and ids used in multiple pages - page top and utilities */ [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
#header-logo { </style>
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.box-left { text-align: left; }
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
</style>
</head> </head>
<body> <body>
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); "> <header class="sticky">
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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>
<!-- 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;">
@@ -103,9 +71,7 @@
<h2>Building a flavor</h2> <h2>Building a flavor</h2>
<p>Creating your own flavor can be as easy or as complicated as your needs. Adding and removing modules is as simple as adding an <code>@import</code> statement or commenting it out, after declaring all the required variables. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.</p><br> <p>Creating your own flavor can be as easy or as complicated as your needs. Adding and removing modules is as simple as adding an <code>@import</code> statement or commenting it out, after declaring all the required variables. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.</p><br>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h3>Core</h3></div>
<h3>Core</h3>
</div>
<div class="section"> <div class="section">
<p>The <strong>core</strong> module uses a lot of variables, most of which are pretty straightforward. Some of the most important ones are as follows:</p> <p>The <strong>core</strong> module uses a lot of variables, most of which are pretty straightforward. Some of the most important ones are as follows:</p>
<ul> <ul>
@@ -120,25 +86,19 @@
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h3>Grid</h3></div>
<h3>Grid</h3>
</div>
<div class="section"> <div class="section">
<p>The <strong>grid</strong> module contains two important variables, the boolean <code>$use-four-step-grid</code> which determines if the grid has 3 or 4 breakpoints and the <code>$grid-column-count</code> which determines the amount of vertical columns used for the grid's layout. Apart from those, there are a few variables that set the names for the grid system's classes, prefixes and suffixes and the grid's screen size breakpoint definitions.</p> <p>The <strong>grid</strong> module contains two important variables, the boolean <code>$use-four-step-grid</code> which determines if the grid has 3 or 4 breakpoints and the <code>$grid-column-count</code> which determines the amount of vertical columns used for the grid's layout. Apart from those, there are a few variables that set the names for the grid system's classes, prefixes and suffixes and the grid's screen size breakpoint definitions.</p>
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h3>Navigation</h3></div>
<h3>Navigation</h3>
</div>
<div class="section"> <div class="section">
<p>The <strong>navigation</strong> module contains a plethora of variables used in the styling of the navigational elements. Most of them concern colors, spacing and sizing or similar things. Bear in mind that the presentation of buttons inside the <code>&lt;header&gt;</code> element will be affected by the styling of all button elements, as defined in the <code>input_control</code> module. The variable that stands out in this module is <code>$nav-sublink-depth</code> which determines how deep a navigational hierarchy tree can be.</p> <p>The <strong>navigation</strong> module contains a plethora of variables used in the styling of the navigational elements. Most of them concern colors, spacing and sizing or similar things. Bear in mind that the presentation of buttons inside the <code>&lt;header&gt;</code> element will be affected by the styling of all button elements, as defined in the <code>input_control</code> module. The variable that stands out in this module is <code>$nav-sublink-depth</code> which determines how deep a navigational hierarchy tree can be.</p>
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h3>Input Control</h3></div>
<h3>Input Control</h3>
</div>
<div class="section"> <div class="section">
<p>The <strong>input_control</strong> module is one of the larger modules, containg a lot of variables to style a multitude of elements. Forms and textual <code>&lt;input&gt;</code> elements utilize variables that concern color, spacing, sizing etc. Button variables are more interesting, especially the ones concerning the opacity of button elements (<code>$button-back-opacity</code> and <code>$button-hover-back-opacity</code>). The <code>$hide-file-inputs</code> boolean variable determines how <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;file&quot;</span>&gt;</code> elements will be handled. Checkboxes and radio buttons also use a few variables concerning basic styling, but special attention needs to be paid to the <code>$checkbox-size</code> variable, as it determines a few attributes of both elements.</p> <p>The <strong>input_control</strong> module is one of the larger modules, containg a lot of variables to style a multitude of elements. Forms and textual <code>&lt;input&gt;</code> elements utilize variables that concern color, spacing, sizing etc. Button variables are more interesting, especially the ones concerning the opacity of button elements (<code>$button-back-opacity</code> and <code>$button-hover-back-opacity</code>). The <code>$hide-file-inputs</code> boolean variable determines how <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;file&quot;</span>&gt;</code> elements will be handled. Checkboxes and radio buttons also use a few variables concerning basic styling, but special attention needs to be paid to the <code>$checkbox-size</code> variable, as it determines a few attributes of both elements.</p>
<p>There are two mixins in the <strong>input_control</strong> module, specifically:</p> <p>There are two mixins in the <strong>input_control</strong> module, specifically:</p>
@@ -149,17 +109,13 @@
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h3>Table</h3></div>
<h3>Table</h3>
</div>
<div class="section"> <div class="section">
<p>The <strong>table</strong> module's variables deal mostly with basic table styling. The <code>$table-mobile-breakpoint</code> is very important as it determines the breakpoint for responsive tables' mobile view, along with <code>$table-mobile-card-label</code> which determines the attribute that will be used to display the table headings on mobile devices.</p> <p>The <strong>table</strong> module's variables deal mostly with basic table styling. The <code>$table-mobile-breakpoint</code> is very important as it determines the breakpoint for responsive tables' mobile view, along with <code>$table-mobile-card-label</code> which determines the attribute that will be used to display the table headings on mobile devices.</p>
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h3>Card</h3></div>
<h3>Card</h3>
</div>
<div class="section"> <div class="section">
<p>The <strong>card</strong> modules' variables mostly deal with things like class names, spacing, sizing and colors. Cards offer a handful of mixins, specifically:</p> <p>The <strong>card</strong> modules' variables mostly deal with things like class names, spacing, sizing and colors. Cards offer a handful of mixins, specifically:</p>
<ul> <ul>
@@ -171,17 +127,13 @@
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h3>Tab</h3></div>
<h3>Tab</h3>
</div>
<div class="section"> <div class="section">
<p>The <strong>tab</strong> module utilizes a few naming and color variables, along with some sizing and spacing variables to deal with presentation and functionality. Many of the sizing variables are very dependent on each other's values. The <code>$tab-stacked-breakpoint</code> variable is especially important, as it determines the mobile view breakpoint for the tabs component.</p> <p>The <strong>tab</strong> module utilizes a few naming and color variables, along with some sizing and spacing variables to deal with presentation and functionality. Many of the sizing variables are very dependent on each other's values. The <code>$tab-stacked-breakpoint</code> variable is especially important, as it determines the mobile view breakpoint for the tabs component.</p>
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h3>Contextual</h3></div>
<h3>Contextual</h3>
</div>
<div class="section"> <div class="section">
<p>The <strong>contextual</strong> module features, apart from basic naming and styling variables, a few things of note. The boolean variable <code>$alert-include-animated</code> determines if animated alerts will be inluded or not. There is also a handful of mixins, which are the most important part of the contextual module as they are what makes it useful:</p> <p>The <strong>contextual</strong> module features, apart from basic naming and styling variables, a few things of note. The boolean variable <code>$alert-include-animated</code> determines if animated alerts will be inluded or not. There is also a handful of mixins, which are the most important part of the contextual module as they are what makes it useful:</p>
<ul> <ul>
@@ -193,9 +145,7 @@
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h3>Progress</h3></div>
<h3>Progress</h3>
</div>
<div class="section"> <div class="section">
<p>The <strong>progress</strong> module contains lots of variables that affect basic styling, but it also features a few interesting mixins:</p> <p>The <strong>progress</strong> module contains lots of variables that affect basic styling, but it also features a few interesting mixins:</p>
<ul> <ul>
@@ -208,9 +158,7 @@
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h3>Utility</h3></div>
<h3>Utility</h3>
</div>
<div class="section"> <div class="section">
<p>The <strong>utility</strong> module contains a few variables dealing with naming and basic styling, but its most important feature is its mixins:</p> <p>The <strong>utility</strong> module contains a few variables dealing with naming and basic styling, but its most important feature is its mixins:</p>
<ul> <ul>
@@ -230,10 +178,7 @@
<p>If you would rather use one of the pre-defined flavors, check out our <a href="flavors.html">flavors</a> page for a list of all flavors currently available.</p> <p>If you would rather use one of the pre-defined flavors, check out our <a href="flavors.html">flavors</a> page for a list of all flavors currently available.</p>
</div> </div>
</div> </div>
<div class="row box-centered"> <div class="row box-centered"><div class="col-sm-12"></div></div>
<div class="col-sm-12">
</div>
</div>
</div></main> </div></main>
<!-- 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>

91
docs/flavors.html
View File

@@ -1,70 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
<style> .box-colored.red { background: #e53935; } .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Classes and ids used in multiple pages - page top and utilities */ h2 > a{ font-size: 1rem; float: right;} .box-left { text-align: left; }
#header-logo { [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; </style>
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
h2 > a{
font-size: 1rem;
float: right;
}
.box-left { text-align: left; }
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
</style>
</head> </head>
<body> <body>
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); "> <header class="sticky">
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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>
<!-- 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;">

147
docs/grid.html
View File

@@ -1,116 +1,47 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
<style> .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Classes and ids used in multiple pages - page top and utilities */ [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
#header-logo { .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;} }
padding: 4px; .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
} .box-colored {color: #f5f5f5; } header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
#top-logo { .col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;margin-bottom: 16px;padding-bottom: 12px;}
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px; @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; margin-bottom: 0;}}
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35); </style>
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
.col-sm-12.col-sm-last.col-md-12.col-md-normal {
box-sizing: border-box;
border-bottom: 1px solid #bdbdbd;
margin-bottom: 16px;
padding-bottom: 12px;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-12.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
margin-bottom: 0;
}
}
</style>
</head> </head>
<body> <body>
<header> <header>
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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> <header class="sticky" style="height:36px;">
<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;"> <a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="core.html" class="button">Core</a> <a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="grid.html" class="button">Grid</a> <a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="navigation.html" class="button">Navigation</a> <a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="input_control.html" class="button">Input Control</a> <a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
<a href="table.html" class="button">Table</a> </header>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<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;">

320
docs/index.html
View File

@@ -1,92 +1,48 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> #top-area { height: 320px; background: -webkit-linear-gradient(#455a64,#192024); background: linear-gradient(#455a64,#192024);}
<style> #top-logo {display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px; background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);}
/* Classes and ids used in multiple pages - page top and utilities */ #top-heading { color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;}
#header-logo { @media (min-width: 768px) { #top-area {height: 440px;} #top-logo {margin: 88px auto -24px;} #top-heading {margin-bottom: -6px;} }
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; #top-version-tag { padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
padding: 4px; .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
} .box-colored.red { background: #e53935; } .box-centered { text-align: center; }
#top-area { .box-centered > .card.fluid { -webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start;
height: 320px; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;}
background: -webkit-linear-gradient(#455a64,#192024); [class^='col-'] .card.fluid { margin: 2px 0 20px; } [class^='fore-'] { font-family: monospace, monospace;}
background: linear-gradient(#455a64,#192024); .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
} </style>
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
@media (min-width: 768px) {
#top-area {
height: 440px;
}
#top-logo {
margin: 88px auto -24px;
}
#top-heading {
margin-bottom: -6px;
}
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
</style>
</head> </head>
<body> <body>
<div class="container" id="top-area"> <div class="container" id="top-area"><div class="row">
<div class="row"> <div class="col-sm"><div class="box-centered"> <img src="mini-logo.svg" id="top-logo">
<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> <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.1</mark> <mark class="tertiary" id="top-version-tag">v2.1</mark>
</div> </div></div>
</div> </div></div>
</div> <header class="sticky">
</div> <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>
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); "> <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="modules.html" class="button">Modules</a>
<a href="index.html" class="button">Introduction</a> <a href="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
<a href="modules.html" class="button">Modules</a> <a href="quick_reference.html" class="button">Quick Reference</a>
<a href="flavors.html" class="button">Flavors</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>
<a href="customization.html" class="button">Customization</a> </div>
<a href="quick_reference.html" class="button">Quick Reference</a> </header>
<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>
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 60px; padding-bottom: 20px;"> <div class="row" style="padding-top: 60px; padding-bottom: 20px;">
@@ -94,9 +50,7 @@
<div class="col-sm-12 col-md box-centered row"> <div class="col-sm-12 col-md box-centered row">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Minimal<small>Size matters!</small></h2><br> <h2>Minimal<small>Size matters!</small></h2><br> <i class="fa fa-compress fa-4x" aria-hidden="true"></i><br><br>
<i class="fa fa-compress fa-4x" aria-hidden="true"></i>
<br><br>
<p><strong>mini.css</strong> aims to provide as much functionality as possible in less than 7KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p><br> <p><strong>mini.css</strong> aims to provide as much functionality as possible in less than 7KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!</p><br>
</div> </div>
</div> </div>
@@ -104,9 +58,7 @@
<div class="col-sm-12 col-md box-centered row"> <div class="col-sm-12 col-md box-centered row">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Responsive<small>Think mobile!</small></h2><br> <h2>Responsive<small>Think mobile!</small></h2><br> <i class="fa fa-mobile fa-4x" aria-hidden="true"></i><br><br>
<i class="fa fa-mobile fa-4x" aria-hidden="true"></i>
<br><br>
<p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br> <p><strong>mini.css</strong> is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!</p><br>
</div> </div>
</div> </div>
@@ -114,9 +66,7 @@
<div class="col-sm-12 col-md box-centered row"> <div class="col-sm-12 col-md box-centered row">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section">
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br> <h2>Style-agnostic<small>Infinitely customizable!</small></h2><br> <i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i><br><br>
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
<br><br>
<p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p><br> <p><strong>mini.css</strong> provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!</p><br>
</div> </div>
</div> </div>
@@ -130,72 +80,47 @@
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br> <pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p> <p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
<pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre> <div class="col-sm-12 col-md-6"><pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre></div>
</div>
<div class="col-sm-12 col-md-6">
<pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre>
</div>
</div><br> </div><br>
<p>If you are interested in tinkering with the flavor files and cooking your own flavor, check out the <a href="customization.html">Customization</a> page for information, tips on how to get started and general guidelines.</p> <p>If you are interested in tinkering with the flavor files and cooking your own flavor, check out the <a href="customization.html">Customization</a> page for information, tips on how to get started and general guidelines.</p><br><hr>
<br><hr>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Quick overview</h2> <h2>Quick overview</h2>
<p>Take a couple of minutes to learn how <strong>mini.css</strong> differs from all those other UI frameworks (Bootstrap, Semantic UI etc):</p> <p>Take a couple of minutes to learn how <strong>mini.css</strong> differs from all those other UI frameworks (Bootstrap, Semantic UI etc):</p>
<table> <table> <caption>Framework file size comparison</caption>
<caption>Framework file size comparison</caption> <thead> <tr> <th>Name</th><th>Version</th><th>Size (uncompressed)</th><th>Size (minified)</th><th>Size (gzipped)</th> </tr> </thead>
<thead> <tbody>
<tr> <tr>
<th>Name</th> <td data-label="Name">Bootstrap</td>
<th>Version</th> <td data-label="Version"><a href="https://github.com/twbs/bootstrap/blob/0b9c4a4007c44201dce9a6cc1a38407005c26c86/dist/css/bootstrap.css">v3.3.7</a></td>
<th>Size (uncompressed)</th> <td data-label="Size (uncompressed)">143 KB</td><td data-label="Size (minified)">117 KB</td><td data-label="Size (gzipped)">20 KB</td>
<th>Size (minified)</th> </tr>
<th>Size (gzipped)</th> <tr>
</tr> <td data-label="Name">Material Framework</td>
</thead> <td data-label="Version"><a href="https://github.com/nt1m/material-framework/blob/c5f7fed174686118dded31aecca311d4cc9d8b07/css/material.css">v3.0</a></td>
<tbody> <td data-label="Size (uncompressed)">114 KB</td><td data-label="Size (minified)">90 KB</td><td data-label="Size (gzipped)">18 KB</td>
<tr> </tr>
<td data-label="Name">Bootstrap</td> <tr>
<td data-label="Version"><a href="https://github.com/twbs/bootstrap/blob/0b9c4a4007c44201dce9a6cc1a38407005c26c86/dist/css/bootstrap.css">v3.3.7</a></td> <td data-label="Name">mini.css</td>
<td data-label="Size (uncompressed)">143 KB</td> <td data-label="Version"><a href="https://github.com/chalarangelo/mini.css/blob/v2.1.0/dist/css/mini-default.css">v2.1</a></td>
<td data-label="Size (minified)">117 KB</td> <td data-label="Size (uncompressed)">47 KB</td><td data-label="Size (minified)">36 KB</td><td data-label="Size (gzipped)">7 KB</td>
<td data-label="Size (gzipped)">20 KB</td> </tr>
</tr> <tr>
<tr> <td data-label="Name">Semantic UI</td>
<td data-label="Name">Material Framework</td> <td data-label="Version"><a href="https://github.com/Semantic-Org/Semantic-UI/blob/0b1b59b0e1c780e842820df5c1904a162034812c/dist/semantic.css">v2.2.6</a></td>
<td data-label="Version"><a href="https://github.com/nt1m/material-framework/blob/c5f7fed174686118dded31aecca311d4cc9d8b07/css/material.css">v3.0</a></td> <td data-label="Size (uncompressed)">730 KB</td><td data-label="Size (minified)">550 KB</td><td data-label="Size (gzipped)">95 KB</td>
<td data-label="Size (uncompressed)">114 KB</td> </tr>
<td data-label="Size (minified)">90 KB</td> <tr>
<td data-label="Size (gzipped)">18 KB</td> <td data-label="Name">Zurb Foundation</td>
</tr> <td data-label="Version"><a href="https://github.com/zurb/foundation-sites/blob/ab172838d6de406204956015c9fd393c5a526e0e/dist/foundation.css">v3.0</a></td>
<tr> <td data-label="Size (uncompressed)">90 KB</td><td data-label="Size (minified)">64 KB</td><td data-label="Size (gzipped)">12 KB</td>
<td data-label="Name">mini.css</td> </tr>
<td data-label="Version"><a href="https://github.com/chalarangelo/mini.css/blob/v2.1.0/dist/css/mini-default.css">v2.1</a></td> </tbody>
<td data-label="Size (uncompressed)">47 KB</td> </table><br>
<td data-label="Size (minified)">36 KB</td> <p><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;The above comparison takes into account only the CSS files of each framework. <strong>mini.css</strong>'s size is an approximation due to the nature of its flavor system. The calculated results were produced using <a href="http://refresh-sf.com/">Refresh-SF</a>.</p><br>
<td data-label="Size (gzipped)">7 KB</td>
</tr>
<tr>
<td data-label="Name">Semantic UI</td>
<td data-label="Version"><a href="https://github.com/Semantic-Org/Semantic-UI/blob/0b1b59b0e1c780e842820df5c1904a162034812c/dist/semantic.css">v2.2.6</a></td>
<td data-label="Size (uncompressed)">730 KB</td>
<td data-label="Size (minified)">550 KB</td>
<td data-label="Size (gzipped)">95 KB</td>
</tr>
<tr>
<td data-label="Name">Zurb Foundation</td>
<td data-label="Version"><a href="https://github.com/zurb/foundation-sites/blob/ab172838d6de406204956015c9fd393c5a526e0e/dist/foundation.css">v3.0</a></td>
<td data-label="Size (uncompressed)">90 KB</td>
<td data-label="Size (minified)">64 KB</td>
<td data-label="Size (gzipped)">12 KB</td>
</tr>
</tbody>
</table><br>
<p><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;The above comparison takes into account only the CSS files of each framework. <strong>mini.css</strong>'s size is an approximation due to the nature of its flavor system. The calculated results were produced using <a href="http://refresh-sf.com/">Refresh-SF</a>.</p>
<br>
</div> </div>
<div class="col-sm-12 col-md col-lg-5 col-lg-offset-1"> <div class="col-sm-12 col-md col-lg-5 col-lg-offset-1">
<h3>Module list</h3> <h3>Module list</h3>
@@ -219,63 +144,40 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<table> <table> <caption>Browser support</caption>
<caption>Browser support</caption> <thead> <tr> <th>Browser</th><th>Not supported</th><th>Partially supported</th><th>Fully supported</th> </tr> </thead>
<thead> <tbody>
<tr> <tr>
<th>Browser</th> <td data-label="Browser"><i class="fa fa-internet-explorer" aria-hidden="true" style="color: #1565c0;"></i>&nbsp;Internet Explorer</td>
<th>Not supported</th> <td data-label="Not supported">8-</td><td data-label="Partially supported">9-10</td><td data-label="Fully supported">11+</td>
<th>Partially supported</th> </tr>
<th>Fully supported</th> <tr>
</tr> <td data-label="Browser"><i class="fa fa-edge" aria-hidden="true" style="color: #0d47a1;"></i>&nbsp;Edge</td>
</thead> <td data-label="Not supported">n/a</td><td data-label="Partially supported">n/a</td><td data-label="Fully supported">12+</td>
<tbody> </tr>
<tr> <tr>
<td data-label="Browser"><i class="fa fa-internet-explorer" aria-hidden="true" style="color: #1565c0;"></i>&nbsp;Internet Explorer</td> <td data-label="Browser"><i class="fa fa-firefox" aria-hidden="true" style="color: #bf360c;"></i>&nbsp;Firefox</td>
<td data-label="Not supported">8-</td> <td data-label="Not supported">21-</td><td data-label="Partially supported">22-27</td><td data-label="Fully supported">28+</td>
<td data-label="Partially supported">9-10</td> </tr>
<td data-label="Fully supported">11+</td> <tr>
</tr> <td data-label="Browser"><i class="fa fa-chrome" aria-hidden="true" style="color: #ff8f00;"></i>&nbsp;Chrome</td>
<tr> <td data-label="Not supported">20-</td><td data-label="Partially supported">n/a</td><td data-label="Fully supported">21+</td>
<td data-label="Browser"><i class="fa fa-edge" aria-hidden="true" style="color: #0d47a1;"></i>&nbsp;Edge</td> </tr>
<td data-label="Not supported">n/a</td> <tr>
<td data-label="Partially supported">n/a</td> <td data-label="Browser"><i class="fa fa-safari" aria-hidden="true" style="color: #0277bd;"></i>&nbsp;Safari</td>
<td data-label="Fully supported">12+</td> <td data-label="Not supported">6-</td><td data-label="Partially supported">n/a</td><td data-label="Fully supported">6.1+</td>
</tr> </tr>
<tr> <tr>
<td data-label="Browser"><i class="fa fa-firefox" aria-hidden="true" style="color: #bf360c;"></i>&nbsp;Firefox</td> <td data-label="Browser"><i class="fa fa-opera" aria-hidden="true" style="color: #b71c1c;"></i>&nbsp;Opera</td>
<td data-label="Not supported">21-</td> <td data-label="Not supported">11.5-</td><td data-label="Partially supported">12.1-16</td><td data-label="Fully supported">17+</td>
<td data-label="Partially supported">22-27</td> </tr>
<td data-label="Fully supported">28+</td> <tr>
</tr> <td data-label="Browser"><i class="fa fa-android" aria-hidden="true" style="color: #827717;"></i>&nbsp;Android Browser</td>
<tr> <td data-label="Not supported">4.3-</td><td data-label="Partially supported">n/a</td><td data-label="Fully supported">4.4+</td>
<td data-label="Browser"><i class="fa fa-chrome" aria-hidden="true" style="color: #ff8f00;"></i>&nbsp;Chrome</td> </tr>
<td data-label="Not supported">20-</td> </tbody>
<td data-label="Partially supported">n/a</td> </table><br>
<td data-label="Fully supported">21+</td> <p><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;Due to the way <strong>mini.css</strong> is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the table above, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p><br><hr>
</tr>
<tr>
<td data-label="Browser"><i class="fa fa-safari" aria-hidden="true" style="color: #0277bd;"></i>&nbsp;Safari</td>
<td data-label="Not supported">6-</td>
<td data-label="Partially supported">n/a</td>
<td data-label="Fully supported">6.1+</td>
</tr>
<tr>
<td data-label="Browser"><i class="fa fa-opera" aria-hidden="true" style="color: #b71c1c;"></i>&nbsp;Opera</td>
<td data-label="Not supported">11.5-</td>
<td data-label="Partially supported">12.1-16</td>
<td data-label="Fully supported">17+</td>
</tr>
<tr>
<td data-label="Browser"><i class="fa fa-android" aria-hidden="true" style="color: #827717;"></i>&nbsp;Android Browser</td>
<td data-label="Not supported">4.3-</td>
<td data-label="Partially supported">n/a</td>
<td data-label="Fully supported">4.4+</td>
</tr>
</tbody>
</table><br>
<p><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark>&nbsp;Due to the way <strong>mini.css</strong> is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the table above, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p>
<br><hr>
</div> </div>
</div> </div>
<div class="row" style="padding-bottom: 60px;"> <div class="row" style="padding-bottom: 60px;">
@@ -289,7 +191,7 @@
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization.html">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li> <li>If you are more experienced or demanding, you can always take a look at the <a href="customization.html">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div></main> </div></main>
<!-- End of page content--> <!-- End of page content-->

182
docs/input_control.html
View File

@@ -1,103 +1,46 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
<style> .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Classes and ids used in multiple pages - page top and utilities */ [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
#header-logo { .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd;}
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; @media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}}
padding: 4px; .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
} .box-colored {color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
#top-logo { .responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px; </style>
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
</head> </head>
<body> <body>
<header> <header>
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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> <header class="sticky" style="height:36px;">
<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;"> <a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="core.html" class="button">Core</a> <a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="grid.html" class="button">Grid</a> <a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="navigation.html" class="button">Navigation</a> <a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="input_control.html" class="button">Input Control</a> <a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
<a href="table.html" class="button">Table</a> </header>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<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,9 +69,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Forms &amp; input</h2></div>
<h2>Forms &amp; input</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal"> <div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<form> <form>
@@ -138,16 +79,6 @@
<div class="input-group"><label for="pwd">password</label> <input type="password" value="" id="pwd" placeholder="password"></div> <div class="input-group"><label for="pwd">password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
</fieldset> </fieldset>
</form> </form>
<style>
.responsive-label {
align-items: center;
}
@media (min-width: 768px) {
.responsive-label .col-md-3 {
text-align: right;
}
}
</style>
<form> <form>
<fieldset> <fieldset>
<legend>Aligned form (using grid)</legend> <legend>Aligned form (using grid)</legend>
@@ -180,10 +111,7 @@
<label for="select">Select</label> <label for="select">Select</label>
</div> </div>
<div class="col-sm-12 col-md"> <div class="col-sm-12 col-md">
<select id="select"> <select id="select"> <option>Apples</option> <option>Oranges</option> </select>
<option>Apples</option>
<option>Oranges</option>
</select>
</div> </div>
</div> </div>
</fieldset> </fieldset>
@@ -214,8 +142,7 @@
<li>Using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements is highly recommended for a better presentational effect. Using these elements is a matter of personal preference, however try to keep your forms consistent (i.e. either use them in all forms or no forms as to not confuse users).</li> <li>Using the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements is highly recommended for a better presentational effect. Using these elements is a matter of personal preference, however try to keep your forms consistent (i.e. either use them in all forms or no forms as to not confuse users).</li>
<li>Some <code>&lt;input&gt;</code> elements, such as date &amp; time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your website or app.</li> <li>Some <code>&lt;input&gt;</code> elements, such as date &amp; time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your website or app.</li>
<li>Checkboxes and radio buttons are not stylized the same way as most of the other elements, nor do they follow the exact same stucture for layout. Please refer to the next section for information on how to use those.</li> <li>Checkboxes and radio buttons are not stylized the same way as most of the other elements, nor do they follow the exact same stucture for layout. Please refer to the next section for information on how to use those.</li>
</ul> </ul><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;form&gt; <pre>&lt;form&gt;
@@ -306,9 +233,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Checkboxes &amp; radio buttons</h2></div>
<h2>Checkboxes &amp; radio buttons</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal"> <div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<div class="box-centered"> <div class="box-centered">
@@ -343,8 +268,7 @@
<h3>Notes</h3> <h3>Notes</h3>
<ul> <ul>
<li>Checkboxes and radio buttons are fully accessible. However, if not provided with a label, they are not visible to users, but only to screen readers.</li> <li>Checkboxes and radio buttons are fully accessible. However, if not provided with a label, they are not visible to users, but only to screen readers.</li>
</ul> </ul><hr>
<hr>
<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;
@@ -397,9 +321,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Buttons &amp; button groups</h2></div>
<h2>Buttons &amp; button groups</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal"> <div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<button>Default button</button> <button>Default button</button>
@@ -411,11 +333,7 @@
<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"> <button>Button</button> <button>Button</button> <button>Button</button> </div>
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>
</div> </div>
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal"> <div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
<p>All button types have been stylized by default, while maintaining accessiblity. Simply add any <code>&lt;button&gt;</code> or an <code>&lt;input&gt;</code> with a button <code><span class="secondary">type</span></code> (i.e. <code><span class="fore-primary">&quot;button&quot;</span></code>, <code><span class="fore-primary">&quot;submit&quot;</span></code> or <code><span class="fore-primary">&quot;reset&quot;</span></code>) and they will be styled accordingly. You can also use the <code>.button</code> class for links, labels and other elements of your choice to make them look like buttons.</p> <p>All button types have been stylized by default, while maintaining accessiblity. Simply add any <code>&lt;button&gt;</code> or an <code>&lt;input&gt;</code> with a button <code><span class="secondary">type</span></code> (i.e. <code><span class="fore-primary">&quot;button&quot;</span></code>, <code><span class="fore-primary">&quot;submit&quot;</span></code> or <code><span class="fore-primary">&quot;reset&quot;</span></code>) and they will be styled accordingly. You can also use the <code>.button</code> class for links, labels and other elements of your choice to make them look like buttons.</p>
@@ -446,8 +364,7 @@
<li>If you want more color or size variants for your buttons, check out the <a href="customization.html">customization</a> page.</li> <li>If you want more color or size variants for your buttons, check out the <a href="customization.html">customization</a> page.</li>
<li>The <code>.button-group</code> component is compatible with modern browsers, but might not display properly in older browsers.</li> <li>The <code>.button-group</code> component is compatible with modern browsers, but might not display properly in older browsers.</li>
<li><code>.button-group</code>s will display as a horizontal container with all their buttons in one row on medium-sized and larger displays, however they will collapse into a column view for smaller displays.</li> <li><code>.button-group</code>s will display as a horizontal container with all their buttons in one row on medium-sized and larger displays, however they will collapse into a column view for smaller displays.</li>
</ul> </ul><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;button class=&quot;inverse small&quot;&gt;Small inverse button&lt;/button&gt;</pre> <pre>&lt;button class=&quot;inverse small&quot;&gt;Small inverse button&lt;/button&gt;</pre>
@@ -483,9 +400,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>File upload buttons</h2></div>
<h2>File upload buttons</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal"> <div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<div class="input-group"> <div class="input-group">
@@ -507,8 +422,7 @@
<ul> <ul>
<li>The icon displayed in the example above is not part of the button styling.</li> <li>The icon displayed in the example above is not part of the button styling.</li>
<li>File upload buttons do not change their text to the name of the file after the user has selected a file to upload. You can, however, add this functionality using a few lines of Javascript.</li> <li>File upload buttons do not change their text to the name of the file after the user has selected a file to upload. You can, however, add this functionality using a few lines of Javascript.</li>
</ul> </ul><hr>
<hr>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<pre>&lt;div class=&quot;input-group&quot;&gt; <pre>&lt;div class=&quot;input-group&quot;&gt;

80
docs/modules.html
View File

@@ -1,63 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
<style> .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; } .box-left { text-align: left; }
/* Classes and ids used in multiple pages - page top and utilities */ </style>
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.box-left { text-align: left; }
</style>
</head> </head>
<body> <body>
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); "> <header class="sticky">
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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>
<!-- 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;">

194
docs/navigation.html
View File

@@ -1,103 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
<style> .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Classes and ids used in multiple pages - page top and utilities */ [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
#header-logo { .col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #bdbdbd;}
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; @media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #bdbdbd;}}
padding: 4px; .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
} .box-colored { color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
#top-logo { </style>
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 1279px){
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
</head> </head>
<body> <body>
<header> <header>
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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> <header class="sticky" style="height:36px;">
<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;"> <a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="core.html" class="button">Core</a> <a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="grid.html" class="button">Grid</a> <a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="navigation.html" class="button">Navigation</a> <a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="input_control.html" class="button">Input Control</a> <a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
<a href="table.html" class="button">Table</a> </header>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<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,22 +68,15 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Header</h2></div>
<h2>Header</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal"> <div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<div> <div><br>
<br>
<header> <header>
<a href="#" class="logo">Logo</a> <a href="#" class="logo">Logo</a> <button>Home</button>
<button>Home</button> <a href="#" class="button">News</a> <span>|</span>
<a href="#" class="button">News</a> <button>About</button> <button>Contact</button>
<span>|</span> </header> <br>
<button>About</button>
<button>Contact</button>
</header>
<br>
</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">
@@ -162,8 +97,7 @@
<ul> <ul>
<li>The <code>&lt;header&gt;</code> element is partially responsive on smaller screen devices. More specifically, when the content inside it exceeds the width of the viewport (ie. overflows to the right), users will be able to scroll horizontally in order to see the rest of the menu.</li> <li>The <code>&lt;header&gt;</code> element is partially responsive on smaller screen devices. More specifically, when the content inside it exceeds the width of the viewport (ie. overflows to the right), users will be able to scroll horizontally in order to see the rest of the menu.</li>
<li>The <code>&lt;header&gt;</code> element does not display as <code class="fore-tertiary">fixed</code> by default. You can, however, alter this CSS property manually, if you so desire.</li> <li>The <code>&lt;header&gt;</code> element does not display as <code class="fore-tertiary">fixed</code> by default. You can, however, alter this CSS property manually, if you so desire.</li>
</ul> </ul><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;header&gt; <pre>&lt;header&gt;
@@ -193,26 +127,17 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Navigation bar</h2></div>
<h2>Navigation bar</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal"> <div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<div> <div><br>
<br>
<nav> <nav>
<a href="#">Home</a> <a href="#">Home</a> <span>News</span>
<span>News</span> <a href="#" class="sublink-1">New Courses</a> <a href="#" class="sublink-1">Certifications</a>
<a href="#" class="sublink-1">New Courses</a> <span class="sublink-1">Events</span> <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
<a href="#" class="sublink-1">Certifications</a> <a href="#" class="sublink-2">Staff AMA - 16th, Dec</a> <a href="#" class="sublink-1">Policy Update</a>
<span class="sublink-1">Events</span> <a href="#">About</a> <a href="#">Contact</a>
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a> </nav><br>
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
<a href="#" class="sublink-1">Policy Update</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<br>
</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">
@@ -237,8 +162,7 @@
<ul> <ul>
<li>Subcategories and their links support a depth of 2 by default. If, however, you need more than that, we recommend you check the <a href="customization.html">customization page</a> for instructions on how to add more depth to the vertical navigation.</li> <li>Subcategories and their links support a depth of 2 by default. If, however, you need more than that, we recommend you check the <a href="customization.html">customization page</a> for instructions on how to add more depth to the vertical navigation.</li>
<li>We strongly suggest you do not add irrelevant things inside your <code>&lt;nav&gt;</code> element, like images or text that are not part of the navigation menu.</li> <li>We strongly suggest you do not add irrelevant things inside your <code>&lt;nav&gt;</code> element, like images or text that are not part of the navigation menu.</li>
</ul> </ul><hr>
<hr>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<pre>&lt;div class=&quot;col-sm-12 col-sm-last col-md-3 col-md-first&quot;&gt; <pre>&lt;div class=&quot;col-sm-12 col-sm-last col-md-3 col-md-first&quot;&gt;
@@ -256,17 +180,11 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Footer</h2></div>
<h2>Footer</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal"> <div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
<div> <div><br>
<br> <footer> <p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p> </footer> <br>
<footer>
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
</footer>
<br>
</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">

192
docs/progress.html
View File

@@ -1,103 +1,48 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> /* Classes and ids used in multiple pages - page top and utilities */
<link rel="icon" type="image/png" href="favicon.png"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<style> .box-centered { text-align: center; }
/* Classes and ids used in multiple pages - page top and utilities */ .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
#header-logo { .box-colored.red { background: #e53935; }
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
padding: 4px; [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
} .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
#top-logo { @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #bdbdbd;}}
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px; .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35); .box-colored {color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
} </style>
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
</head> </head>
<body> <body>
<header> <header>
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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> <header class="sticky" style="height:36px;">
<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;"> <a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="core.html" class="button">Core</a> <a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="grid.html" class="button">Grid</a> <a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="navigation.html" class="button">Navigation</a> <a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="input_control.html" class="button">Input Control</a> <a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
<a href="table.html" class="button">Table</a> </header>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<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,17 +71,12 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Basic progress bar</h2></div>
<h2>Basic progress bar</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<p>Process is 0% complete!</p> <p>Process is 0% complete!</p> <progress value="0" max="1000"></progress>
<progress value="0" max="1000"></progress> <p>Process is 45% complete!</p> <progress value="450" max="1000"></progress>
<p>Process is 45% complete!</p> <p>Process is 100% complete!</p> <progress value="1000" max="1000"></progress>
<progress value="450" max="1000"></progress>
<p>Process is 100% complete!</p>
<progress value="1000" max="1000"></progress>
</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>To create a progress bar, use the <code>&lt;progress&gt;</code> HTML element, specify the preset maximum of <code><span class="fore-secondary">max</span>=<span class="fore-primary">&quot;1000&quot;</span></code> and set a <code>value</code> between <code>0</code> and <code>1000</code>. Update your <code>&lt;progress&gt;</code> element using some Javascript code, by changing its <code>value</code> to any integer in the same range.</p> <p>To create a progress bar, use the <code>&lt;progress&gt;</code> HTML element, specify the preset maximum of <code><span class="fore-secondary">max</span>=<span class="fore-primary">&quot;1000&quot;</span></code> and set a <code>value</code> between <code>0</code> and <code>1000</code>. Update your <code>&lt;progress&gt;</code> element using some Javascript code, by changing its <code>value</code> to any integer in the same range.</p>
@@ -151,8 +91,7 @@
<ul> <ul>
<li>We made sure that the <code>&lt;progress&gt;</code> element displays properly on all modern browsers, using browser-specific rules. However, there might be some irregularities with older browsers, especially legacy versions of Internet Explorer.</li> <li>We made sure that the <code>&lt;progress&gt;</code> element displays properly on all modern browsers, using browser-specific rules. However, there might be some irregularities with older browsers, especially legacy versions of Internet Explorer.</li>
<li>If the preset <code>max="1000"</code> does not suit your needs, you should check the <a href="customization.html">customization page</a> for instructions on how to set your own maximum value for the <code>&lt;progress&gt;</code> element.</li> <li>If the preset <code>max="1000"</code> does not suit your needs, you should check the <a href="customization.html">customization page</a> for instructions on how to set your own maximum value for the <code>&lt;progress&gt;</code> element.</li>
</ul> </ul><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;progress value=&quot;80&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</pre> <pre>&lt;progress value=&quot;80&quot; max=&quot;100&quot;&gt;&lt;/progress&gt;</pre>
@@ -170,17 +109,12 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Progress bar variants</h2></div>
<h2>Progress bar variants</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<p>Secondary process is 60% complete!</p> <p>Secondary process is 60% complete!</p> <progress class="secondary" value="600" max="1000"></progress>
<progress class="secondary" value="600" max="1000"></progress> <p>Tertiary process is 30% complete!</p> <progress class="tertiary" value="300" max="1000"></progress>
<p>Tertiary process is 30% complete!</p> <p>Nano progress bar is 75% filled!</p> <progress class="nano" value="750" max="1000"></progress>
<progress class="tertiary" value="300" max="1000"></progress>
<p>Nano progress bar is 75% filled!</p>
<progress class="nano" value="750" max="1000"></progress>
<p>Inline progress bar:<progress class="inline" value="150" max="1000"></progress></p> <p>Inline progress bar:<progress class="inline" value="150" max="1000"></progress></p>
</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">
@@ -196,8 +130,7 @@
<h3>Notes</h3> <h3>Notes</h3>
<ul> <ul>
<li>If you want to add your own custom size classes for <code>&lt;progress&gt;</code> elements, check the <a href="customization.html">customization page</a> for instructions.</li> <li>If you want to add your own custom size classes for <code>&lt;progress&gt;</code> elements, check the <a href="customization.html">customization page</a> for instructions.</li>
</ul> </ul><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;progress class=&quot;nano secondary&quot; value=&quot;800&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt; <pre>&lt;progress class=&quot;nano secondary&quot; value=&quot;800&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
@@ -219,15 +152,11 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Donut spinner</h2></div>
<h2>Donut spinner</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div class="box-centered"> <div class="box-centered"><br>
<br> <div class="spinner-donut"></div><br>
<div class="spinner-donut"></div>
<br>
</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">
@@ -240,8 +169,7 @@
<h3>Notes</h3> <h3>Notes</h3>
<ul> <ul>
<li>The <code>.spinner-donut</code> is an animated component, meaning that if a browsers does not support animation, this element might display incorrectly.</li> <li>The <code>.spinner-donut</code> is an animated component, meaning that if a browsers does not support animation, this element might display incorrectly.</li>
</ul> </ul><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;p&gt;Loading... &lt;span class=&quot;spinner-donut&quot;&gt;&lt;/span&gt;&lt;/p&gt;</pre> <pre>&lt;p&gt;Loading... &lt;span class=&quot;spinner-donut&quot;&gt;&lt;/span&gt;&lt;/p&gt;</pre>
@@ -259,17 +187,11 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Donut spinner variants</h2></div>
<h2>Donut spinner variants</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div class="box-centered"> <div class="box-centered"><br>
<br> <div class="spinner-donut secondary"></div><br> <div class="spinner-donut tertiary"></div><br> <div class="spinner-donut large"></div><br>
<div class="spinner-donut secondary"></div><br>
<div class="spinner-donut tertiary"></div><br>
<div class="spinner-donut large"></div>
<br>
</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">

108
docs/quick_reference.html
View File

@@ -1,85 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
<style> .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; } .box-left { text-align: left; }
/* Classes and ids used in multiple pages - page top and utilities */ [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
#header-logo { .col-sm-12.col-md-6.col-sm-first.col-md-first {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; @media (max-width: 767px){.col-sm-12.col-md-6.col-sm-first.col-md-first {border: 0;border-bottom: 1px solid #bdbdbd;}}
padding: 4px; h3 > a{font-size: 1rem;} h2 > a {font-size: 0.85em;} pre {max-height: 400px;}
} </style>
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.box-left { text-align: left; }
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-md-6.col-sm-first.col-md-first {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-md-6.col-sm-first.col-md-first {
border: 0;
border-bottom: 1px solid #bdbdbd;
}
}
h3 > a{
font-size: 1rem;
}
h2 > a {
font-size: 0.85em;
}
pre {
max-height: 400px;
}
</style>
</head> </head>
<body> <body>
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); "> <header class="sticky">
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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>
<!-- 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;">

184
docs/tab.html
View File

@@ -1,103 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
<style> .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Classes and ids used in multiple pages - page top and utilities */ [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
#header-logo { .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
padding: 4px; .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
} .box-colored {color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
#top-logo { </style>
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
</head> </head>
<body> <body>
<header> <header>
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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> <header class="sticky" style="height:36px;">
<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;"> <a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="core.html" class="button">Core</a> <a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="grid.html" class="button">Grid</a> <a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="navigation.html" class="button">Navigation</a> <a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="input_control.html" class="button">Input Control</a> <a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
<a href="table.html" class="button">Table</a> </header>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<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,36 +68,22 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Basic syntax</h2></div>
<h2>Basic syntax</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div class="tabs" style="margin-top: 5px; margin-bottom: 5px;"> <div class="tabs" style="margin-top: 5px; margin-bottom: 5px;">
<input type="radio" name="tabdemo" id="tab1" checked aria-hidden="true"> <input type="radio" name="tabdemo" id="tab1" checked aria-hidden="true">
<label for="tab1" aria-hidden="true">Tab 1</label> <label for="tab1" aria-hidden="true">Tab 1</label>
<div> <div> <h3>Tab 1</h3> <p>This is the first tab's content.</p> </div>
<h3>Tab 1</h3>
<p>This is the first tab's content.</p>
</div>
<input type="radio" name="tabdemo" id="tab2" aria-hidden="true"> <input type="radio" name="tabdemo" id="tab2" aria-hidden="true">
<label for="tab2" aria-hidden="true">Tab 2</label> <label for="tab2" aria-hidden="true">Tab 2</label>
<div> <div> <h3>Tab 2</h3> <p>This is the second tab's content.</p> </div>
<h3>Tab 2</h3>
<p>This is the second tab's content.</p>
</div>
<input type="radio" name="tabdemo" id="tab3" aria-hidden="true"> <input type="radio" name="tabdemo" id="tab3" aria-hidden="true">
<label for="tab3" aria-hidden="true">Tab 3</label> <label for="tab3" aria-hidden="true">Tab 3</label>
<div> <div> <h3>Tab 3</h3> <p>This is the third tab's content.</p> </div>
<h3>Tab 3</h3>
<p>This is the third tab's content.</p>
</div>
<input type="radio" name="tabdemo" id="tab4" aria-hidden="true"> <input type="radio" name="tabdemo" id="tab4" aria-hidden="true">
<label for="tab4" aria-hidden="true">Tab 4</label> <label for="tab4" aria-hidden="true">Tab 4</label>
<div> <div> <h3>Tab 4</h3> <p>This is the fourth tab's content.</p> </div>
<h3>Tab 4</h3>
<p>This is the fourth tab's content.</p>
</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">
@@ -200,8 +128,7 @@
<li>Tabs are compatible with modern browsers, but might not display properly in older browsers.</li> <li>Tabs are compatible with modern browsers, but might not display properly in older browsers.</li>
<li>Remember to add the <code><span class="fore-secondary">checked</span></code> attribute to one of your <code>&lt;input&gt;</code>s if you want that tab to be the one displayed by default. If none is specified, the first one will be displayed.</li> <li>Remember to add the <code><span class="fore-secondary">checked</span></code> attribute to one of your <code>&lt;input&gt;</code>s if you want that tab to be the one displayed by default. If none is specified, the first one will be displayed.</li>
<li>The <code>height</code> of the tab container's panel area is <code>400px</code>. If you want to change this default size, please check out the <a href="customization.html">customization</a> page.</li> <li>The <code>height</code> of the tab container's panel area is <code>400px</code>. If you want to change this default size, please check out the <a href="customization.html">customization</a> page.</li>
</ul> </ul><hr>
<hr>
<div class="row"> <div class="row">
<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;div class=&quot;tabs&quot;&gt; <pre>&lt;div class=&quot;tabs&quot;&gt;
@@ -256,36 +183,24 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Stacked tabs</h2></div>
<h2>Stacked tabs</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div class="tabs stacked" style="margin-top: 5px; margin-bottom: 5px;"> <div class="tabs stacked" style="margin-top: 5px; margin-bottom: 5px;">
<input type="radio" name="accordion" id="a1" autocomplete="off" checked aria-hidden="true"> <input type="radio" name="accordion" id="a1" autocomplete="off" checked aria-hidden="true">
<label for="a1" aria-hidden="true">Accordion section 1</label> <label for="a1" aria-hidden="true">Accordion section 1</label>
<div> <div> <h3>Section 1</h3> <p>This is the first accordion section's content.</p> </div>
<h3>Section 1</h3>
<p>This is the first accordion section's content.</p>
</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> <h3>Section 2</h3> <p>This is the second accordion section's content.</p> </div>
<h3>Section 2</h3>
<p>This is the second accordion section's content.</p>
</div>
</div> </div>
<div class="tabs stacked" style="margin-top: 5px; margin-bottom: 5px;"> <div class="tabs stacked" style="margin-top: 5px; margin-bottom: 5px;">
<input type="checkbox" id="c1" autocomplete="off" aria-hidden="true"> <input type="checkbox" id="c1" autocomplete="off" aria-hidden="true">
<label for="c1" aria-hidden="true">Collapse section 1</label> <label for="c1" aria-hidden="true">Collapse section 1</label>
<div> <div> <p>This is the first collapse section's content.</p> </div>
<p>This is the first collapse section's content.</p>
</div>
<input type="checkbox" id="c2" autocomplete="off" aria-hidden="true"> <input type="checkbox" id="c2" autocomplete="off" aria-hidden="true">
<label for="c2" aria-hidden="true">Collapse section 2</label> <label for="c2" aria-hidden="true">Collapse section 2</label>
<div> <div> <p>This is the second collapse section's content.</p> </div>
<p>This is the second collapse section's content.</p>
</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">
@@ -325,8 +240,7 @@
<ul> <ul>
<li><code>.stacked</code> tabs can be used with either checkboxes or radio buttons.</li> <li><code>.stacked</code> tabs can be used with either checkboxes or radio buttons.</li>
<li>You can mix and match checkboxes and radio buttons, but we suggest you do not do so, unless you think it is necessary for your design.</li> <li>You can mix and match checkboxes and radio buttons, but we suggest you do not do so, unless you think it is necessary for your design.</li>
</ul> </ul><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;div class=&quot;tabs stacked&quot;&gt; <pre>&lt;div class=&quot;tabs stacked&quot;&gt;

297
docs/table.html
View File

@@ -1,136 +1,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
<style> .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Classes and ids used in multiple pages - page top and utilities */ [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
#header-logo { .col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #bdbdbd;}
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
padding: 4px; .box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
} .box-colored {color: #f5f5f5; } header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
#top-logo { table#carded { border-collapse: collapse;border: 0;width: 100%; box-shadow: none; }
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px; table#carded thead, table#carded th { border: 0;height: 1px;width: 1px; margin: -1px; overflow: hidden; padding: 0;position: absolute;clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); clip-path: inset(100%); }
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35); table#carded tr {display: block;border: 1px solid #bdbdbd;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);background: #fafafa;margin-bottom: 10px; }
} table#carded td {display: block;border: 0; border-bottom: 1px solid #bdbdbd; text-align: right; }
#top-heading { table#carded td:before { content: attr(data-label); float: left; font-weight: 700; }
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px; table#carded td:last-child { border-bottom: 0; } .border-fix > td, .border-fix > th { border-top: 0; }
} </style>
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
table#carded {
border-collapse: collapse;
border: 0;
width: 100%;
box-shadow: none; }
table#carded thead, table#carded th {
border: 0;
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%); }
table#carded tr {
display: block;
border: 1px solid #bdbdbd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
background: #fafafa;
margin-bottom: 10px; }
table#carded td {
display: block;
border: 0;
border-bottom: 1px solid #bdbdbd;
text-align: right; }
table#carded td:before {
content: attr(data-label);
float: left;
font-weight: 700; }
table#carded td:last-child {
border-bottom: 0; }
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
</head> </head>
<body> <body>
<header> <header>
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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> <header class="sticky" style="height:36px;">
<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;"> <a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="core.html" class="button">Core</a> <a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="grid.html" class="button">Grid</a> <a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="navigation.html" class="button">Navigation</a> <a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="input_control.html" class="button">Input Control</a> <a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
<a href="table.html" class="button">Table</a> </header>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<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;">
@@ -159,9 +74,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Basic syntax &amp; responsiveness</h2></div>
<h2>Basic syntax &amp; responsiveness</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div> <div>
@@ -169,28 +82,12 @@
<table class="preset"> <table class="preset">
<caption>People</caption> <caption>People</caption>
<thead> <thead>
<tr> <tr><th>Name</th><th>Surname</th><th>Alias</th></tr>
<th>Name</th>
<th>Surname</th>
<th>Alias</th>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr><td data-label="Name">Chad</td><td data-label="Surname">Wilberts</td><td data-label="Alias">MrOne</td></tr>
<td data-label="Name">Chad</td> <tr><td data-label="Name">Adam</td><td data-label="Surname">Smith</td><td data-label="Alias">TheSmith</td></tr>
<td data-label="Surname">Wilberts</td> <tr><td data-label="Name">Sophia</td><td data-label="Surname">Canderson</td><td data-label="Alias">Candee</td></tr>
<td data-label="Alias">MrOne</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Smith</td>
<td data-label="Alias">TheSmith</td>
</tr>
<tr>
<td data-label="Name">Sophia</td>
<td data-label="Surname">Canderson</td>
<td data-label="Alias">Candee</td>
</tr>
</tbody> </tbody>
</table> </table>
<br> <br>
@@ -198,28 +95,12 @@
<table id="carded"> <table id="carded">
<caption>People</caption> <caption>People</caption>
<thead> <thead>
<tr> <tr><th>Name</th><th>Surname</th><th>Alias</th></tr>
<th>Name</th>
<th>Surname</th>
<th>Alias</th>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr><td data-label="Name">Chad</td><td data-label="Surname">Wilberts</td><td data-label="Alias">MrOne</td></tr>
<td data-label="Name">Chad</td> <tr><td data-label="Name">Adam</td><td data-label="Surname">Smith</td><td data-label="Alias">TheSmith</td></tr>
<td data-label="Surname">Wilberts</td> <tr><td data-label="Name">Sophia</td><td data-label="Surname">Canderson</td><td data-label="Alias">Candee</td></tr>
<td data-label="Alias">MrOne</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Smith</td>
<td data-label="Alias">TheSmith</td>
</tr>
<tr>
<td data-label="Name">Sophia</td>
<td data-label="Surname">Canderson</td>
<td data-label="Alias">Candee</td>
</tr>
</tbody> </tbody>
</table> </table>
<br> <br>
@@ -269,8 +150,7 @@
<ul> <ul>
<li>Tables are responsive by default and will change to a card-like view below a certain screen width. If you'd rather not make them responsive, check the last section on this page.</li> <li>Tables are responsive by default and will change to a card-like view below a certain screen width. If you'd rather not make them responsive, check the last section on this page.</li>
<li>Specifying the <code>data-label</code> attribute is essential for the responsive version of a table to display properly. You can, however, use a value different from the column's name. Make sure it does not confuse your users, though.</li> <li>Specifying the <code>data-label</code> attribute is essential for the responsive version of a table to display properly. You can, however, use a value different from the column's name. Make sure it does not confuse your users, though.</li>
</ul> </ul><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;tr&gt; <pre>&lt;tr&gt;
@@ -329,33 +209,13 @@
<br><table class="horizontal preset"> <br><table class="horizontal preset">
<caption>People</caption> <caption>People</caption>
<thead> <thead>
<tr> <tr><th>Name</th><th>Surname</th><th>Alias</th></tr>
<th>Name</th>
<th>Surname</th>
<th>Alias</th>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr><td data-label="Name">Chad</td><td data-label="Surname">Wilberts</td><td data-label="Alias">MrOne</td></tr>
<td data-label="Name">Chad</td> <tr><td data-label="Name">Adam</td><td data-label="Surname">Smith</td><td data-label="Alias">TheSmith</td></tr>
<td data-label="Surname">Wilberts</td> <tr><td data-label="Name">Sophia</td><td data-label="Surname">Canderson</td><td data-label="Alias">Candee</td></tr>
<td data-label="Alias">MrOne</td> <tr><td data-label="Name">Nick</td><td data-label="Surname">Thomson</td><td data-label="Alias">NickThom</td></tr>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Smith</td>
<td data-label="Alias">TheSmith</td>
</tr>
<tr>
<td data-label="Name">Sophia</td>
<td data-label="Surname">Canderson</td>
<td data-label="Alias">Candee</td>
</tr>
<tr>
<td data-label="Name">Nick</td>
<td data-label="Surname">Thomson</td>
<td data-label="Alias">NickThom</td>
</tr>
</tbody> </tbody>
</table><br> </table><br>
</div> </div>
@@ -417,41 +277,17 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Table variants &amp; matrices</h2></div>
<h2>Table variants &amp; matrices</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div> <div><br>
<br>
<style> .border-fix > td, .border-fix > th { border-top: 0; } </style>
<table class="preset"> <table class="preset">
<caption>Star Wars Character Alignment Table</caption> <caption>Star Wars Character Alignment Table</caption>
<tbody> <tbody>
<tr class="border-fix"> <tr class="border-fix"><th></th><th>Lawful</td><th>Neutral</td><th>Chaotic</td></tr>
<th></th> <tr><th>Good</th><td>Yoda</td><td>Luke Skywalker</td><td>Chewbacca</td></tr>
<th>Lawful</td> <tr><th>Neutral</th><td>C-3PO</td><td>Boba Fett</td><td>Han Solo</td></tr>
<th>Neutral</td> <tr><th>Bad</th><td>Darth Vader</td><td>Emperor Palpatine</td><td>Jabba the Hutt</td></tr>
<th>Chaotic</td>
</tr>
<tr>
<th>Good</th>
<td>Yoda</td>
<td>Luke Skywalker</td>
<td>Chewbacca</td>
</tr>
<tr>
<th>Neutral</th>
<td>C-3PO</td>
<td>Boba Fett</td>
<td>Han Solo</td>
</tr>
<tr>
<th>Bad</th>
<td>Darth Vader</td>
<td>Emperor Palpatine</td>
<td>Jabba the Hutt</td>
</tr>
</tbody> </tbody>
</table><br> </table><br>
</div> </div>
@@ -460,7 +296,7 @@
<p>Tables are responsive by default, however you can disable this functionality for one or more tables (normal or <code>.horizontal</code>), using the <code>.preset</code> class. This class can also be used for a multitude of things, like dealing with tables not allowing you to have <code>&lt;th&gt;</code> elements inside the <code>&lt;tbody&gt;</code> element, building matrices (i.e. tables with a header column and a header row) etc. Finally, you can make your tables use a different color for every other row, using the <code>.striped</code> class.</p> <p>Tables are responsive by default, however you can disable this functionality for one or more tables (normal or <code>.horizontal</code>), using the <code>.preset</code> class. This class can also be used for a multitude of things, like dealing with tables not allowing you to have <code>&lt;th&gt;</code> elements inside the <code>&lt;tbody&gt;</code> element, building matrices (i.e. tables with a header column and a header row) etc. Finally, you can make your tables use a different color for every other row, using the <code>.striped</code> class.</p>
<h3>Sample code</h3> <h3>Sample code</h3>
<p>The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on <strong>Show sample code</strong> below to see the code sample for this example. By the way, we present a sample for a matrix table in he first example, but you can use the same principles and classes to create any table layout you wish.</p><br> <p>The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on <strong>Show sample code</strong> below to see the code sample for this example. By the way, we present a sample for a matrix table in he first example, but you can use the same principles and classes to create any table layout you wish.</p><br>
<div class="container"><div class="row"><div class="tabs stacked""> <div class="container"><div class="row"><div class="tabs stacked">
<input type="checkbox" id="grid-base-sample" autocomplete="off"> <input type="checkbox" id="grid-base-sample" autocomplete="off">
<label for="grid-base-sample">Show sample code</label> <label for="grid-base-sample">Show sample code</label>
<div> <div>
@@ -510,8 +346,7 @@
<ul> <ul>
<li>Making a table <code>.striped</code> also affects the color of the cards in their responsive view on mobile devices.</li> <li>Making a table <code>.striped</code> also affects the color of the cards in their responsive view on mobile devices.</li>
<li>If you create a <code>.preset</code> table, which you do not want to alter via Javascript to be responsive at any time in the future, you can omit the <code>data-label</code> attributes.</li> <li>If you create a <code>.preset</code> table, which you do not want to alter via Javascript to be responsive at any time in the future, you can omit the <code>data-label</code> attributes.</li>
</ul> </ul><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;

177
docs/utility.html
View File

@@ -1,103 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<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">
<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 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, 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 framework">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta property="og:type" content="website"/> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:image" content="page_thumb.PNG"> <style>
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"> #header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
<link rel="icon" type="image/png" href="favicon.png"> .box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #b71c1c; }
<style> .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Classes and ids used in multiple pages - page top and utilities */ [class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
#header-logo { .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd;}}
padding: 4px; .box-colored.green { background: #1b5e20; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
} .box-colored { color: #f5f5f5;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
#top-logo { </style>
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #b71c1c; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #1b5e20; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
</head> </head>
<body> <body>
<header> <header>
<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="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>
<a href="index.html" class="button">Introduction</a> <div style="display: inline; overflow: auto;">
<a href="modules.html" class="button">Modules</a> <a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;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> <header class="sticky" style="height:36px;">
<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;"> <a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
<a href="core.html" class="button">Core</a> <a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
<a href="grid.html" class="button">Grid</a> <a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
<a href="navigation.html" class="button">Navigation</a> <a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
<a href="input_control.html" class="button">Input Control</a> <a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
<a href="table.html" class="button">Table</a> </header>
<a href="card.html" class="button">Card</a>
<a href="tab.html" class="button">Tab</a>
<a href="contextual.html" class="button">Contextual</a>
<a href="progress.html" class="button">Progress</a>
<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,9 +68,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Visibility helpers</h2></div>
<h2>Visibility helpers</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-first"> <div class="col-sm-12 col-sm-first">
<p>You can hide content for all your users, using the default <code><span class="fore-secondary">hidden</span></code> attribute. However, we provide you with the <code>.hidden</code> class for the same purpose, as well as the <code>.visually-hidden</code> class which will make your content hidden, except for screen readers.</p> <p>You can hide content for all your users, using the default <code><span class="fore-secondary">hidden</span></code> attribute. However, we provide you with the <code>.hidden</code> class for the same purpose, as well as the <code>.visually-hidden</code> class which will make your content hidden, except for screen readers.</p>
@@ -141,8 +81,7 @@
<h3>Notes</h3> <h3>Notes</h3>
<ul> <ul>
<li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li> <li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
</ul> </ul><hr>
<hr>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<pre>&lt;span class=&quot;hidden visually-hidden&quot;&gt;Not a good idea&lt;/span&gt;</pre> <pre>&lt;span class=&quot;hidden visually-hidden&quot;&gt;Not a good idea&lt;/span&gt;</pre>
@@ -156,9 +95,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Generic borders &amp; shadows</h2></div>
<h2>Generic borders &amp; shadows</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div> <div>
@@ -187,8 +124,7 @@
<li>All of these classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li> <li>All of these classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
<li>The <code>.bordered</code> class was originally created with elements such as buttons in mind, to allow users highlighting certain elements in their designs, without having to change any default styles.</li> <li>The <code>.bordered</code> class was originally created with elements such as buttons in mind, to allow users highlighting certain elements in their designs, without having to change any default styles.</li>
<li>All of the above classes can be used with most modern HTML elements.</li> <li>All of the above classes can be used with most modern HTML elements.</li>
</ul> </ul><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;span class=&quot;bordered rounded shadow-small&quot;&gt;Stylized element&lt;/span&gt;</pre> <pre>&lt;span class=&quot;bordered rounded shadow-small&quot;&gt;Stylized element&lt;/span&gt;</pre>
@@ -208,9 +144,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Responsive sizing &amp; spacing classes</h2></div>
<h2>Responsive sizing &amp; spacing classes</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-first"> <div class="col-sm-12 col-sm-first">
<p>Helper classes for the <code>padding</code> and <code>margin</code> attributes are provided in the form of <code>.responsive-margin</code> and <code>.responsive-padding</code> classes. Both of these classes are responsive, allowing you to collapse the spacing and size of elements on different displays to make better use of the device's viewport.</p> <p>Helper classes for the <code>padding</code> and <code>margin</code> attributes are provided in the form of <code>.responsive-margin</code> and <code>.responsive-padding</code> classes. Both of these classes are responsive, allowing you to collapse the spacing and size of elements on different displays to make better use of the device's viewport.</p>
@@ -224,8 +158,7 @@
<ul> <ul>
<li>If the default values of these classes are not suited to your needs, check out the <a href="customization.html">customization</a> page.</li> <li>If the default values of these classes are not suited to your needs, check out the <a href="customization.html">customization</a> page.</li>
<li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li> <li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
</ul> </ul><hr>
<hr>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<pre>&lt;div class=&quot;responsive-padding responsive-margin&quot;&gt;Responsive padding and margin&lt;/div&gt;</pre> <pre>&lt;div class=&quot;responsive-padding responsive-margin&quot;&gt;Responsive padding and margin&lt;/div&gt;</pre>
@@ -239,19 +172,11 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Breadcrumbs</h2></div>
<h2>Breadcrumbs</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div> <div><br>
<br> <ul class="breadcrumbs"> <li><a href="#">Root</a></li> <li><a href="#">Folder</a></li> <li>File</li> </ul><br>
<ul class="breadcrumbs">
<li><a href="#">Root</a></li>
<li><a href="#">Folder</a></li>
<li>File</li>
</ul>
<br>
</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">
@@ -269,8 +194,7 @@
<ul> <ul>
<li>The separators between breadcrumbs are added using some tricky CSS rules. Due to that, there might be a few browser versions or devices where you can see part of the seams between the element separators.</li> <li>The separators between breadcrumbs are added using some tricky CSS rules. Due to that, there might be a few browser versions or devices where you can see part of the seams between the element separators.</li>
<li>Breadcrumbs show a hierarchy, an ordered list. However, we do not use the <code>&lt;ol&gt;</code> element, as it might conflict with some custom styles we've seen people use.</li> <li>Breadcrumbs show a hierarchy, an ordered list. However, we do not use the <code>&lt;ol&gt;</code> element, as it might conflict with some custom styles we've seen people use.</li>
</ul> </ul><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;ol class=&quot;breadcrumbs&quot;&gt; <pre>&lt;ol class=&quot;breadcrumbs&quot;&gt;
@@ -299,9 +223,7 @@
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<div class="card fluid"> <div class="card fluid">
<div class="section"> <div class="section"><h2>Close icon</h2></div>
<h2>Close icon</h2>
</div>
<div class="section row"> <div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal"> <div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div> <div>
@@ -320,8 +242,7 @@
<h3>Notes</h3> <h3>Notes</h3>
<ul> <ul>
<li>The close icon behaves similar to a button when hovering over it or otherwise focusing or selecting it.</li> <li>The close icon behaves similar to a button when hovering over it or otherwise focusing or selecting it.</li>
</ul> </ul><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;div class=&quot;close&quot;&gt;&lt;/div&gt;</pre> <pre>&lt;div class=&quot;close&quot;&gt;&lt;/div&gt;</pre>

6
docs/v2/DEVLOG.md
View File

@@ -825,3 +825,9 @@
- `index.html` and `core.html` are complete. Moving on to `grid.html`. - `index.html` and `core.html` are complete. Moving on to `grid.html`.
- Altered `grid.html` to better present the `basic layout` and `screen-specific layouts` cards. - Altered `grid.html` to better present the `basic layout` and `screen-specific layouts` cards.
- Spent a few minutes dealing with tabs and spaces and html page optimizations etc.
- Shrinked the size of `index.html`, minimized the internal CSS of the page.
- Dealt a little bit with other pages' `header` elements and some styling.
- Shrinked the size of `core.html`, minimized the internal CSS of the page.
- Minimized the internal CSS of all the pages.
- Shrinked page sizes a little bit across all pages, except `quick_reference.html`.