Housekeeping
This commit is contained in:
Angelos Chalaris
parent
74a815642f
commit
9d002418c2
16 changed files with 730 additions and 1832 deletions
129
docs/card.html
129
docs/card.html
|
|
@ -1,102 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Card</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, card ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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;
|
||||
}
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; }
|
||||
[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-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>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<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="navigation.html" class="button">Navigation</a>
|
||||
<a href="input_control.html" class="button">Input Control</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 class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</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>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
|
|
@ -126,9 +68,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Basic syntax</h2>
|
||||
</div>
|
||||
<div class="section"> <h2>Basic syntax</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<div class="container">
|
||||
|
|
@ -171,8 +111,7 @@
|
|||
<ul>
|
||||
<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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><div class="card">
|
||||
|
|
@ -245,21 +184,17 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Sections & media</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Sections & media</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<div class="container">
|
||||
<br>
|
||||
<div class="container"><br>
|
||||
<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"><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 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>
|
||||
<br>
|
||||
</div><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
||||
|
|
@ -292,13 +227,10 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Card sizing & fluidity</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Card sizing & fluidity</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<div class="container">
|
||||
<br>
|
||||
<div class="container"><br>
|
||||
<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 large"><div class="section"><h3>Large Card</h3><p>Large cards are <code>480px</code> wide.</p></div></div>
|
||||
|
|
@ -338,8 +270,7 @@
|
|||
<ul>
|
||||
<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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="card">
|
||||
|
|
|
|||
|
|
@ -1,102 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Contextual</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, contextual ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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;
|
||||
}
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; }
|
||||
[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; }
|
||||
@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>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<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="navigation.html" class="button">Navigation</a>
|
||||
<a href="input_control.html" class="button">Input Control</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 class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</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>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
|
|
@ -126,9 +68,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Text highlighting</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Text highlighting</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div>
|
||||
|
|
@ -153,8 +93,7 @@
|
|||
<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><code><mark></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>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><mark class="tag tertiary">green tag</mark>
|
||||
|
|
@ -188,9 +127,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Alerts</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Alerts</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div>
|
||||
|
|
@ -220,8 +157,7 @@
|
|||
<h3>Notes</h3>
|
||||
<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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><p class="alert">Short and to the point</p>
|
||||
|
|
@ -241,9 +177,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Animated alerts</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Animated alerts</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div>
|
||||
|
|
|
|||
124
docs/core.html
124
docs/core.html
|
|
@ -1,90 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Core</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, core ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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;
|
||||
}
|
||||
.box-centered { text-align: center; } .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; }
|
||||
[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; }
|
||||
@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>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<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="navigation.html" class="button">Navigation</a>
|
||||
<a href="input_control.html" class="button">Input Control</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 class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</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>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
|
|
@ -114,9 +68,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Typography</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Typography</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12">
|
||||
<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="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Headings</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Headings</h2></div>
|
||||
<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-lg-6 col-lg-first"><h1>Heading 1<small>Subheading</small></h1></div>
|
||||
|
|
@ -163,13 +113,10 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Common textual elements</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Common textual elements</h2></div>
|
||||
<div class="section row">
|
||||
<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>
|
||||
<hr>
|
||||
<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>
|
||||
<pre>function sum(num1, num2) {
|
||||
var num3 = num1 + num2;
|
||||
console.log('Result: ' + num3);
|
||||
|
|
@ -200,25 +147,20 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Lists</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Lists</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div>
|
||||
<br>
|
||||
<div><br>
|
||||
<ul>
|
||||
<li>Apple</li>
|
||||
<li>Orange</li>
|
||||
<li>Strawberry</li>
|
||||
</ul>
|
||||
<br>
|
||||
</ul><br>
|
||||
<ol>
|
||||
<li>Wake up</li>
|
||||
<li>Eat breakfast</li>
|
||||
<li>Go to work</li>
|
||||
</ol>
|
||||
<br>
|
||||
</ol><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
|
|
@ -243,14 +185,10 @@
|
|||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Image responsiveness</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Image responsiveness</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div>
|
||||
<img src="http://placehold.it/800x600">
|
||||
</div>
|
||||
<div><img src="https://placehold.it/800x600"></div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>Image elements (<code><img></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>
|
||||
|
|
|
|||
|
|
@ -1,62 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Customization</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, customization, flavor ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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; }
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; } .box-left { text-align: left; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
</style>
|
||||
</head>
|
||||
<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); ">
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<header class="sticky">
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
|
|
@ -103,9 +71,7 @@
|
|||
<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>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Core</h3>
|
||||
</div>
|
||||
<div class="section"><h3>Core</h3></div>
|
||||
<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>
|
||||
<ul>
|
||||
|
|
@ -120,25 +86,19 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Grid</h3>
|
||||
</div>
|
||||
<div class="section"><h3>Grid</h3></div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Navigation</h3>
|
||||
</div>
|
||||
<div class="section"><h3>Navigation</h3></div>
|
||||
<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><header></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 class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Input Control</h3>
|
||||
</div>
|
||||
<div class="section"><h3>Input Control</h3></div>
|
||||
<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><input></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><input <span class="fore-secondary">type</span>=<span class="fore-primary">"file"</span>></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>
|
||||
|
|
@ -149,17 +109,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Table</h3>
|
||||
</div>
|
||||
<div class="section"><h3>Table</h3></div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Card</h3>
|
||||
</div>
|
||||
<div class="section"><h3>Card</h3></div>
|
||||
<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>
|
||||
<ul>
|
||||
|
|
@ -171,17 +127,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Tab</h3>
|
||||
</div>
|
||||
<div class="section"><h3>Tab</h3></div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Contextual</h3>
|
||||
</div>
|
||||
<div class="section"><h3>Contextual</h3></div>
|
||||
<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>
|
||||
<ul>
|
||||
|
|
@ -193,9 +145,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Progress</h3>
|
||||
</div>
|
||||
<div class="section"><h3>Progress</h3></div>
|
||||
<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>
|
||||
<ul>
|
||||
|
|
@ -208,9 +158,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h3>Utility</h3>
|
||||
</div>
|
||||
<div class="section"><h3>Utility</h3></div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered">
|
||||
<div class="col-sm-12">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered"><div class="col-sm-12"></div></div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer><strong>mini.css</strong> was designed and built 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>
|
||||
|
|
|
|||
|
|
@ -1,66 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Flavors</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, flavor, flavors ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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; }
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #e53935; } .box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||||
h2 > a{ font-size: 1rem; float: right;} .box-left { text-align: left; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
</style>
|
||||
</head>
|
||||
<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); ">
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<header class="sticky">
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
|
|
|
|||
117
docs/grid.html
117
docs/grid.html
|
|
@ -1,115 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Grid</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, grid ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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;
|
||||
}
|
||||
}
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; }
|
||||
[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;}
|
||||
@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>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<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="navigation.html" class="button">Navigation</a>
|
||||
<a href="input_control.html" class="button">Input Control</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 class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</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>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
|
|
|
|||
194
docs/index.html
194
docs/index.html
|
|
@ -1,88 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-area {
|
||||
height: 320px;
|
||||
background: -webkit-linear-gradient(#455a64,#192024);
|
||||
background: linear-gradient(#455a64,#192024);
|
||||
}
|
||||
#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; }
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
#top-area { height: 320px; background: -webkit-linear-gradient(#455a64,#192024); background: linear-gradient(#455a64,#192024);}
|
||||
#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-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; }
|
||||
.box-colored.red { background: #e53935; } .box-centered { text-align: center; }
|
||||
.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; } [class^='fore-'] { font-family: monospace, monospace;}
|
||||
.fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="top-area">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="box-centered">
|
||||
<img src="mini-logo.svg" id="top-logo">
|
||||
<div class="container" id="top-area"><div class="row">
|
||||
<div class="col-sm"><div class="box-centered"> <img src="mini-logo.svg" id="top-logo">
|
||||
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
||||
<mark class="tertiary" id="top-version-tag">v2.1</mark>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); ">
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
</div></div>
|
||||
</div></div>
|
||||
<header class="sticky">
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
|
|
@ -94,9 +50,7 @@
|
|||
<div class="col-sm-12 col-md box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Minimal<small>Size matters!</small></h2><br>
|
||||
<i class="fa fa-compress fa-4x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<h2>Minimal<small>Size matters!</small></h2><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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -104,9 +58,7 @@
|
|||
<div class="col-sm-12 col-md box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Responsive<small>Think mobile!</small></h2><br>
|
||||
<i class="fa fa-mobile fa-4x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<h2>Responsive<small>Think mobile!</small></h2><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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -114,9 +66,7 @@
|
|||
<div class="col-sm-12 col-md box-centered row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><br>
|
||||
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
|
||||
<br><br>
|
||||
<h2>Style-agnostic<small>Infinitely customizable!</small></h2><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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -130,72 +80,47 @@
|
|||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6"><pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre></div>
|
||||
<div class="col-sm-12 col-md-6"><pre><span class="fore-tertiary">npm install</span> <span class="fore-primary">mini.css</span></pre></div>
|
||||
</div><br>
|
||||
<p>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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<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>
|
||||
<table>
|
||||
<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>
|
||||
<table> <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>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Bootstrap</td>
|
||||
<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="Size (uncompressed)">143 KB</td>
|
||||
<td data-label="Size (minified)">117 KB</td>
|
||||
<td data-label="Size (gzipped)">20 KB</td>
|
||||
<td data-label="Size (uncompressed)">143 KB</td><td data-label="Size (minified)">117 KB</td><td data-label="Size (gzipped)">20 KB</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Material Framework</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)">114 KB</td>
|
||||
<td data-label="Size (minified)">90 KB</td>
|
||||
<td data-label="Size (gzipped)">18 KB</td>
|
||||
<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">mini.css</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 (uncompressed)">47 KB</td>
|
||||
<td data-label="Size (minified)">36 KB</td>
|
||||
<td data-label="Size (gzipped)">7 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>
|
||||
</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>
|
||||
<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>
|
||||
<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> 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>
|
||||
<p><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark> 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 class="col-sm-12 col-md col-lg-5 col-lg-offset-1">
|
||||
<h3>Module list</h3>
|
||||
|
|
@ -219,63 +144,40 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<table>
|
||||
<caption>Browser support</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Browser</th>
|
||||
<th>Not supported</th>
|
||||
<th>Partially supported</th>
|
||||
<th>Fully supported</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<table> <caption>Browser support</caption>
|
||||
<thead> <tr> <th>Browser</th><th>Not supported</th><th>Partially supported</th><th>Fully supported</th> </tr> </thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-internet-explorer" aria-hidden="true" style="color: #1565c0;"></i> Internet Explorer</td>
|
||||
<td data-label="Not supported">8-</td>
|
||||
<td data-label="Partially supported">9-10</td>
|
||||
<td data-label="Fully supported">11+</td>
|
||||
<td data-label="Not supported">8-</td><td data-label="Partially supported">9-10</td><td data-label="Fully supported">11+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-edge" aria-hidden="true" style="color: #0d47a1;"></i> Edge</td>
|
||||
<td data-label="Not supported">n/a</td>
|
||||
<td data-label="Partially supported">n/a</td>
|
||||
<td data-label="Fully supported">12+</td>
|
||||
<td data-label="Not supported">n/a</td><td data-label="Partially supported">n/a</td><td data-label="Fully supported">12+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-firefox" aria-hidden="true" style="color: #bf360c;"></i> Firefox</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="Not supported">21-</td><td data-label="Partially supported">22-27</td><td data-label="Fully supported">28+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-chrome" aria-hidden="true" style="color: #ff8f00;"></i> Chrome</td>
|
||||
<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="Not supported">20-</td><td data-label="Partially supported">n/a</td><td data-label="Fully supported">21+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Browser"><i class="fa fa-safari" aria-hidden="true" style="color: #0277bd;"></i> 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>
|
||||
<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> 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>
|
||||
<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> 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>
|
||||
<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> 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>
|
||||
<p><mark class="secondary" style="padding: 3px 6px;"><i class="fa fa-lg fa-exclamation" aria-hidden="true"></i></mark> 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 class="row" style="padding-bottom: 60px;">
|
||||
|
|
|
|||
|
|
@ -1,102 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Input Control</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, input, control, form, button ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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;
|
||||
}
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; }
|
||||
[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-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;}
|
||||
.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<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="navigation.html" class="button">Navigation</a>
|
||||
<a href="input_control.html" class="button">Input Control</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 class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</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>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
|
|
@ -126,9 +69,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Forms & input</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Forms & input</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<form>
|
||||
|
|
@ -138,16 +79,6 @@
|
|||
<div class="input-group"><label for="pwd">password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<style>
|
||||
.responsive-label {
|
||||
align-items: center;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.responsive-label .col-md-3 {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Aligned form (using grid)</legend>
|
||||
|
|
@ -180,10 +111,7 @@
|
|||
<label for="select">Select</label>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md">
|
||||
<select id="select">
|
||||
<option>Apples</option>
|
||||
<option>Oranges</option>
|
||||
</select>
|
||||
<select id="select"> <option>Apples</option> <option>Oranges</option> </select>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -214,8 +142,7 @@
|
|||
<li>Using the <code><fieldset></code> and <code><legend></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><input></code> elements, such as date & 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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><form>
|
||||
|
|
@ -306,9 +233,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Checkboxes & radio buttons</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Checkboxes & radio buttons</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<div class="box-centered">
|
||||
|
|
@ -343,8 +268,7 @@
|
|||
<h3>Notes</h3>
|
||||
<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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><div class="input-group">
|
||||
|
|
@ -397,9 +321,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Buttons & button groups</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Buttons & button groups</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<button>Default button</button>
|
||||
|
|
@ -411,11 +333,7 @@
|
|||
<button class="large">Large button</button>
|
||||
<button disabled>Disabled button</button>
|
||||
<h4>Button group</h4>
|
||||
<div class="button-group">
|
||||
<button>Button</button>
|
||||
<button>Button</button>
|
||||
<button>Button</button>
|
||||
</div>
|
||||
<div class="button-group"> <button>Button</button> <button>Button</button> <button>Button</button> </div>
|
||||
</div>
|
||||
<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><button></code> or an <code><input></code> with a button <code><span class="secondary">type</span></code> (i.e. <code><span class="fore-primary">"button"</span></code>, <code><span class="fore-primary">"submit"</span></code> or <code><span class="fore-primary">"reset"</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>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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><button class="inverse small">Small inverse button</button></pre>
|
||||
|
|
@ -483,9 +400,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>File upload buttons</h2>
|
||||
</div>
|
||||
<div class="section"><h2>File upload buttons</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<div class="input-group">
|
||||
|
|
@ -507,8 +422,7 @@
|
|||
<ul>
|
||||
<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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<pre><div class="input-group">
|
||||
|
|
|
|||
|
|
@ -1,59 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Modules</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, modules">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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; }
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; } .box-left { text-align: left; }
|
||||
</style>
|
||||
</head>
|
||||
<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); ">
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<header class="sticky">
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,102 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - navigation</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, navigation ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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;
|
||||
}
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; }
|
||||
[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-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>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<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="navigation.html" class="button">Navigation</a>
|
||||
<a href="input_control.html" class="button">Input Control</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 class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</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>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
|
|
@ -126,22 +68,15 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Header</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Header</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<div>
|
||||
<br>
|
||||
<div><br>
|
||||
<header>
|
||||
<a href="#" class="logo">Logo</a>
|
||||
<button>Home</button>
|
||||
<a href="#" class="button">News</a>
|
||||
<span>|</span>
|
||||
<button>About</button>
|
||||
<button>Contact</button>
|
||||
</header>
|
||||
<br>
|
||||
<a href="#" class="logo">Logo</a> <button>Home</button>
|
||||
<a href="#" class="button">News</a> <span>|</span>
|
||||
<button>About</button> <button>Contact</button>
|
||||
</header> <br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
|
|
@ -162,8 +97,7 @@
|
|||
<ul>
|
||||
<li>The <code><header></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><header></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>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><header>
|
||||
|
|
@ -193,26 +127,17 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Navigation bar</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Navigation bar</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<div>
|
||||
<br>
|
||||
<div><br>
|
||||
<nav>
|
||||
<a href="#">Home</a>
|
||||
<span>News</span>
|
||||
<a href="#" class="sublink-1">New Courses</a>
|
||||
<a href="#" class="sublink-1">Certifications</a>
|
||||
<span class="sublink-1">Events</span>
|
||||
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
||||
<a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
</nav>
|
||||
<br>
|
||||
<a href="#">Home</a> <span>News</span>
|
||||
<a href="#" class="sublink-1">New Courses</a> <a href="#" class="sublink-1">Certifications</a>
|
||||
<span class="sublink-1">Events</span> <a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a> <a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#">About</a> <a href="#">Contact</a>
|
||||
</nav><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
|
|
@ -237,8 +162,7 @@
|
|||
<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>We strongly suggest you do not add irrelevant things inside your <code><nav></code> element, like images or text that are not part of the navigation menu.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<pre><div class="col-sm-12 col-sm-last col-md-3 col-md-first">
|
||||
|
|
@ -256,17 +180,11 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Footer</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Footer</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<div>
|
||||
<br>
|
||||
<footer>
|
||||
<p>© 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer>
|
||||
<br>
|
||||
<div><br>
|
||||
<footer> <p>© 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p> </footer> <br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
|
|
|
|||
|
|
@ -1,102 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Progress</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, progress ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
[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;}
|
||||
@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>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<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="navigation.html" class="button">Navigation</a>
|
||||
<a href="input_control.html" class="button">Input Control</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 class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</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>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
|
|
@ -126,17 +71,12 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Basic progress bar</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Basic progress bar</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<p>Process is 0% complete!</p>
|
||||
<progress value="0" max="1000"></progress>
|
||||
<p>Process is 45% complete!</p>
|
||||
<progress value="450" max="1000"></progress>
|
||||
<p>Process is 100% complete!</p>
|
||||
<progress value="1000" max="1000"></progress>
|
||||
<p>Process is 0% complete!</p> <progress value="0" max="1000"></progress>
|
||||
<p>Process is 45% complete!</p> <progress value="450" max="1000"></progress>
|
||||
<p>Process is 100% complete!</p> <progress value="1000" max="1000"></progress>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>To create a progress bar, use the <code><progress></code> HTML element, specify the preset maximum of <code><span class="fore-secondary">max</span>=<span class="fore-primary">"1000"</span></code> and set a <code>value</code> between <code>0</code> and <code>1000</code>. Update your <code><progress></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>
|
||||
<li>We made sure that the <code><progress></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><progress></code> element.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><progress value="80" max="100"></progress></pre>
|
||||
|
|
@ -170,17 +109,12 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Progress bar variants</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Progress bar variants</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<p>Secondary process is 60% complete!</p>
|
||||
<progress class="secondary" value="600" max="1000"></progress>
|
||||
<p>Tertiary process is 30% complete!</p>
|
||||
<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>Secondary process is 60% complete!</p> <progress class="secondary" value="600" max="1000"></progress>
|
||||
<p>Tertiary process is 30% complete!</p> <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>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
|
|
@ -196,8 +130,7 @@
|
|||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>If you want to add your own custom size classes for <code><progress></code> elements, check the <a href="customization.html">customization page</a> for instructions.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><progress class="nano secondary" value="800" max="1000"></progress>
|
||||
|
|
@ -219,15 +152,11 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Donut spinner</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Donut spinner</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div class="box-centered">
|
||||
<br>
|
||||
<div class="spinner-donut"></div>
|
||||
<br>
|
||||
<div class="box-centered"><br>
|
||||
<div class="spinner-donut"></div><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
|
|
@ -240,8 +169,7 @@
|
|||
<h3>Notes</h3>
|
||||
<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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><p>Loading... <span class="spinner-donut"></span></p></pre>
|
||||
|
|
@ -259,17 +187,11 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Donut spinner variants</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Donut spinner variants</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div class="box-centered">
|
||||
<br>
|
||||
<div class="spinner-donut secondary"></div><br>
|
||||
<div class="spinner-donut tertiary"></div><br>
|
||||
<div class="spinner-donut large"></div>
|
||||
<br>
|
||||
<div class="box-centered"><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 class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
|
|
|
|||
|
|
@ -1,81 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Quick Reference</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, reference, cheatsheet ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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;
|
||||
}
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; } .box-left { text-align: left; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.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>
|
||||
<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); ">
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<header class="sticky">
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
|
|
|
|||
154
docs/tab.html
154
docs/tab.html
|
|
@ -1,102 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Tab</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, tab, tabs ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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;
|
||||
}
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; }
|
||||
[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;}
|
||||
@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>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<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="navigation.html" class="button">Navigation</a>
|
||||
<a href="input_control.html" class="button">Input Control</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 class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</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>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
|
|
@ -126,36 +68,22 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Basic syntax</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Basic syntax</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div class="tabs" style="margin-top: 5px; margin-bottom: 5px;">
|
||||
<input type="radio" name="tabdemo" id="tab1" checked aria-hidden="true">
|
||||
<label for="tab1" aria-hidden="true">Tab 1</label>
|
||||
<div>
|
||||
<h3>Tab 1</h3>
|
||||
<p>This is the first tab's content.</p>
|
||||
</div>
|
||||
<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">
|
||||
<label for="tab2" aria-hidden="true">Tab 2</label>
|
||||
<div>
|
||||
<h3>Tab 2</h3>
|
||||
<p>This is the second tab's content.</p>
|
||||
</div>
|
||||
<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">
|
||||
<label for="tab3" aria-hidden="true">Tab 3</label>
|
||||
<div>
|
||||
<h3>Tab 3</h3>
|
||||
<p>This is the third tab's content.</p>
|
||||
</div>
|
||||
<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">
|
||||
<label for="tab4" aria-hidden="true">Tab 4</label>
|
||||
<div>
|
||||
<h3>Tab 4</h3>
|
||||
<p>This is the fourth tab's content.</p>
|
||||
</div>
|
||||
<div> <h3>Tab 4</h3> <p>This is the fourth tab's content.</p> </div>
|
||||
</div>
|
||||
</div>
|
||||
<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>Remember to add the <code><span class="fore-secondary">checked</span></code> attribute to one of your <code><input></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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><div class="tabs">
|
||||
|
|
@ -256,36 +183,24 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Stacked tabs</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Stacked tabs</h2></div>
|
||||
<div class="section row">
|
||||
<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;">
|
||||
<input type="radio" name="accordion" id="a1" autocomplete="off" checked aria-hidden="true">
|
||||
<label for="a1" aria-hidden="true">Accordion section 1</label>
|
||||
<div>
|
||||
<h3>Section 1</h3>
|
||||
<p>This is the first accordion section's content.</p>
|
||||
</div>
|
||||
<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">
|
||||
<label for="a2" aria-hidden="true">Accordion section 2</label>
|
||||
<div>
|
||||
<h3>Section 2</h3>
|
||||
<p>This is the second accordion section's content.</p>
|
||||
</div>
|
||||
<div> <h3>Section 2</h3> <p>This is the second accordion section's content.</p> </div>
|
||||
</div>
|
||||
<div class="tabs stacked" style="margin-top: 5px; margin-bottom: 5px;">
|
||||
<input type="checkbox" id="c1" autocomplete="off" aria-hidden="true">
|
||||
<label for="c1" aria-hidden="true">Collapse section 1</label>
|
||||
<div>
|
||||
<p>This is the first collapse section's content.</p>
|
||||
</div>
|
||||
<div> <p>This is the first collapse section's content.</p> </div>
|
||||
<input type="checkbox" id="c2" autocomplete="off" aria-hidden="true">
|
||||
<label for="c2" aria-hidden="true">Collapse section 2</label>
|
||||
<div>
|
||||
<p>This is the second collapse section's content.</p>
|
||||
</div>
|
||||
<div> <p>This is the second collapse section's content.</p> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
|
|
@ -325,8 +240,7 @@
|
|||
<ul>
|
||||
<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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="tabs stacked">
|
||||
|
|
|
|||
267
docs/table.html
267
docs/table.html
|
|
@ -1,135 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Table</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, table ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #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;
|
||||
}
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; }
|
||||
[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;}
|
||||
@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;}
|
||||
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; } .border-fix > td, .border-fix > th { border-top: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<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="navigation.html" class="button">Navigation</a>
|
||||
<a href="input_control.html" class="button">Input Control</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 class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</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>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
|
|
@ -159,9 +74,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Basic syntax & responsiveness</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Basic syntax & responsiveness</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div>
|
||||
|
|
@ -169,28 +82,12 @@
|
|||
<table class="preset">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
<tr><th>Name</th><th>Surname</th><th>Alias</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<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>
|
||||
<tr><td data-label="Name">Chad</td><td data-label="Surname">Wilberts</td><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>
|
||||
</table>
|
||||
<br>
|
||||
|
|
@ -198,28 +95,12 @@
|
|||
<table id="carded">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
<tr><th>Name</th><th>Surname</th><th>Alias</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<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>
|
||||
<tr><td data-label="Name">Chad</td><td data-label="Surname">Wilberts</td><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>
|
||||
</table>
|
||||
<br>
|
||||
|
|
@ -269,8 +150,7 @@
|
|||
<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>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>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><tr>
|
||||
|
|
@ -329,33 +209,13 @@
|
|||
<br><table class="horizontal preset">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
<tr><th>Name</th><th>Surname</th><th>Alias</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<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>
|
||||
<tr>
|
||||
<td data-label="Name">Nick</td>
|
||||
<td data-label="Surname">Thomson</td>
|
||||
<td data-label="Alias">NickThom</td>
|
||||
</tr>
|
||||
<tr><td data-label="Name">Chad</td><td data-label="Surname">Wilberts</td><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>
|
||||
<tr><td data-label="Name">Nick</td><td data-label="Surname">Thomson</td><td data-label="Alias">NickThom</td></tr>
|
||||
</tbody>
|
||||
</table><br>
|
||||
</div>
|
||||
|
|
@ -417,41 +277,17 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Table variants & matrices</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Table variants & matrices</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div>
|
||||
<br>
|
||||
<style> .border-fix > td, .border-fix > th { border-top: 0; } </style>
|
||||
<div><br>
|
||||
<table class="preset">
|
||||
<caption>Star Wars Character Alignment Table</caption>
|
||||
<tbody>
|
||||
<tr class="border-fix">
|
||||
<th></th>
|
||||
<th>Lawful</td>
|
||||
<th>Neutral</td>
|
||||
<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>
|
||||
<tr class="border-fix"><th></th><th>Lawful</td><th>Neutral</td><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>
|
||||
</table><br>
|
||||
</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><th></code> elements inside the <code><tbody></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>
|
||||
<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">
|
||||
<label for="grid-base-sample">Show sample code</label>
|
||||
<div>
|
||||
|
|
@ -510,8 +346,7 @@
|
|||
<ul>
|
||||
<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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><style>
|
||||
|
|
|
|||
|
|
@ -1,102 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Utility</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, utility, helper, classes, utilities ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
/* Classes and ids used in multiple pages - page top and utilities */
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
|
||||
padding: 4px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
#top-heading {
|
||||
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
|
||||
}
|
||||
#top-version-tag {
|
||||
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
}
|
||||
.box-centered { text-align: center; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #b71c1c; }
|
||||
.box-centered > .card.fluid {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-box-align: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-self: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||||
/* Local classes and ids for this page */
|
||||
.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;
|
||||
}
|
||||
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
||||
.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; }
|
||||
[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; }
|
||||
@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>
|
||||
<body>
|
||||
<header>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a>
|
||||
<a href="customization.html" class="button">Customization</a>
|
||||
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <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="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
||||
<a href="quick_reference.html" class="button">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<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="navigation.html" class="button">Navigation</a>
|
||||
<a href="input_control.html" class="button">Input Control</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 class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</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>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
|
|
@ -126,9 +68,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Visibility helpers</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Visibility helpers</h2></div>
|
||||
<div class="section row">
|
||||
<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>
|
||||
|
|
@ -141,8 +81,7 @@
|
|||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<pre><span class="hidden visually-hidden">Not a good idea</span></pre>
|
||||
|
|
@ -156,9 +95,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Generic borders & shadows</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Generic borders & shadows</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<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>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>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><span class="bordered rounded shadow-small">Stylized element</span></pre>
|
||||
|
|
@ -208,9 +144,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Responsive sizing & spacing classes</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Responsive sizing & spacing classes</h2></div>
|
||||
<div class="section row">
|
||||
<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>
|
||||
|
|
@ -224,8 +158,7 @@
|
|||
<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>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<pre><div class="responsive-padding responsive-margin">Responsive padding and margin</div></pre>
|
||||
|
|
@ -239,19 +172,11 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Breadcrumbs</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Breadcrumbs</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div>
|
||||
<br>
|
||||
<ul class="breadcrumbs">
|
||||
<li><a href="#">Root</a></li>
|
||||
<li><a href="#">Folder</a></li>
|
||||
<li>File</li>
|
||||
</ul>
|
||||
<br>
|
||||
<div><br>
|
||||
<ul class="breadcrumbs"> <li><a href="#">Root</a></li> <li><a href="#">Folder</a></li> <li>File</li> </ul><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
|
|
@ -269,8 +194,7 @@
|
|||
<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>Breadcrumbs show a hierarchy, an ordered list. However, we do not use the <code><ol></code> element, as it might conflict with some custom styles we've seen people use.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><ol class="breadcrumbs">
|
||||
|
|
@ -299,9 +223,7 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Close icon</h2>
|
||||
</div>
|
||||
<div class="section"><h2>Close icon</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div>
|
||||
|
|
@ -320,8 +242,7 @@
|
|||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>The close icon behaves similar to a button when hovering over it or otherwise focusing or selecting it.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="close"></div></pre>
|
||||
|
|
|
|||
|
|
@ -825,3 +825,9 @@
|
|||
|
||||
- `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.
|
||||
- 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`.
|
||||
|
|
|
|||
Loading…
Reference in a new issue