mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-01 19:40:35 +02:00
Code Issues Releases Wiki Activity

Updated module docs

Browse Source 
Added sidebar navigation to all module documentation pages, updated the color palette of button elements to make them look better.
This commit is contained in:
Angelos Chalaris
2017-04-28 01:00:44 +03:00
parent df91cadf49
commit f337f190cb
16 changed files with 495 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dist/mini-default.css vendored
View File

@@ -973,7 +973,7 @@ button, [type="button"], [type="submit"], [type="reset"],
a.button, label.button, .button,
a[role="button"], label[role="button"], [role="button"] {
display: inline-block;
background: rgba(172, 172, 172, 0.75);
background: rgba(208, 208, 208, 0.75);
color: #212121;
border: 0;
border-radius: 2px;
@@ -991,7 +991,7 @@ a.button:focus, label.button:hover, label.button:active, label.button:focus, .bu
a[role="button"]:hover,
a[role="button"]:active,
a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:active, label[role="button"]:focus, [role="button"]:hover, [role="button"]:active, [role="button"]:focus {
background: #acacac;
background: #d0d0d0;
opacity: 1;
}
@@ -1021,7 +1021,7 @@ input[type="file"] {
display: -webkit-box;
display: -webkit-flex;
display: flex;
border: 1px solid #9e9e9e;
border: 1px solid #bdbdbd;
border-radius: 2px;
margin: 0.5rem;
}
@@ -1050,7 +1050,7 @@ input[type="file"] {
.button-group .button + .button,
.button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
.button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
border-left: 1px solid #9e9e9e;
border-left: 1px solid #bdbdbd;
}
@media screen and (max-width: 767px) {
@@ -1072,7 +1072,7 @@ input[type="file"] {
.button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
.button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
border: 0;
border-top: 1px solid #9e9e9e;
border-top: 1px solid #bdbdbd;
}
}

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

68
docs/card.html
View File

@@ -21,36 +21,63 @@
.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;}
.box-colored {color: #f5f5f5;}
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<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">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="card-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Card</h1>
<p>The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Card</li></ul>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
@@ -65,7 +92,7 @@
</div>
</div>
<div class="row" id="basic-syntax">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"> <h2>Basic syntax</h2></div>
<div class="section row">
@@ -181,7 +208,7 @@
</div>
</div>
<div class="row" id="sections-media">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Sections &amp; media</h2></div>
<div class="section row">
@@ -224,7 +251,7 @@
</div>
</div>
<div class="row" id="sizing-fluidity">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Card sizing &amp; fluidity</h2></div>
<div class="section row">
@@ -300,12 +327,11 @@
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

70
docs/contextual.html
View File

@@ -21,36 +21,63 @@
.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-colored {color: #f5f5f5;}
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<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">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="contextual-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Contextual</h1>
<p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Contextual</li></ul>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
@@ -65,7 +92,7 @@
</div>
</div>
<div class="row" id="text-highlighting">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Text highlighting</h2></div>
<div class="section row">
@@ -124,7 +151,7 @@
</div>
</div>
<div class="row" id="alerts">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Alerts</h2></div>
<div class="section row">
@@ -175,7 +202,7 @@
</div>
</div>
<div class="row" id="animated-alerts">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Animated alerts</h2></div>
<div class="section row">
@@ -211,7 +238,7 @@
</div>
</div>
<div class="row" id="tooltips">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Tooltips</h2></div>
<div class="section row">
@@ -240,12 +267,11 @@
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

3
docs/core.html
View File

@@ -72,8 +72,7 @@
<div class="col-sm-12">
<h1>Core</h1>
<p>The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Core</li></ul><br />
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<div class="row">

74
docs/grid.html
View File

@@ -21,38 +21,65 @@
.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-colored {color: #f5f5f5; }
.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>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<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">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="grid-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Grid</h1>
<p>The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Grid</li></ul>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
@@ -67,7 +94,7 @@
</div>
</div>
<div class="row" id="basic-layout">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Basic layout</h2></div>
<div class="section row">
@@ -241,7 +268,7 @@
</div>
</div>
<div class="row" id="screen-specific-layout">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Screen-specific layouts</h2></div>
<div class="section row">
@@ -337,7 +364,7 @@
</div>
</div>
<div class="row" id="predefined-layout">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Predefined layouts</h2></div>
<div class="section row">
@@ -394,7 +421,7 @@
</div>
</div>
<div class="row" id="column-offset">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Column offsets</h2></div>
<div class="section row">
@@ -467,7 +494,7 @@
</div>
</div>
<div class="row" id="column-reorder">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Column reordering</h2></div>
<div class="section row">
@@ -541,7 +568,7 @@
</div>
</div>
<div class="row" id="media-object">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Media object pattern</h2></div>
<div class="section row">
@@ -646,12 +673,11 @@
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

70
docs/input_control.html
View File

@@ -21,37 +21,64 @@
.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;}
.box-colored {color: #f5f5f5;}
.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<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">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="input-control-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Input Control</h1>
<p>The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements' styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Input Control</li></ul>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
@@ -66,7 +93,7 @@
</div>
</div>
<div class="row" id="forms-input">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Forms &amp; input</h2></div>
<div class="section row">
@@ -238,7 +265,7 @@
</div>
</div>
<div class="row" id="checkbox-radio">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Checkboxes &amp; radio buttons</h2></div>
<div class="section row">
@@ -326,7 +353,7 @@
</div>
</div>
<div class="row" id="buttons">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Buttons &amp; button groups</h2></div>
<div class="section row">
@@ -407,7 +434,7 @@
</div>
</div>
<div class="row" id="file-upload">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>File upload buttons</h2></div>
<div class="section row">
@@ -447,12 +474,11 @@
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

2
docs/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

75
docs/modules.html
View File

@@ -16,41 +16,69 @@
<style>
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
.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; } 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; } .box-left { text-align: left; }
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<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">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Modules</h1>
<p><strong>mini.css</strong> uses modules as its base building blocks. Each module contains one or more components that affect the same part of the user experience. Below you can see a quick overview of all the modules that compose <strong>mini.css</strong>.</p><br>
</div>
</div>
<div class="row box-centered">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1 row">
<div class="col-sm-12 col-md-6 row">
<div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-font fa-fw" aria-hidden="true"></i></mark>&nbsp;Core</h2>
<p class="section box-left">The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p>
<a href="core.html" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5 row">
<div class="col-sm-12 col-md-6 row">
<div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></mark>&nbsp;Grid</h2>
<p class="section box-left">The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p>
@@ -59,14 +87,14 @@
</div>
</div>
<div class="row box-centered">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1 row">
<div class="col-sm-12 col-md-6 row">
<div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark>&nbsp;Navigation</h2>
<p class="section box-left">The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p>
<a href="navigation.html" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5 row">
<div class="col-sm-12 col-md-6 row">
<div class="card fluid">
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Input Control</h2>
<p class="section box-left">The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
@@ -75,14 +103,14 @@
</div>
</div>
<div class="row box-centered">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1 row">
<div class="col-sm-12 col-md-6 row">
<div class="card fluid">
<h2 class="section"><mark class="primary"><i class="fa fa-table fa-fw" aria-hidden="true"></i></mark>&nbsp;Table</h2>
<p class="section box-left">The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.</p>
<a href="table.html" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5 row">
<div class="col-sm-12 col-md-6 row">
<div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Card</h2>
<p class="section box-left">The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p>
@@ -91,14 +119,14 @@
</div>
</div>
<div class="row box-centered">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1 row">
<div class="col-sm-12 col-md-6 row">
<div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></mark>&nbsp;Tab</h2>
<p class="section box-left">The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</p>
<a href="tab.html" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5 row">
<div class="col-sm-12 col-md-6 row">
<div class="card fluid">
<h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark>&nbsp;Contextual</h2>
<p class="section box-left">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
@@ -107,14 +135,14 @@
</div>
</div>
<div class="row box-centered" style="padding-bottom: 40px;">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1 row">
<div class="col-sm-12 col-md-6 row">
<div class="card fluid">
<h2 class="section"><mark class="tertiary"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></mark>&nbsp;Progress</h2>
<p class="section box-left">The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
<a href="progress.html" class="button section">See more</a>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5 row">
<div class="col-sm-12 col-md-6 row">
<div class="card fluid">
<h2 class="section"><mark class="tertiary"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></mark>&nbsp;Utility</h2>
<p class="section box-left">The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.</p>
@@ -122,8 +150,7 @@
</div>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

70
docs/navigation.html
View File

@@ -21,36 +21,63 @@
.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;}
.box-colored { color: #f5f5f5;}
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<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">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="navigation-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Navigation</h1>
<p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Navigation</li></ul>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
@@ -65,7 +92,7 @@
</div>
</div>
<div class="row" id="header">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Header</h2></div>
<div class="section row">
@@ -124,7 +151,7 @@
</div>
</div>
<div class="row" id="navigation-bar">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Navigation bar</h2></div>
<div class="section row">
@@ -177,7 +204,7 @@
</div>
</div>
<div class="row" id="footer">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Footer</h2></div>
<div class="section row">
@@ -198,7 +225,7 @@
</div>
</div>
<div class="row" id="sticky">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Sticky headers and footers</h2></div>
<div class="section row">
@@ -224,12 +251,11 @@
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

70
docs/progress.html
View File

@@ -23,36 +23,63 @@
.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-colored {color: #f5f5f5;}
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<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">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="progress-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Progress</h1>
<p>The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Progress</li></ul>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
@@ -67,7 +94,7 @@
</div>
</div>
<div class="row" id="basic-progress-bar">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-121">
<div class="card fluid">
<div class="section"><h2>Basic progress bar</h2></div>
<div class="section row">
@@ -105,7 +132,7 @@
</div>
</div>
<div class="row" id="progress-variants">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Progress bar variants</h2></div>
<div class="section row">
@@ -148,7 +175,7 @@
</div>
</div>
<div class="row" id="donut-spinner">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Donut spinner</h2></div>
<div class="section row">
@@ -184,7 +211,7 @@
</div>
</div>
<div class="row" id="spinner-variants">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Donut spinner variants</h2></div>
<div class="section row">
@@ -211,12 +238,11 @@
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

66
docs/tab.html
View File

@@ -21,36 +21,63 @@
.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-colored {color: #f5f5f5;}
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<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">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="tab-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Tab</h1>
<p>The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Tab</li></ul>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
@@ -65,7 +92,7 @@
</div>
</div>
<div class="row" id="basic-syntax">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Basic syntax</h2></div>
<div class="section row">
@@ -181,7 +208,7 @@
</div>
</div>
<div class="row" id="stacked-tabs">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Stacked tabs</h2></div>
<div class="section row">
@@ -268,12 +295,11 @@
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

68
docs/table.html
View File

@@ -21,7 +21,7 @@
.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-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; }
@@ -31,32 +31,59 @@
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<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">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="table-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Table</h1>
<p>The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Table</li></ul>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
@@ -71,7 +98,7 @@
</div>
</div>
<div class="row" id="syntax-responsiveness">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Basic syntax &amp; responsiveness</h2></div>
<div class="section row">
@@ -198,7 +225,7 @@
</div>
</div>
<div class="row" id="horizontal-tables">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Horizontal tables</h2>
@@ -275,7 +302,7 @@
</div>
</div>
<div class="row" id="variants-matrices">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Table variants &amp; matrices</h2></div>
<div class="section row">
@@ -389,12 +416,11 @@
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

74
docs/utility.html
View File

@@ -21,36 +21,63 @@
.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;}
.box-colored { color: #f5f5f5;}
</style>
</head>
<body>
<header>
<header class="sticky">
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a> <a href="templates.html" class="button">Templates</a> <a href="customization/index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i>&nbsp;Github</a>
</header>
<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">
<div class="container" style="padding-left: 0.25rem;">
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness &amp; captions</a>
<br/> <a href="grid.html#grid-title">Grid</a>
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
<br/> <a href="navigation.html#navigation-title">Navigation</a>
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers &amp; footers</a>
<br/> <a href="input_control.html#input-control-title">Input Control</a>
<a href="input_control.html#forms-input" class="sublink-1">Forms &amp; input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes &amp; radio buttons</a>
<a href="input_control.html#buttons" class="sublink-1">Buttons &amp; button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
<br/> <a href="table.html#table-title">Table</a>
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax &amp; responsiveness</a>
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants &amp; matrices</a>
<br/> <a href="card.html#card-title">Card</a>
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections &amp; media</a>
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing &amp; fluidity</a>
<br/> <a href="tab.html#tab-title">Tab</a>
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
<br/> <a href="contextual.html#contextual-title">Contextual</a>
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
<br/> <a href="progress.html#progress-title">Progress</a>
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
<br/> <a href="utility.html#utility-title">Utility</a>
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders &amp; shadows</a>
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing &amp; spacing classes</a>
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
</nav> </div>
<div class="col-sm-12 col-md-8 col-lg-10"><main>
<div class="row" style="padding-top: 40px;" id="utility-title">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<h1>Utility</h1>
<p>The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Utility</li></ul>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
</div>
</div>
<div class="row">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section">
<h2>Quick overview</h2>
@@ -65,7 +92,7 @@
</div>
</div>
<div class="row" id="visibility-helpers">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Visibility helpers</h2></div>
<div class="section row">
@@ -92,7 +119,7 @@
</div>
</div>
<div class="row" id="borders-shadows">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Generic borders &amp; shadows</h2></div>
<div class="section row">
@@ -141,7 +168,7 @@
</div>
</div>
<div class="row" id="responsive-sizing">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Responsive sizing &amp; spacing classes</h2></div>
<div class="section row">
@@ -169,7 +196,7 @@
</div>
</div>
<div class="row" id="responsive-visibility">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Responsive visibility helpers</h2></div>
<div class="section row">
@@ -217,7 +244,7 @@
</div>
</div>
<div class="row" id="breadcrumbs">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Breadcrumbs</h2></div>
<div class="section row">
@@ -269,7 +296,7 @@
</div>
</div>
<div class="row" id="close-icon">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<div class="card fluid">
<div class="section"><h2>Close icon</h2></div>
<div class="section row">
@@ -306,12 +333,11 @@
</div>
</div>
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
<div class="col-sm col-lg-10 col-lg-offset-1">
<div class="col-sm-12">
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
</main></div></div></div>
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

2
docs/v2/DEVLOG.md
View File

@@ -1042,3 +1042,5 @@
- Changed `transition` properties to not use `-webkit` prefix anymore. Also changed them, removing `ease` and `0s` for `transition-timing-function` and `transition-delay` repsectively, allowing the browser defaults to apply (which are the same, so nothing lost there).
- Changed `transition` of `a` and `buttton` elements to `opacity` from `all` for higher specificity.
- Tested aforementioned changes, everything seems to work ok. Size of `default` flavor is now `6.71KB` compared to a `6.89KB` in previous release. Pretty sweet reduction.
- Built sidebar navigation into modules pages.
- Tweaked color of `button` elements slightly to look less terrible.

4
src/flavors/mini-default.scss
View File

@@ -227,7 +227,7 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
$input-readonly-back-color: #e5e5e5; // Background color for readonly input
$input-readonly-border-color: #c9c9c9; // Border color for readonly input
$input-placeholder-fore-color:#616161; // Text color for input placeholder
$button-back-color: #acacac; // Back color for button elements
$button-back-color: #d0d0d0; // Back color for button elements
$button-back-opacity: 0.75; // Background opacity for button elements
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
$button-fore-color: $fore-color; // Text color for button elements
@@ -239,7 +239,7 @@ $button-box-shadow: none; // Box shadow for buttons
$button-disabled-opacity: 0.75; // Disabled button elements opacity
$button-class-name: 'button'; // Class for custom button elements
$button-group-name: 'button-group'; // Class for button groups
$button-group-border-style: 1px solid #9e9e9e; // Border style for button groups
$button-group-border-style: 1px solid #bdbdbd; // Border style for button groups
$button-group-margin: $button-margin; // Margin for button groups
$button-group-box-shadow: none; // Box shadow for button groups
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view