mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-07-31 19:10:25 +02:00
Updated docs for release
This commit is contained in:
Angelos Chalaris
324
docs/v2/customization/card.html
Normal file
324
docs/v2/customization/card.html
Normal file
@@ -0,0 +1,324 @@
|
||||
<!DOCTYPE html>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Card</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, card ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;}
|
||||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
.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;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
td:first-child, td:last-child { font-family: monospace, monospace; }
|
||||
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<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-12">
|
||||
<h1>Card</h1>
|
||||
<p style="text-align:justify">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><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p style="text-align:justify">To customize the <strong>card</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="cards-sections">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Cards & sections</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>card</strong> module's card system uses a few custom classes to create cards and sections, along with a variety of variables to customize their look and feel.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for card components</td><td data-label="Sample value">'card'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for card components</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for card components</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for card components</td><td data-label="Sample value">1px solid #9e9e9e</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for card components</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for card components</td><td data-label="Sample value">16px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for card components</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-normal-width</td><td data-label="Type">Width</td>
|
||||
<td data-label="Description">Width for card components</td><td data-label="Sample value">320px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-section-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for card components' sections</td><td data-label="Sample value">'section'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-section-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for card components' sections</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-section-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for card components' sections</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-section-media-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for card components' media sections</td><td data-label="Sample value">'media'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$card-section-media-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Height for card components' media sections</td><td data-label="Sample value">200px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="card-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Card mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>card</strong> module contains a couple of mixins for customizing card styles, along with two more for creating custom section styles.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Card mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-card-alt-color (<span class="fore-primary">$card-alt-name</span>, <span class="fore-primary">$card-alt-back-color</span>, <span class="fore-primary">$card-alt-fore-color</span>, <span class="fore-tertiary">$card-alt-border-style</span>, <span class="fore-tertiary">$card-alt-border-radius</span>, <span class="fore-tertiary">$card-alt-section-border-style</span>)</td>
|
||||
<td data-label="Description">Creates a new card color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-card-alt-size (<span class="fore-primary">$card-alt-size-name</span>, <span class="fore-primary">$card-alt-size-width</span>)</td>
|
||||
<td data-label="Description">Creates a new card size variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-card-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the card color variant</td><td data-label="Sample value">'inverse'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the card color variant</td><td data-label="Sample value">#212121</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for the card color variant</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-alt-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">(Optional) Border style for the card color variant</td><td data-label="Sample value">1px solid #424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-alt-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">(Optional) Border radius for the card color variant</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-alt-section-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">(Optional) Border style for the card color variant's section borders</td><td data-label="Sample value">1px solid #616161</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-alt-color</span> ('inverse', #212121, #fafafa, 1px solid #424242, 2px 1px solid #616161);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-card-alt-size</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-alt-size-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the card size variant</td><td data-label="Sample value">'large'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-alt-size-width</td><td data-label="Type">Width</td>
|
||||
<td data-label="Description">Width for the card size variant</td><td data-label="Sample value">480px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-alt-size</span> ('large', 480px);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Card section mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-card-section-alt-color (<span class="fore-primary">$card-section-alt-name</span>, <span class="fore-primary">$card-section-alt-back-color</span>, <span class="fore-primary">$card-section-alt-fore-color</span>, <span class="fore-tertiary">$card-section-alt-border-style</span>)</td>
|
||||
<td data-label="Description">Creates a new card section color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-card-section-alt-style (<span class="fore-primary">$card-section-alt-name</span>, <span class="fore-primary">$card-section-alt-padding</span>)</td>
|
||||
<td data-label="Description">Creates a new card section style variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-card-section-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-section-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the card section color variant</td><td data-label="Sample value">'dark'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-section-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the card section color variant</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-section-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for the card section color variant</td><td data-label="Sample value">#212121</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-section-alt-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">(Optional) Border style for the card section color variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-section-alt-color</span> ('dark', #e0e0e0, #212121, 1px solid #bdbdbd);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-card-section-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-section-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the card section style variant</td><td data-label="Sample value">'double-padded'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$card-section-alt-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the card section style variant</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-section-alt-style</span> ('double-padded', 10px);</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
584
docs/v2/customization/contextual.html
Normal file
584
docs/v2/customization/contextual.html
Normal file
@@ -0,0 +1,584 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Contextual</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, contextual ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
|
||||
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
|
||||
.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;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
td:first-child, td:last-child { font-family: monospace, monospace; }
|
||||
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<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-12">
|
||||
<h1>Contextual</h1>
|
||||
<p style="text-align:justify">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. Contextual toasts, tooltips and modals are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">Almost every website present on the web has some sort of content that needs highlighting in one way or another. The <strong>contextual</strong> module provides you with simple semantic text highlighting that utilises the <code><mark></code> HTML element. Apart from that, this module contains styles and definitions for a simple <code>.toast</code> container, that you can use to display toast messages on your websites and web apps. Toasts mimic the native application notifications of certain devices, making them mobile friendly. Finally, a simple accessible <code>.tooltip</code> implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p style="text-align:justify">To customize the <strong>contextual</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="text-highlighting">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Text highlighting</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module's styling of <code><mark></code> elements is highly customizable.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$mark-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><mark></code> elements</td><td data-label="Sample value">#0277bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$mark-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><mark></code> elements</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$mark-font-size</td><td data-label="Type">Font size</td>
|
||||
<td data-label="Description">Font size for <code><mark></code> elements</td><td data-label="Sample value">95%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$mark-line-height</td><td data-label="Type">Line height</td>
|
||||
<td data-label="Description">Line height for <code><mark></code> elements</td><td data-label="Sample value">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$mark-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><mark></code> elements</td><td data-label="Sample value">1px solid #0277bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$mark-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><mark></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$mark-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><mark></code> elements</td><td data-label="Sample value">2px 4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$mark-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><mark></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$mark-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for <code><mark></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$mark-inline-block-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for inline block <code><mark></code> elements</td><td data-label="Sample value">'inline-block'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="toasts">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Toasts</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module contains custom classes and styles for defining toast messages.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$toast-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for toast components</td><td data-label="Sample value">'toast'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$toast-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for toast components</td><td data-label="Sample value">#424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$toast-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for toast components</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$toast-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for toast components</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$toast-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for toast components</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$toast-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for toast components</td><td data-label="Sample value">12px 16px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$toast-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for toast components</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$toast-bottom</td><td data-label="Type">Position bottom</td>
|
||||
<td data-label="Description">Position bottom for toast components</td><td data-label="Sample value">20px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="tooltips">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Tooltips</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module contains a flag to enable or disable tooltips, custom classes for creating them and other variables for style customization.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-tooltip</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tooltip-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">'tooltip'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tooltip-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tooltip-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tooltip-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tooltip-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">12px 16px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tooltip-tail-size</td><td data-label="Type">Position left</td>
|
||||
<td data-label="Description">Left position for tooltip components's tail (calculated from value)<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tooltip-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tooltip-bottom-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for animated tooltip components<sup><a href="#tooltip-note-one">1</a></sup></td><td data-label="Sample value">'bottom'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="tooltip-note-one">The values used in the tooltip components will only be used if <code>$include-tooltip</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="modals">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Modals</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module contains a flag to enable or disable modals, a custom class for creating them and other variables for style customization.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-modal</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">'modal'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">black</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-back-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Background opacity for modal components<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">0.4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-close-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name of the close button of the modal component<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">'close'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-close-top</td><td data-label="Type">Position top</td>
|
||||
<td data-label="Description">Top position of the close button of the modal component<sup><a href="#modal-note-one">1</a></sup></td><td data-label="Sample value">12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$modal-close-right</td><td data-label="Type">Position right</td>
|
||||
<td data-label="Description">Right position of the close button of the modal component<sup><a href="#modal-note-one">1</a></sup><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="modal-note-one">The values used in the modal components will only be used if <code>$include-modal</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="highlighting-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Text highlighting mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to <code><mark></code> elements (color and style variants).</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-mark-alt-color (<span class="fore-primary">$mark-alt-name</span>, <span class="fore-primary">$mark-alt-back-color</span>, <span class="fore-tertiary">$mark-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new <code><mark></code> color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-mark-alt-style (<span class="fore-primary">$mark-alt-name</span>, <span class="fore-primary">$mark-alt-border-style</span>, <span class="fore-primary">$mark-alt-border-radius</span>, <span class="fore-tertiary">$mark-alt-padding</span>, <span class="fore-tertiary">$mark-alt-font-size</span>, <span class="fore-tertiary">$mark-alt-line-height</span>, <span class="fore-tertiary">$mark-alt-box-shadow</span>)</td>
|
||||
<td data-label="Description">Creates a new <code><mark></code> style variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-mark-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$mark-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the <code><mark></code> color variant</td><td data-label="Sample value">'secondary'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$mark-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the <code><mark></code> color variant</td><td data-label="Sample value">#e53935</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$mark-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Text color for the <code><mark></code> color variant</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-mark-alt-color</span> ('secondary', #e53935, #fafafa);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-mark-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$mark-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the <code><mark></code> style variant</td><td data-label="Sample value">'tag'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$mark-alt-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the <code><mark></code> style variant</td><td data-label="Sample value">1px solid #0277bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$mark-alt-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the <code><mark></code> style variant</td><td data-label="Sample value">200px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$mark-alt-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the <code><mark></code> style variant</td><td data-label="Sample value">4px 8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$mark-alt-font-size</td><td data-label="Type">Font size</td>
|
||||
<td data-label="Description">Font size for the <code><mark></code> style variant</td><td data-label="Sample value">95%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$mark-alt-line-height</td><td data-label="Type">Line height</td>
|
||||
<td data-label="Description">Line height for the <code><mark></code> style variant</td><td data-label="Sample value">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$mark-alt-box-shadow</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Box shadow for the <code><mark></code> style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-mark-alt-style</span> ('tag', 1px solid #0277bd, 200px, 4px 8px, 95%, 1, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="toast-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Toast mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to toasts (color and style variants).</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-toast-alt-color (<span class="fore-primary">$toast-alt-name</span>, <span class="fore-primary">$toast-alt-back-color</span>, <span class="fore-tertiary">$toast-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new toast color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-toast-alt-style (<span class="fore-primary">$toast-alt-name</span>, <span class="fore-primary">$toast-alt-border-style</span>, <span class="fore-primary">$toast-alt-border-radius</span>, <span class="fore-tertiary">$toast-alt-padding</span>, <span class="fore-tertiary">$toast-alt-box-shadow</span>)</td>
|
||||
<td data-label="Description">Creates a new toast style variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-toast-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$toast-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the toast color variant</td><td data-label="Sample value">'warning'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$toast-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the toast color variant</td><td data-label="Sample value">#ffca28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$toast-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Text color for the toast color variant</td><td data-label="Sample value">#212121</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-toast-alt-color</span> ('warning', #ffca28, #212121);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-toast-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$toast-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the toast style variant</td><td data-label="Sample value">'small'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$toast-alt-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the toast style variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$toast-alt-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the toast style variant</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$toast-alt-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">(Optional) Padding for the toast style variant</td><td data-label="Sample value">9px 12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$toast-alt-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">(Optional) Box shadow for the toast style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-toast-alt-style</span> ('small', 1px solid #bdbdbd, 6px, 9px 12px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="tooltip-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Tooltip mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>contextual</strong> module contains a couple of mixins for adding custom styles to tooltips (color and style variants).</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-tooltip-alt-color (<span class="fore-primary">$tooltip-alt-name</span>, <span class="fore-primary">$tooltip-alt-back-color</span>, <span class="fore-tertiary">$tooltip-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new tooltip color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-tooltip-alt-style (<span class="fore-primary">$tooltip-alt-name</span>, <span class="fore-primary">$tooltip-alt-tail-size</span>, <span class="fore-primary">$tooltip-alt-border-radius</span>, <span class="fore-tertiary">$tooltip-alt-padding</span>, <span class="fore-tertiary">$tooltip-alt-box-shadow</span>)</td>
|
||||
<td data-label="Description">Creates a new tooltip style variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-tooltip-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$tooltip-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the tooltip color variant</td><td data-label="Sample value">'primary'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$tooltip-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the tooltip color variant</td><td data-label="Sample value">#0277bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$tooltip-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Text color for the tooltip color variant</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-tooltip-alt-color</span> ('primary', #0277bd, #fafafa);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-tooltip-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$tooltip-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the tooltip style variant</td><td data-label="Sample value">'large'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$tooltip-alt-tail-size</td><td data-label="Type">Position left</td>
|
||||
<td data-label="Description">Left position for tooltip style variant's tail (calculated from value)</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$tooltip-alt-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the tooltip style variant</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$tooltip-alt-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">(Optional) Padding for the tooltip style variant</td><td data-label="Sample value">15px 20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$tooltip-alt-box-shadow</td><td data-label="Type">Box Shadow</td>
|
||||
<td data-label="Description">(Optional) Box shadow for the tooltip style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-tooltip-alt-style</span> ('large', 8px, 4px, 15px 20px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
526
docs/v2/customization/core.html
Normal file
526
docs/v2/customization/core.html
Normal file
@@ -0,0 +1,526 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Core</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, core ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content=".../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-centered { text-align: center; } .box-colored.red { background: #e53935; }
|
||||
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
|
||||
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; } }
|
||||
td:first-child, td:last-child { font-family: monospace, monospace; }
|
||||
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="core-title">
|
||||
<div class="col-sm-12">
|
||||
<h1>Core</h1>
|
||||
<p style="text-align:justify">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><br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">Before applying any typography and styling rules, some resets need to be applied to make sure that different elements display consistently on all browsers. The <strong>core</strong> module utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0 to apply those much needed resets and fixes. However, to keep the framework small, we removed some rules that only help with legacy browser support and also tweaked a lot of the rules around to use customizable variables so no duplicate rules are applied, taking up unnecessary space. The typography rules in <strong>core</strong> deal with a page's basics, like fonts and styling of headings and paragraphs, horizontal rules, colors, margins, padding etc.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p style="text-align:justify">To customize the <strong>core</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="typography-headings">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Typography & headings</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>core</strong> module's typography rules are quite extensive and deal with background and foreground colors, used fonts, sizing and line height, along with heading, link and paragraph styling.</p><br/>
|
||||
<table class="striped" style="width: 100%;">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text and foregound color</td><td data-label="Sample value">#212121</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Body background color</td><td data-label="Sample value">#f5f5f5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$base-font-family</td><td data-label="Type">Font family</td>
|
||||
<td data-label="Description">Default font stack for all elements</td><td data-label="Sample value">sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$base-root-font-size</td><td data-label="Type">Font size (<code>px</code> only)</td>
|
||||
<td data-label="Description">Root font size</td><td data-label="Sample value">16px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$apply-defaults-to-all</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Applies default font sizing be to all elements<sup><a href="#typo-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$base-font-size</td><td data-label="Type">Font size (<code>em</code> or <code>rem</code> only)</td>
|
||||
<td data-label="Description">Default font sizing for all elements<sup><a href="#typo-note-one">1</a></sup></td><td data-label="Sample value">sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$base-line-height</td><td data-label="Type">Line height</td>
|
||||
<td data-label="Description">Default line height for all elements</td><td data-label="Sample value">1.5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$use-fluid-typography</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables scaling of the font size for the root elements<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$fluid-type-start-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint where fluid typography scaling starts<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$fluid-type-end-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint where fluid typography scaling ends<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$fluid-type-small-type</td><td data-label="Type">Font size (<code>px</code> only)</td>
|
||||
<td data-label="Description">Smallest root font size for fluid typography<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$fluid-type-large-type</td><td data-label="Type">Font size (<code>px</code> only)</td>
|
||||
<td data-label="Description">Largest root font size for fluid typography<sup><a href="#typo-note-two">2</a></sup></td><td data-label="Sample value">sans-serif</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$body-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the body</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$h1-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
||||
<td data-label="Description">Font size for <code><h1></code> elements</td><td data-label="Sample value">2em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$h2-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
||||
<td data-label="Description">Font size for <code><h2></code> elements</td><td data-label="Sample value">1.5em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$h3-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
||||
<td data-label="Description">Font size for <code><h3></code> elements</td><td data-label="Sample value">1.25em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$h4-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
||||
<td data-label="Description">Font size for <code><h4></code> elements</td><td data-label="Sample value">1.1em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$h5-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
||||
<td data-label="Description">Font size for <code><h5></code> elements</td><td data-label="Sample value">1em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$h6-font-size</td><td data-label="Type">Font size (<code>em</code> preferred)</td>
|
||||
<td data-label="Description">Font size for <code><h6></code> elements</td><td data-label="Sample value">0.85em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$heading-line-height</td><td data-label="Type">Line height</td>
|
||||
<td data-label="Description">Default line height for heading elements</td><td data-label="Sample value">1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$heading-font-weight</td><td data-label="Type">Font weight</td>
|
||||
<td data-label="Description">Default font weight for heading elements</td><td data-label="Sample value">500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$heading-smalltext-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Font color for <code><small></code> elements inside headings</td><td data-label="Sample value">#424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$make-heading-smalltext-block</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Makes <code><small></code> elements inside headings display below them<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$heading-smalltext-b-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
|
||||
<td data-label="Description">Font size for <code><small></code> elements inside headings<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">75%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$heading-smalltext-b-top-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Top margin for <code><small></code> elements inside headings<sup><a href="#typo-note-three">3</a></sup></td><td data-label="Sample value">-4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$paragraph-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><p></code> elements</td><td data-label="Sample value">1px 8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$bold-font-weight</td><td data-label="Type">Font weight</td>
|
||||
<td data-label="Description">Font weight for <code><b></code> and <code><strong></code> elements</td><td data-label="Sample value">700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$small-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
|
||||
<td data-label="Description">Font size for <code><small></code> elements</td><td data-label="Sample value">75%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$sup-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
|
||||
<td data-label="Description">Font size for <code><sup></code> elements</td><td data-label="Sample value">75%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$sup-top</td><td data-label="Type">Position top</td>
|
||||
<td data-label="Description">Position top for <code><sup></code> elements</td><td data-label="Sample value">-8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$sub-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
|
||||
<td data-label="Description">Font size for <code><sub></code> elements</td><td data-label="Sample value">75%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$sub-bottom</td><td data-label="Type">Position bottom</td>
|
||||
<td data-label="Description">Position bottom for <code><sub></code> elements</td><td data-label="Sample value">-4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$link-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for links (unvisited)</td><td data-label="Sample value">#0277bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$link-visited-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for links (visited)</td><td data-label="Sample value">#01579b</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$link-hover-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for links (on hover)<sup><a href="#typo-note-four">4</a></sup></td><td data-label="Sample value">#0288d1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$apply-link-hover-fade</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Applies fading to links on hover<sup><a href="#typo-note-four">4</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$link-font-weight</td><td data-label="Type">Font weight</td>
|
||||
<td data-label="Description">Font weight for links</td><td data-label="Sample value">500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$apply-link-underline</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Applies underlining to links on hover</td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="typo-note-one">The value of <code>$base-font-size</code> will only be applied if <code>$apply-defaults-to-all</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="typo-note-two">The values of <code>$fluid-type-start-breakpoint</code>, <code>$fluid-type-end-breakpoint</code>, <code>$fluid-type-small-type</code> and <code>$fluid-type-large-type</code> will only be applied if <code>$use-fluid-typography</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="typo-note-three">The values of <code>$heading-smalltext-b-font-size</code> and <code>$heading-smalltext-b-top-margin</code> will only be applied if <code>$make-heading-smalltext-block</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="typo-note-four">The value of <code>$link-hover-fore-color</code> will only be applied if <code>$apply-link-hover-fade</code> is set to <code class="fore-secondary">false</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="common-elements">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Common elements & fixes</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>core</strong> module contains a plethora of styles for horizontal rules, lists and code elements, as well as a few optional display fixes for certain other elements.</p><br/>
|
||||
<table style="width: 100%;" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$list-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><ul></code> and <code><ol></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$list-left-padding</td><td data-label="Type">Padding left</td>
|
||||
<td data-label="Description">Left padding for <code><ul></code> and <code><ol></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$horizontal-rule-line-height</td><td data-label="Type">Line height</td>
|
||||
<td data-label="Description">Line height for <code><hr></code> elements</td><td data-label="Sample value">1.25em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$horizontal-rule-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><hr></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$horizontal-rule-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><hr></code> elements<sup><a href="#other-note-one">1</a></sup></td><td data-label="Sample value">1px solid #757575</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$horizontal-rule-fancy-style</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Applies gradient styling to <code><hr></code> elements<sup><a href="#other-note-two">2</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$horizontal-rule-fancy-gradient</td><td data-label="Type">Gradient</td>
|
||||
<td data-label="Description">Gradient styling for <code><hr></code> elements<sup><a href="#other-note-two">2</a></sup></td><td data-label="Sample value">to right, #616161, #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><blockquote></code> elements</td><td data-label="Sample value">#eeeeee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><blockquote></code> elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><blockquote></code> elements</td><td data-label="Sample value">8px 10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><blockquote></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><blockquote></code> elements</td><td data-label="Sample value">1px solid #424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><blockquote></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for <code><blockquote></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-sidebar-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Style for the sidebar of <code><blockquote></code> elements</td><td data-label="Sample value">3px solid #616161</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-cite-font-size</td><td data-label="Type">Font size</td>
|
||||
<td data-label="Description">Font size for citations in <code><blockquote></code> elements</td><td data-label="Sample value">0.85em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-cite-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for citations in <code><blockquote></code> elements</td><td data-label="Sample value">#616161</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-cite-left-position</td><td data-label="Type">Position left</td>
|
||||
<td data-label="Description">Position left for citations in <code><blockquote></code> elements</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$blockquote-cite-bottom-position</td><td data-label="Type">Position bottom</td>
|
||||
<td data-label="Description">Position bottom for citations in <code><blockquote></code> elements</td><td data-label="Sample value">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$use-default-code-fonts</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Use default fonts for code elements<sup><a href="#other-note-three">3</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$code-font-family</td><td data-label="Type">Font family</td>
|
||||
<td data-label="Description">Font for code elements<sup><a href="#other-note-three">3</a></sup></td><td data-label="Sample value">monospace</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$code-element-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><code></code> elements</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$code-element-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><code></code> elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$code-element-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><code></code> elements</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$code-element-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><code></code> elements</td><td data-label="Sample value">1px solid #424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$code-element-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><code></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$code-element-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for <code><code></code> elements</td><td data-label="Sample value">0 1px 2px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$pre-element-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><pte></code> elements</td><td data-label="Sample value">12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$pre-element-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><pte></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$pre-element-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><pre></code> elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$pre-element-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><pre></code> elements</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$pre-element-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><pre></code> elements</td><td data-label="Sample value">1px solid #424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$pre-element-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><pre></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$pre-element-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for <code><pre></code> elements</td><td data-label="Sample value">0 1px 2px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$add-pre-element-sidebar</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Adds a sidebar to <code><pre></code> elements<sup><a href="#other-note-four">4</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$pre-element-sidebar-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Style of the sidebar for <code><pre></code> elements<sup><a href="#other-note-four">4</a></sup></td><td data-label="Sample value">3px solid #1565c0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$kbd-element-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><kbd></code> elements</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$kbd-element-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><kbd></code> elements</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$kbd-element-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><kbd></code> elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$kbd-element-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><kbd></code> elements</td><td data-label="Sample value">1px solid #212121</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$kbd-element-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><kbd></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$kbd-element-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for <code><kbd></code> elements</td><td data-label="Sample value">0 1px 2px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$style-samp-element</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Applies styling to <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$samp-element-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$samp-element-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$samp-element-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">#2196f3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$samp-element-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">1px solid #424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$samp-element-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$samp-element-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for <code><samp></code> elements<sup><a href="#other-note-five">5</a></sup></td><td data-label="Sample value">0 1px 2px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-dfn-fix</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Includes a display fix for <code><dfn></code> elements for Android 4.3</td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$figcaption-font-size</td><td data-label="Type">Font size (percentage preferred)</td>
|
||||
<td data-label="Description">Font size for <code><figcaption></code> elements</td><td data-label="Sample value">80%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$figcaption-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><figcaption></code> elements</td><td data-label="Sample value">#424242</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="other-note-one">The value of <code>$horizontal-rule-border-style</code> will only be applied if <code>$horizontal-rule-fancy-style</code> is set to <code class="fore-secondary">false</code>.</li>
|
||||
<li id="other-note-two">The value of <code>$horizontal-rule-fancy-gradient</code> will only be applied if <code>$horizontal-rule-fancy-style</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="other-note-three">The value of <code>$code-font-family</code> will only be applied if <code>$use-default-code-fonts</code> is set to <code class="fore-secondary">false</code>.</li>
|
||||
<li id="other-note-four">The value of <code>$pre-element-sidebar-style</code> will only be applied if <code>$add-pre-element-sidebar</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="other-note-five">The values of all the variables that refer to <code><samp></code> elements will only be applied if <code>$style-samp-element</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
217
docs/v2/customization/grid.html
Normal file
217
docs/v2/customization/grid.html
Normal file
@@ -0,0 +1,217 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Grid</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, grid ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
||||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;} }
|
||||
.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; } @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;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 #c9c9c9; margin-bottom: 0;}}
|
||||
td:first-child, td:last-child { font-family: monospace, monospace; }
|
||||
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<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-12">
|
||||
<h1>Grid</h1>
|
||||
<p style="text-align:justify">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><br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">Easy page layout is one of the main advantages of using a CSS framework over writing your own styles. The <strong>grid</strong> module utilizes the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> to provide you with a modern and responsive layout grid system for all your needs. Rules in the <strong>grid</strong> module help you create basic fluid containers for your grid and allow you to design layouts that work well on all screen sizes using a simple row and column structure. The grid system contains definitions for both fluid columns that resize according to their siblings and columns with preset sizes on different screen sizes, as well as rules that allow you to offset or move certain columns to the first or last place on the grid's row on different devices, helping you present the page in a different layout without duplicating any content. All of the rules in the module are built around accessibility, so screen readers can easily read you pages.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p style="text-align:justify">To customize the <strong>grid</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="classes-breakpoints">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Classes & breakpoints</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>grid</strong> module's systems are based on custom-named classes for containers, rows and columns, as well as reordering and ofsetting classes, breakpoints and padding.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-container-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class name for the grid system's container</td><td data-label="Sample value">'container'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-container-side-padding</td><td data-label="Type">Padding (single value)</td>
|
||||
<td data-label="Description">Left and right padding for the grid system's container</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-container-column-count</td><td data-label="Type">Integer</td>
|
||||
<td data-label="Description">Number of columns in the grid</td><td data-label="Sample value">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-column-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the grid system's columns</td><td data-label="Sample value">0 4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-row-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class name for the grid system's rows</td><td data-label="Sample value">'row'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-column-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class prefix for the grid sytem's columns</td><td data-label="Sample value">'col'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$use-four-step-grid</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Toggles the 4-step grid on or off<sup><a href="#grid-note-one">1</a></sup></td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-extra-small-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class prefix for extra small screen columns<sup><a href="#grid-note-one">1</a></sup></td><td data-label="Sample value">'xs'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-small-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">The grid system's breakpoint for small screens<sup><a href="#grid-note-one">1</a></sup></td><td data-label="Sample value">480px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-small-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class prefix for small screen columns</td><td data-label="Sample value">'sm'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-medium-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">The grid system's breakpoint for medium-sized screens</td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-medium-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class prefix for medium-sized screen columns</td><td data-label="Sample value">'md'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-large-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">The grid system's breakpoint for large screens</td><td data-label="Sample value">1280px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-large-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class prefix for large screen columns</td><td data-label="Sample value">'lg'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-parent-layout</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables rows defining the column layout of their children<sup><a href="#grid-note-two">2</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-rows-parent-layout-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class prefix for the grid's row parents<sup><a href="#grid-note-two">2</a></sup></td><td data-label="Sample value">'cols'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-column-offset-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class suffix for the grid system's offset columns</td><td data-label="Sample value">'offset'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-column-normal-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class suffix for the grid system's normal order columns</td><td data-label="Sample value">'normal'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-column-first-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class suffix for the grid system's first order columns</td><td data-label="Sample value">'first'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$grid-column-last-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">The class suffix for the grid system's last order columns</td><td data-label="Sample value">'last'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="grid-note-one">The values of <code>$grid-extra-small-prefix</code> and <code>$grid-small-breakpoint</code> will only be used if <code>$use-four-step-grid</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="grid-note-two">The value of <code>$grid-row-parent-layout-prefix</code> will only be used if <code>$include-parent-layout</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
126
docs/v2/customization/index.html
Normal file
126
docs/v2/customization/index.html
Normal file
@@ -0,0 +1,126 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Customization</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, customization, flavor ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;}
|
||||
@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
.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;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm-12">
|
||||
<h1>Customization</h1>
|
||||
<p style="text-align:justify"><strong>mini.css</strong> is built in such a way that customization is really simple. You could try out one of the <a href="../flavors">pre-defined flavors</a>, if you want, in order to get used to the framework and build something quickly and easily. However, many projects require custom styles and color palettes, which is when you need to get your hands dirty and start creating your own flavor by customizing an existing one and using mixins and variables to create your own, unique style for your brand or product. This page, along with the rest of the <strong>Customization</strong> section is aimed at developers who want to tweak the code provided with <strong>mini.css</strong> to create their own flavors for their projects, as well as active maintainers of the framework and people who just want to understand the inner workings of the codebase.</p>
|
||||
<p style="text-align:justify">Use the menu to quickly jump to the documentation of any module that you want to check out. We strongly recommend, however, that you read the general information provided in this page before you start exploring the modules' code, especially if you are not familiar with the way <strong>mini.css</strong> is structured.</p><br>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<br/>
|
||||
<h2>Introduction & basics</h2>
|
||||
<p style="text-align:justify"><strong>mini.css</strong> is written using <a href="http://sass-lang.com/">Sass</a>, a very popular CSS preprocessor. We use Sass to do four things:</p>
|
||||
<ul>
|
||||
<li>Make the code modular</li>
|
||||
<li>Create variables that can be changed on the fly</li>
|
||||
<li>Optimize the code</li>
|
||||
<li>Create reusable mixins</li>
|
||||
</ul><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h3>Modules & file structure</h3>
|
||||
<p style="text-align:justify">At the heart of <strong>mini.css</strong> are modules - groups of classes and styles that aim to solve one set of needs. There are 10 modules in <strong>mini.css</strong>, which have been already written for you. All of the modules are built using partial files, named <code>_module_name.scss</code> and placed in the <code>src/mini</code> folder. You can edit any of the modules' code and/or add your own modules, following the same structure. The only thing you need to remember to do, in order to add your module to your flavor, is to add an <code>@import</code> statement after all the required variable declarations towards the bottom of your flavor file and it will be compiled along with the rest of <strong>mini.css</strong>. Similarly, to disable a module, just comment out its <code>@import</code> statement from the flavor file.</p><br/>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<h3>Variables</h3>
|
||||
<p style="text-align:justify">Everything in <strong>mini.css</strong> is based on Sass variables. We try to make our variable names as descriptive as possible, usually using names like <code>$block-element-property-name</code>, but some things might vary a little bit. Changing the values of variables should be reasonably easy, simply navigate to the <code>src/flavors/flavor-name.scss</code> file for a pre-defined flavor and you will see a list of variables that you can tweak. Change the values as you see fit and your finalized stylesheet will reflect the changes you have made. We did our best to make everything as customizable as possible, so that different people can build entirely different flavors using the same building blocks.</p><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h3>Code optimization</h3>
|
||||
<p style="text-align:justify">Building <strong>mini.css</strong> was no small task. Making it lightweight and customizable made things even harder, because these two things don't go well together most of the time. What we did was put more of the load on the preprocessor, instead of the final file. In order to accomplish this, we optimized as much of the code as possible, using conditions, flags and other tricks, so that compiling a flavor file might take one second longer, but loading won't. If you add any code to a flavor yourself, remember not only to make it customizable, but also to optimize it as best as possible.</p><br/>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<h3>Mixins</h3>
|
||||
<p style="text-align:justify">A lot of elements and components can be styled in many ways and most of the time we want a few styles to be available, without having to rewrite everything. We utilized the <code>@mixin</code> directive of Sass wherever we could to make it possible for you to easily create styles for pre-existing components and elements without having to tweak the base code for said elements or components. Each module's mixins can be found in the corresponding <code>_module_name_mixins.scss</code> file in the <code>src/mini</code> folder. To use a mixin, simply <code>@import</code> its file and then <code>@include</code> the mixin itself, passing values to at least its mandatory parameters. We recommend you write mixins wherever possible, if you create any new modules for <strong>mini.css</strong>.</p><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">To read more about the inner workings of <strong>mini.css</strong>, please choose a module from the menu to view its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row box-centered"><div class="col-sm-12"></div></div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
668
docs/v2/customization/input_control.html
Normal file
668
docs/v2/customization/input_control.html
Normal file
@@ -0,0 +1,668 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Input Control</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, input, control, form, button ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9;}
|
||||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
.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;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
|
||||
td:first-child, td:last-child { font-family: monospace, monospace; }
|
||||
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<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-12">
|
||||
<h1>Input Control</h1>
|
||||
<p style="text-align:justify">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><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-121">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">The presentation of forms, input fields, buttons and other interactive elements is always very important for any website or app. The <strong>input_control</strong> module provides you with much needed styling improvements for all of these elements, while keeping everything simple to use and understand, as well as combine with the other modules. Forms and input elements have a clean, modern design, while some elements like checkoxes and radio buttons get a much needed facelift. Buttons have also been stylized to look the same in all browsers, while keeping their design clean and allowing for a few color and size variants. Grouping inputs and labels or buttons is also part of this module and, as always, responsiveness is an important feature. Finally, all of the components are accessible, with a few minor caveats, that are discussed in their respective section in this page.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p style="text-align:justify">To customize the <strong>input_control</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="forms-input">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Forms & input</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module's forms and input fields can be easily customized to use different sizes and colors, as well as different class names for groupping.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$form-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><form></code> elements</td><td data-label="Sample value">#eeeeee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$form-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><form></code> elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$form-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><form></code> elements</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$form-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><form></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$form-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><form></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$form-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><form></code> elements</td><td data-label="Sample value">12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$form-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for <code><form></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$fieldset-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><fieldset></code> elements</td><td data-label="Sample value">$form-back-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$fieldset-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><fieldset></code> elements</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$fieldset-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><fieldset></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$fieldset-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><fieldset></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$fieldset-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><fieldset></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$legend-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><legend></code> elements</td><td data-label="Sample value">$form-fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$legend-font-size</td><td data-label="Type">Font size</td>
|
||||
<td data-label="Description">Font size for <code><legend></code> elements</td><td data-label="Sample value">0.925em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$legend-font-weight</td><td data-label="Type">Font weight</td>
|
||||
<td data-label="Description">Font weight for <code><legend></code> elements</td><td data-label="Sample value">700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$legend-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><legend></code> elements</td><td data-label="Sample value">2px 4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$label-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><label></code> elements</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><input></code> elements</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><input></code> elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><input></code> elements</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><input></code> elements</td><td data-label="Sample value">1px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><input></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><input></code> elements</td><td data-label="Sample value">8px 12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-focus-border-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Border color for <code><input></code> elements (focused)</td><td data-label="Sample value">#0288d1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-invalid-border-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Border color for <code><input></code> elements (invalid)</td><td data-label="Sample value">#d32f2f</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-readonly-border-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Border color for <code><input></code> elements (readonly)</td><td data-label="Sample value">#bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-readonly-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><input></code> elements (readonly)</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-placeholder-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for placeholder text of <code><input></code> elements</td><td data-label="Sample value">#616161</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-disabled-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Opacity of <code><input></code> elements (disabled)</td><td data-label="Sample value">0.75</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$select-padding-right</td><td data-label="Type">Padding right</td>
|
||||
<td data-label="Description">Right padding of <code><select></code> elements</td><td data-label="Sample value">20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-group-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for input groups</td><td data-label="Sample value">'input-group'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-fluid-input-group</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables fluid input groups<sup><a href="#forms-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-group-fluid-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for fluid input groups<sup><a href="#forms-note-one">1</a></sup></td><td data-label="Sample value">'fluid'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-group-mobile-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint for fluid input groups on mobile devices<sup><a href="#forms-note-one">1</a></sup></td><td data-label="Sample value">767px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-vertical-input-group</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables vertical input groups<sup><a href="#forms-note-two">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$input-group-vertical-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for vertical input groups<sup><a href="#forms-note-two">1</a></sup></td><td data-label="Sample value">'fluid'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$hide-file-inputs</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Hides all <code><input <span class="fore-secondary">type</span>="<span class="fore-primary">file</span>"></code> elements, allowing access only via the use of labels</td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="forms-note-one">The values of <code>$input-group-fluid-name</code> and <code>$input-group-mobile-breakpoint</code> will only be used if <code>$include-fluid-input-group</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="forms-note-two">The value of <code>$input-group-vertical-name</code> will only be used if <code>$include-vertical-input-group</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="checkbox-radio">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Checkboxes & radio buttons</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module's checkbox and radio button elements are based on custom rules and depend on the use of <code><label></code> elements and input groups to be stylized and properly displayed.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$checkbox-size</td><td data-label="Type">Size (single value, <code>px</code> preferred)</td>
|
||||
<td data-label="Description">The size of checkbox/radio elements (determines multiple values of the elements)</td><td data-label="Sample value">16px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$checkbox-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for checkbox/radio elements</td><td data-label="Sample value">$input-back-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$checkbox-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for checkbox/radio elements</td><td data-label="Sample value">$input-fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$checkbox-border-thickness</td><td data-label="Type">Border width</td>
|
||||
<td data-label="Description">Border width for checkbox/radio elements</td><td data-label="Sample value">1px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$checkbox-border-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Border color for checkbox/radio elements</td><td data-label="Sample value">#bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$checkbox-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for checkbox/radio elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$checkbox-focus-border-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Border color for checkbox/radio elements (focused)</td><td data-label="Sample value">#0288d1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$checkbox-bottom-spacing</td><td data-label="Type">Position top (<code>px</code> preferred)</td>
|
||||
<td data-label="Description">Position top spacing for checkbox/radio elements</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$checkbox-disabled-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Opacity for checkbox/radio elements (disabled)</td><td data-label="Sample value">0.75</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$checkbox-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for checkbox/radio elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="checkbox-note-one">It is highly recommended to stick to one unit type for the definitions of checkbox/radio elements (our suggestion is <code>px</code>).</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="switch">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Switches</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module contains custom classes and styles for defining switch components.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-switch</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">'switch'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-bar-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">#bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-on-bar-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the bar of switch components (when turned on)<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">#bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-bar-width</td><td data-label="Type">Width</td>
|
||||
<td data-label="Description">Text color for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">28px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-bar-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Text color for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">14px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-bar-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">1px solid #212121</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-bar-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-bar-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for the bar of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-bottom-spacing</td><td data-label="Type">Position bottom (<code>px</code> preferred)</td>
|
||||
<td data-label="Description">Position bottom spacing for switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-knob-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-on-knob-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the knob of switch components (when turned on)<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">#0277bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-knob-width</td><td data-label="Type">Width</td>
|
||||
<td data-label="Description">Text color for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-knob-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Text color for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-knob-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">1px solid #212121</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-knob-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">100%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$switch-knob-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for the knob of switch components<sup><a href="#switch-note-one">1</a></sup></td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="switch-note-one">The values used in the switch components will only be used if <code>$include-switch</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="buttons">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Button & button groups</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module's button elements are highly customizable, along with the button groups that can be used in combination with them.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for button elements</td><td data-label="Sample value">#bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for button elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for button elements</td><td data-label="Sample value">1px solid #9e9e9e</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for button elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for button elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for button elements</td><td data-label="Sample value">8px 12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for button elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-back-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Background opacity for button elements (default)</td><td data-label="Sample value">0.65</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-hover-back-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Background opacity for button elements (focused)</td><td data-label="Sample value">0.8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-disabled-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Opacity for button elements (focused)</td><td data-label="Sample value">0.65</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-class-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for button elements</td><td data-label="Sample value">'button'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-group-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for button groups</td><td data-label="Sample value">'button-group'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-group-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for button groups</td><td data-label="Sample value">1px solid #9e9e9e</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-group-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for button groups</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-group-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for button groups</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$button-group-mobile-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint for button groups on mobile devices</td><td data-label="Sample value">767px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="button-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Button mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module contains a couple of mixins for adding custom styles to button elements (color and style variants).</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-button-alt-color (<span class="fore-primary">$button-alt-name</span>, <span class="fore-primary">$button-alt-back-color</span>, <span class="fore-primary">$button-alt-back-opacity</span>, <span class="fore-primary">$button-alt-hover-back-opacity</span>, <span class="fore-tertiary">$button-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new button color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-button-alt-style (<span class="fore-primary">$button-alt-name</span>, <span class="fore-primary">$button-alt-border-style</span>, <span class="fore-primary">$button-alt-border-radius</span>, <span class="fore-primary">$button-alt-padding</span>, <span class="fore-primary">$button-alt-margin</span>)</td>
|
||||
<td data-label="Description">Creates a new button style variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-button-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the button color variant</td><td data-label="Sample value">'primary'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the button color variant</td><td data-label="Sample value">#0277bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-back-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Background opacity for the button color variant (default)</td><td data-label="Sample value">0.9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-hover-back-opacity</td><td data-label="Type">Opacity</td>
|
||||
<td data-label="Description">Background opacity for the button color variant (focused)</td><td data-label="Sample value">1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Text color for the button color variant</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-button-alt-color</span> ('primary', #0277bd, 0.9, 1, #fafafa);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-button-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the button style variant</td><td data-label="Sample value">'large'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the button style variant</td><td data-label="Sample value">2px solid #9e9e9e</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the button style variant</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the button style variant</td><td data-label="Sample value">12px 18px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$button-alt-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the button style variant</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-button-alt-style</span> ('large', 2px solid #9e9e9e, 4px, 18px, 10px);</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="switch-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Switch mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>input_control</strong> module contains a mixin for adding custom color variants to switches.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definition</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-switch-alt-color (<span class="fore-primary">$switch-alt-name</span>, <span class="fore-primary">$switch-alt-on-knob-back-color</span>, <span class="fore-tertiary">$switch-alt-on-bar-back-color</span>, <span class="fore-tertiary">$switch-alt-knob-back-color</span>, <span class="fore-tertiary">$switch-alt-bar-back-color</span>)</td>
|
||||
<td data-label="Description">Creates a new switch color variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-switch-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$switch-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the switch color variant</td><td data-label="Sample value">'primary'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$switch-alt-on-knob-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the knob of the switch component (when turned on)</td><td data-label="Sample value">#e53935</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$switch-alt-on-bar-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Background color for the bar of the switch component (when turned on)</td><td data-label="Sample value">#bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$switch-alt-knob-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Background color for the knob of the switch component</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$switch-alt-bar-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Background color for the bar of the switch component</td><td data-label="Sample value">#bdbdbd</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-switch-alt-color</span> ('secondary', #e53935, #bdbdbd, #e0e0e0, #bdbdbd);</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
445
docs/v2/customization/navigation.html
Normal file
445
docs/v2/customization/navigation.html
Normal file
@@ -0,0 +1,445 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Navigation</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, navigation ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {box-sizing: border-box; border-right: 1px solid #c9c9c9;}
|
||||
@media (max-width: 1279px){.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
.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;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
td:first-child, td:last-child { font-family: monospace, monospace; }
|
||||
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<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-121">
|
||||
<h1>Navigation</h1>
|
||||
<p style="text-align:justify">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 menus.</p><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The <strong>navigation</strong> module takes a step back from the complicated menu and navigation design paradigms of the modern web, using HTML5 elements (i.e. <code>header</code>, <code>nav</code> and <code>footer</code>) for basic navigation, while providing fully accessibility for screen readers. Apart from the simple horizontal navigation (headers) and vertical menus (sidebars), we opted to add a responsive slide-in drawer menu that works well with any page layout. Finally, footers are also part of the <strong>navigation</strong> module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p style="text-align:justify">To customize the <strong>navigation</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="header">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Header</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>navigation</strong> module contains definitions for styling the <code><header></code> element, along with its contents (logo and links).</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">The height of the <code><header></code> element</td><td data-label="Sample value">44px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the <code><header></code> element</td><td data-label="Sample value">#263238</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for the <code><header></code> element</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the <code><header></code> element</td><td data-label="Sample value">1px solid #424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the <code><header></code> element</td><td data-label="Sample value">0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the <code><header></code> element</td><td data-label="Sample value">2px 8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for the <code><header></code> element</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-logo-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the <code><header></code> element's logo</td><td data-label="Sample value">'logo'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-logo-font-size</td><td data-label="Type">Font size</td>
|
||||
<td data-label="Description">Font size for the <code><header></code> element's logo</td><td data-label="Sample value">1.75em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-logo-line-height</td><td data-label="Type">Line height</td>
|
||||
<td data-label="Description">Line height for the <code><header></code> element's logo</td><td data-label="Sample value">1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-logo-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the <code><header></code> element's logo</td><td data-label="Sample value">1px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-logo-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the <code><header></code> element's logo</td><td data-label="Sample value">3px 0 0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-link-hover-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Hover color for the <code><header></code> element's links</td><td data-label="Sample value">#37474f</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-link-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the <code><header></code> element's links</td><td data-label="Sample value">2px 0 0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-header-sticky</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables sticky <code><header></code> elements<sup><a href="#header-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$header-sticky-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the sticky <code><header></code> element<sup><a href="#header-note-one">1</a></sup></td><td data-label="Sample value">'sticky'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="header-note-one">The value of <code>$header-sticky-name</code> will only be used if <code>$include-header-sticky</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="navigation-bar">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Navigation bar</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>navigation</strong> module contains definitions for styling <code><nav></code> elements, along with the links they contain.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><nav></code> elements</td><td data-label="Sample value">#eceff1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><nav></code> elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><nav></code> elements</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><nav></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><nav></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><nav></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for <code><nav></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-link-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><nav></code> elements' links</td><td data-label="Sample value">#1565c0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-sublink-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class prefix for <code><nav></code> elements' subcategories</td><td data-label="Sample value">'sublink'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-sublink-depth</td><td data-label="Type">Integer</td>
|
||||
<td data-label="Description">Amount of <code><nav></code> elements' subcategories</td><td data-label="Sample value">2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-sublink-padding-left</td><td data-label="Type">Padding left</td>
|
||||
<td data-label="Description">Left padding for <code><nav></code> elements' subcategories</td><td data-label="Sample value">12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-include-sublink-bar</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-sublink-bar-left-position</td><td data-label="Type">Position left</td>
|
||||
<td data-label="Description">Left position of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">3px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-sublink-bar-width</td><td data-label="Type">Border width</td>
|
||||
<td data-label="Description">Width of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">1px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$nav-sublink-bar-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Color of the sidebar for <code><nav></code> elements' subcategories<sup><a href="#nav-note-one">1</a></sup></td><td data-label="Sample value">#263238</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="nav-note-one">The values of <code>$nav-sublink-bar-left-position</code>, <code>$nav-sublink-bar-width</code> and <code>$nav-sublink-bar-color</code> will only be used if <code>$nav-include-sublink-bar</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="drawer">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Drawer</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>navigation</strong> module contains custom classes and definitions for creating and styling a responsive drawer component.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the drawer component</td><td data-label="Sample value">'drawer'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the drawer component</td><td data-label="Sample value">#eceff1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the drawer component</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the drawer component</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the drawer component</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-width</td><td data-label="Type">Width</td>
|
||||
<td data-label="Description">Width for the drawer component</td><td data-label="Sample value">320px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the drawer component</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for the drawer component</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-mobile-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint for the drawer component on mobile devices</td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-normal-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">height of the drawer component on medium-sized and larger screens<sup><a href="#drawer-note-one">1</a></sup></td><td data-label="Sample value">calc(100vh - 48px)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-right-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name of the right-aligned variant of the drawer component</td><td data-label="Sample value">'right'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-peristent-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name of the non-responsive variant of the drawer component</td><td data-label="Sample value">'persistent'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-toggle-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name of the toggle button of the drawer component</td><td data-label="Sample value">'drawer-toggle'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-toggle-font-size</td><td data-label="Type">Font size</td>
|
||||
<td data-label="Description">Font size of the toggle button of the drawer component</td><td data-label="Sample value">2.5em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-toggle-line-height</td><td data-label="Type">Line height</td>
|
||||
<td data-label="Description">Line height of the toggle button of the drawer component</td><td data-label="Sample value">0.125</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-toggle-top</td><td data-label="Type">Position top</td>
|
||||
<td data-label="Description">Top position of the toggle button of the drawer component</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-close-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name of the close button of the drawer component</td><td data-label="Sample value">'close'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-close-top</td><td data-label="Type">Position top</td>
|
||||
<td data-label="Description">Top position of the close button of the drawer component</td><td data-label="Sample value">12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$drawer-close-right</td><td data-label="Type">Position right</td>
|
||||
<td data-label="Description">Right position of the close button of the drawer component<td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="drawer-note-one">The values of <code>$drawer-normal-height</code> <em>should be</em> the calculated value of the screen height minus the total height of the <code><header></code> element for best results.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="footer">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Footer</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>navigation</strong> module contains various definitions for customizing the appearance of the <code><footer></code> element.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$footer-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the <code><footer></code> element</td><td data-label="Sample value">#263238</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$footer-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for the <code><footer></code> element</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$footer-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the <code><footer></code> element</td><td data-label="Sample value">1px solid #424242</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$footer-font-size</td><td data-label="Type">Font size</td>
|
||||
<td data-label="Description">Font size for the <code><footer></code> element</td><td data-label="Sample value">85%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$footer-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the <code><footer></code> element</td><td data-label="Sample value">18px 0 0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$footer-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for the <code><footer></code> element</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$footer-link-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for the <code><footer></code> element's links</td><td data-label="Sample value">#039be5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-footer-sticky</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables sticky <code><footer></code> elements<sup><a href="#footer-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$footer-sticky-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the sticky <code><footer></code> element<sup><a href="#footer-note-one">1</a></sup></td><td data-label="Sample value">'sticky'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="footer-note-one">The value of <code>$footer-sticky-name</code> will only be used if <code>$include-footer-sticky</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
390
docs/v2/customization/progress.html
Normal file
390
docs/v2/customization/progress.html
Normal file
@@ -0,0 +1,390 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Progress</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, progress ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
||||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
.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;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
td:first-child, td:last-child { font-family: monospace, monospace; }
|
||||
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<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-12">
|
||||
<h1>Progress</h1>
|
||||
<p style="text-align:justify">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><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">Progress indicators are very common UI elements for almost any website and web app, as they help communicate vital information such as the fact that a process is being executed in the background, informing the user that they should wait for it to complete before proceeding. The <strong>progress</strong> module provides you with two essential tools to communicate this information: the <code><progress></code> HTML element, which is pre-styled and compatible with modern browsers to help you communicate information about the percentage of a task and the <code>.spinner-donut</code> class that allows you to create an animated spinner that communicates that something is loading currently and will continue doing so for an indefinite amount of time. Both elements come with their own color and size variants and are fully accessible.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p style="text-align:justify">To customize the <strong>progress</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="progress-bar">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Progress bar</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>progress</strong> module's styling of <code><progress></code> elements is highly customizable.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><progress></code> elements</td><td data-label="Sample value">#eeeeee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Progress bar color for <code><progress></code> elements</td><td data-label="Sample value">#01579b</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Height for <code><progress></code> elements</td><td data-label="Sample value">14px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-max-value</td><td data-label="Type">integer</td>
|
||||
<td data-label="Description">Arithmetic max value for <code><progress></code> elements</td><td data-label="Sample value">1000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><progress></code> elements</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><progress></code> elements</td><td data-label="Sample value">1px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-top-bottom-margin</td><td data-label="Type">Margin (single value)</td>
|
||||
<td data-label="Description">Top and bottom margin for <code><progress></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-left-right-margin</td><td data-label="Type">Margin (single value)</td>
|
||||
<td data-label="Description">Left and right margin for <code><progress></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for <code><progress></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="donut-spinner">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Donut spinner</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>progress</strong> module's donut spinner uses a custom class and a few variables for custmization.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$spinner-donut-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for donut spinner components</td><td data-label="Sample value">'spinner-donut'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$spinner-donut-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for donut spinner components</td><td data-label="Sample value">#e3f2fd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$spinner-donut-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Foreground color for donut spinner components</td><td data-label="Sample value">#1565c0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$spinner-donut-border-thickness</td><td data-label="Type">Border width</td>
|
||||
<td data-label="Description">Border width for donut spinner components</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$spinner-donut-size</td><td data-label="Type">Size (single value, <code>px</code> preferred)</td>
|
||||
<td data-label="Description">The size of donut spinner components (determines multiple values of the element)</td><td data-label="Sample value">20px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="progress-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Progress bar mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>progress</strong> module contains a couple of mixins for adding custom styles to <code><progress></code> elements (color and style variants), as well as a mixin for creating inline progress bars.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-progress-alt-color (<span class="fore-primary">$progress-alt-name</span>, <span class="fore-primary">$progress-alt-fore-color</span>, <span class="fore-tertiary">$progress-alt-back-color</span>)</td>
|
||||
<td data-label="Description">Creates a new <code><progress></code> color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-progress-alt-style (<span class="fore-primary">$progress-alt-name</span>, <span class="fore-primary">$progress-alt-height</span>,<span class="fore-tertiary">$progress-alt-top-bottom-margin</span>,<span class="fore-tertiary">$progress-alt-left-right-margin</span>, <span class="fore-tertiary">$progress-alt-border-style</span>, <span class="fore-tertiary">$progress-alt-border-radius</span>, <span class="fore-tertiary">$progress-alt-box-shadow</span>)</td>
|
||||
<td data-label="Description">Creates a new <code><progress></code> style variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-progress-inline (<span class="fore-primary">$progress-inline-name</span>, <span class="fore-primary">$progress-inline-width</span>)</td>
|
||||
<td data-label="Description">Creates a new <code><progress></code> style variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-progress-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$progress-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the <code><progress></code> color variant</td><td data-label="Sample value">'secondary'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$progress-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Foreground color for the <code><progress></code> color variant</td><td data-label="Sample value">#e53935</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$progress-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Background color for the <code><progress></code> color variant</td><td data-label="Sample value">#eeeeee</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-progress-alt-color</span> ('secondary', #e53935, #eeeeee);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-progress-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$progress-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the <code><progress></code> style variant</td><td data-label="Sample value">'nano'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$progress-alt-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Height for the <code><progress></code> style variant</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-alt-top-bottom-margin</td><td data-label="Type">Margin (single value)</td>
|
||||
<td data-label="Description">(Optional) Top and bottom margin for the <code><progress></code> style variant</td><td data-label="Sample value">1px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-alt-left-right-margin</td><td data-label="Type">Margin (single value)</td>
|
||||
<td data-label="Description">(Optional) Left and right margin for the <code><progress></code> elements</td><td data-label="Sample value">1px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-alt-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">(Optional) Border style for the <code><progress></code> style variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-alt-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">(Optional) Border radius for the <code><progress></code> style variant</td><td data-label="Sample value">1px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$progress-alt-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">(Optional) Box shadow for the <code><progress></code> style variant</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-progress-alt-style</span> ('nano', 2px, 1px, 1px, 1px solid #bdbdbd, 1px, 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-progress-inline</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$progress-inline-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the <code><progress></code> inline variant</td><td data-label="Sample value">'inline'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$progress-inline-width</td><td data-label="Type">Width (percentage preferred)</td>
|
||||
<td data-label="Description">Width of the <code><progress></code> inline variant</td><td data-label="Sample value">60%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-progress-inline</span> ('inline', 60%);</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="spinner-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Donut spinner mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>progress</strong> module contains a couple of mixins for adding custom styles to donut spinners (color and style variants).</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-spinner-donut-alt-color (<span class="fore-primary">$spinner-donut-alt-name</span>, <span class="fore-primary">$spinner-donut-alt-back-color</span>, <span class="fore-primary">$spinner-donut-alt-fore-color</span>)</td>
|
||||
<td data-label="Description">Creates a new donut spinner color variant using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-spinner-donut-alt-style (<span class="fore-primary">$spinner-donut-alt-name</span>, <span class="fore-primary">$spinner-donut-alt-size</span>, <span class="fore-tertiary">$spinner-donut-alt-border-thickness</span>)</td>
|
||||
<td data-label="Description">Creates a new donut spinner style variant using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-spinner-donut-alt-color</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$spinner-donut-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the donut spinner color variant</td><td data-label="Sample value">'secondary'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$spinner-donut-alt-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the donut spinner color variant</td><td data-label="Sample value">#ffebee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$spinner-donut-alt-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">(Optional) Text color for the donut spinner color variant</td><td data-label="Sample value">#c62828</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-spinner-donut-alt-color</span> ('secondary', #ffebee, #c62828);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-spinner-donut-alt-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$spinner-donut-alt-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the donut spinner style variant</td><td data-label="Sample value">'large'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$spinner-donut-alt-size</td><td data-label="Type">Size (single value, <code>px</code> preferred)</td>
|
||||
<td data-label="Description">Size of the donut spinner style variant (determines multiple values of the element)</td><td data-label="Sample value">32px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$spinner-donut-alt-border-thickness</td><td data-label="Type">Border width</td>
|
||||
<td data-label="Description">(Optional) Border thickness for the donut spinner style variant</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-alert-alt-style</span> ('large', 32px, 6px);</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
200
docs/v2/customization/tab.html
Normal file
200
docs/v2/customization/tab.html
Normal file
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Tab</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, tab, tabs ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
||||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
|
||||
.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;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
td:first-child, td:last-child { font-family: monospace, monospace; }
|
||||
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<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-12">
|
||||
<h1>Tab</h1>
|
||||
<p style="text-align:justify">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><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">Spoilers, collapses, accordions, tabs, carousels have been a staple of modern design for quite a long time. All of these elements are implemented using the <strong>tab</strong> module's single generic container. The tab container replaces all of these design paradigms with one component that is very flexible and responsive in order to let you present your website or app's content any way you like. Tabbed navigation is very easy to implement, while collapse, accordion and carousel components use the stacked architecture of tabs. As usual, the tab container is responsive and accessible, allowing you to deliver your content properly to all devices and users.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p style="text-align:justify">To customize the <strong>tab</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="tab-styling">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Tab styling</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>tab</strong> module contains definitions for tab styling, using custom classes and structures.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-container-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for tab components' containers</td><td data-label="Sample value">'tabs'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-container-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for tab components' containers</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for tab components</td><td data-label="Sample value">1px solid #9e9e9e</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for tab components</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$$tab-selected-border-color</td><td data-label="Type">Border bottom color</td>
|
||||
<td data-label="Description">Border bottom color for tab components' selected label</td><td data-label="Sample value">#0277bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for tab components' labels (default)</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-selected-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for tab components' labels (selected)</td><td data-label="Sample value">#eeeeee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for tab components' labels (default)</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-selected-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for tab components' labels (selected)</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-hover-opacity</td><td data-label="Type">Opaciy</td>
|
||||
<td data-label="Description">Opacity for tab components' labels (hover)</td><td data-label="Sample value">0.8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for tab components' labels</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-label-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Height for tab components' labels</td><td data-label="Sample value">26px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-panel-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for tab components' panels</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-panel-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for tab components' panels</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-panel-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for tab components' panels</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-panel-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Height for tab components' panels</td><td data-label="Sample value">400px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-stacked-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint for tabs components' mobile view</td><td data-label="Sample value">767px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$tab-stacked-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for stacked tab components</td><td data-label="Sample value">'stacked'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
231
docs/v2/customization/table.html
Normal file
231
docs/v2/customization/table.html
Normal file
@@ -0,0 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Table</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, table ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
||||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
|
||||
.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; } @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
td:first-child, td:last-child { font-family: monospace, monospace; }
|
||||
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<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-12-1">
|
||||
<h1>Table</h1>
|
||||
<p style="text-align:justify">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><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">Presenting information the right way is very important, especially so when dealing with large amounts of data. The <strong>table</strong> module reinvents tabular data presentation, using modern styling and responsiveness to help make tables fun again for all users no matter the device size. Tables can be either vertical or horizontal, both collapsing to a card view on smaller devices, so that they are easier to view properly. Horizontal tables are also flexible, allowing you to take as little space as possible, while still providing your users with a pleasant way to view their data. Finally, like in most CSS frameworks nowadays, you can stripe your tables to make reading them slightly less tiresome for your users' eyes. Note that all of the table variants are fully accessible.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p style="text-align:justify">To customize the <strong>table</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="table-styling">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Table styling</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>table</strong> module contains definitions for tables and table variants.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for <code><table></code> elements</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for <code><table></code> elements</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><table></code> elements</td><td data-label="Sample value">0 auto</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for <code><table></code> elements</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-caption-font-size</td><td data-label="Type">Font sizer</td>
|
||||
<td data-label="Description">Font size for <code><caption></code> elements</td><td data-label="Sample value">1.5em</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-caption-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for <code><caption></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-row-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><tr></code> elements</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-column-padding</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding for <code><td></code> and <code><th></code> elements</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-head-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><th></code> elements</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-head-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><th></code> elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-body-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for <code><td></code> elements</td><td data-label="Sample value">#fafafa</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-body-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Text color for <code><td></code> elements</td><td data-label="Sample value">$fore-color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-mobile-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">Breakpoint for <code><table></code> elements' mobile view</td><td data-label="Sample value">767px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-mobile-card-spacing</td><td data-label="Type">Margin bottom</td>
|
||||
<td data-label="Description">Bottom margin for <code><table></code> elements' cards in mobile view</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-mobile-card-label</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Attribute used to replace headers for <code><table></code> elements in mobile view</td><td data-label="Sample value">'data-label'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-mobile-label-font-weight</td><td data-label="Type">Font weight</td>
|
||||
<td data-label="Description">Font weight for the labels of <code><table></code> elements' cards in mobile view</td><td data-label="Sample value">700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-horizontal-table</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables horizontal <code><table></code> elements<sup><a href="#table-note-one">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-horizontal-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for horizontal <code><table></code> elements<sup><a href="#table-note-one">1</a></sup></td><td data-label="Sample value">'horizontal'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-scrollable-table</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables scrollable <code><table></code> elements<sup><a href="#table-note-two">1</a></sup></td><td data-label="Sample value">true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-scrollable-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for scrollable <code><table></code> elements<sup><a href="#table-note-two">1</a></sup></td><td data-label="Sample value">'scrollable'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-scrollable-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Table for scrollable <code><table></code> elements<sup><a href="#table-note-two">1</a></sup></td><td data-label="Sample value">400px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-not-responsive-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for preset <code><table></code> elements</td><td data-label="Sample value">'preset'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-striped-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for striped <code><table></code> elements</td><td data-label="Sample value">'striped'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$table-striped-alt-body-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Secondary background color for striped <code><table></code> elements</td><td data-label="Sample value">#eeeeee</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="table-note-one">The value of <code>$table-horizontal-name</code> will only be used if <code>$include-horizontal-table</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="table-note-one">The valuse of <code>$table-scrollable-name</code> and <code>$table-scrollable-height</code> will only be used if <code>$include-scrollable-table</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
580
docs/v2/customization/utility.html
Normal file
580
docs/v2/customization/utility.html
Normal file
@@ -0,0 +1,580 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Utility</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, utility, helper, classes, utilities ">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="../page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="../favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#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: #b71c1c; }
|
||||
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
||||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #c9c9c9; }
|
||||
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
|
||||
.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;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
td:first-child, td:last-child { font-family: monospace, monospace; }
|
||||
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="sticky">
|
||||
<a href="../index" class="logo"><span id="header-logo">m</span></a>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="../index" class="button hidden-sm">Introduction</a> <a href="../modules" class="button hidden-sm">Modules</a>
|
||||
<a href="../flavors" class="button hidden-sm">Flavors</a> <a href="../templates" class="button hidden-sm">Templates</a>
|
||||
<a href="../customization" class="button hidden-sm">Customization</a> <a href="../quick_reference" class="button hidden-sm">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> GitHub</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="../index"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="../modules"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="../flavors"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="../templates"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<h4 style="margin-left: 0;">Customization</h4> <a href="core#core-title">Core</a>
|
||||
<a href="core#typography-headings" class="sublink-1">Typography & headings</a>
|
||||
<a href="core#common-elements" class="sublink-1">Common elements & fixes</a>
|
||||
<br/> <a href="grid#grid-title">Grid</a>
|
||||
<a href="grid#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
||||
<br/> <a href="input_control#input-control-title">Input Control</a>
|
||||
<a href="input_control#forms-input" class="sublink-1">Forms & input</a> <a href="input_control#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control#switch" class="sublink-1">Switches</a>
|
||||
<a href="input_control#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control#switch-mixins" class="sublink-1">Switch mixins</a>
|
||||
<br/> <a href="navigation#navigation-title">Navigation</a>
|
||||
<a href="navigation#header" class="sublink-1">Header</a> <a href="navigation#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation#drawer" class="sublink-1">Drawer</a> <a href="navigation#footer" class="sublink-1">Footer</a>
|
||||
<br/> <a href="table#table-title">Table</a>
|
||||
<a href="table#table-styling" class="sublink-1">Table styling</a>
|
||||
<br/> <a href="card#card-title">Card</a>
|
||||
<a href="card#cards-sections" class="sublink-1">Cards and sections</a> <a href="card#card-mixins" class="sublink-1">Card mixins</a>
|
||||
<br/> <a href="tab#tab-title">Tab</a>
|
||||
<a href="tab#tab-styling" class="sublink-1">Tab styling</a>
|
||||
<br/> <a href="contextual#contextual-title">Contextual</a>
|
||||
<a href="contextual#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual#toasts" class="sublink-1">Toasts</a>
|
||||
<a href="contextual#tooltips" class="sublink-1">Tooltips</a> <a href="contextual#modals" class="sublink-1">Modals</a>
|
||||
<a href="contextual#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
||||
<a href="contextual#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
||||
<br/> <a href="progress#progress-title">Progress</a>
|
||||
<a href="progress#progress-bar" class="sublink-1">Progress bar</a> <a href="progress#donut-spinner" class="sublink-1">Donut spinner</a>
|
||||
<a href="progress#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
||||
<br/> <a href="utility#utility-title">Utility</a>
|
||||
<a href="utility#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="utility#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
||||
<a href="utility#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
||||
<a href="utility#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
||||
<a href="../quick_reference"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<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-12">
|
||||
<h1>Utility</h1>
|
||||
<p style="text-align:justify">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><br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-121">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p style="text-align:justify">Every website or app has different needs and no CSS framework can predict them all. The <strong>utility</strong> module addresses this issue by providing you with a handful of utility and helper classes to make common, repetitive declarations easier. These classes include, but are not limited to, generic border styling and shadows, some responsive sizing and spacing utilities and a few other things, like a close icon, breadcrumbs styling and visiblity helpers for screen readers.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p style="text-align:justify">To customize the <strong>utility</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="visibility-legacy">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Visibility helpers & legacy features</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>utility</strong> module's visiblity helpers use a couple of custom classes, while certain legacy features are also available via certain variables and custom class definitions.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$hidden-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for hidden elements</td><td data-label="Sample value">'hidden'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$visually-hidden-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for visually hidden elements</td><td data-label="Sample value">'visually-hidden'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-floats</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables floats (legacy feature)<sup><a href="#util-note-one">1</a></sup></td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$float-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class prefix for float classes<sup><a href="#util-note-one">1</a></sup></td><td data-label="Sample value">'float'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-clearfix</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables the clearfix (legacy feature)<sup><a href="#util-note-two">2</a></sup></td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$clearfix-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for clearfix<sup><a href="#util-note-two">2</a></sup></td><td data-label="Sample value">'clearfix'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$include-center-block</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">Enables the center block (legacy feature)<sup><a href="#util-note-three">3</a></sup></td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$center-block-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for center block<sup><a href="#util-note-three">3</a></sup></td><td data-label="Sample value">'center-block'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes:</h3>
|
||||
<ol style="text-align:justify">
|
||||
<li id="util-note-one">The value of <code>$float-prefix</code> will only be used if <code>$include-floats</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="util-note-two">The value of <code>$clearfix-name</code> will only be used if <code>$include-clearfix</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
<li id="util-note-three">The value of <code>$center-block-name</code> will only be used if <code>$include-center-block</code> is set to <code class="fore-tertiary">true</code>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="breadcrumbs">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Breadcrumbs</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>utility</strong> module's breadcrumbs use a custom class and a few varaibles to allow you to customize their appearance.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the breadcrumbs component</td><td data-label="Sample value">'breadcrumbs'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the breadcrumbs component</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-margin</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin for the breadcrumbs component</td><td data-label="Sample value">10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-height</td><td data-label="Type">Height</td>
|
||||
<td data-label="Description">Height for the breadcrumbs component</td><td data-label="Sample value">32px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-separator-width</td><td data-label="Type">Width</td>
|
||||
<td data-label="Description">Width of the breadcrumbs component's separator</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-border-style</td><td data-label="Type">Border</td>
|
||||
<td data-label="Description">Border style for the breadcrumbs component</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-border-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the breadcrumbs component</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$breadcrumbs-box-shadow</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for the breadcrumbs component</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="close-icon">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Close icon</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>utility</strong> module's close icon uses a custom class and a few variable to customize its appearance.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Variables</caption>
|
||||
<thead>
|
||||
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Variable">$close-icon-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the close icon component</td><td data-label="Sample value">'close'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$close-icon-size</td><td data-label="Type">Font size</td>
|
||||
<td data-label="Description">Size of the close icon component</td><td data-label="Sample value">32px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$close-icon-back-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Background color for the close icon component</td><td data-label="Sample value">#e0e0e0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Variable">$close-icon-fore-color</td><td data-label="Type">Color</td>
|
||||
<td data-label="Description">Foreground color for the close icon component</td><td data-label="Sample value">#212121</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="borders-shadows-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Generic border & shadow mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>utility</strong> module contains a few mixins for creating generic borders, border styles and shadows.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-border-generic (<span class="fore-primary">$border-generic-name</span>)</td>
|
||||
<td data-label="Description">Creates a new class that applies a generic border, based on the specified value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-border-radial-style (<span class="fore-primary">$border-radial-name</span>, <span class="fore-primary">$border-radial-radius</span>)</td>
|
||||
<td data-label="Description">Creates a new class that applies a generic radial border, based on the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-box-shadow-generic (<span class="fore-primary">$box-shadow-name</span>, <span class="fore-primary">$box-shadow-value</span>)</td>
|
||||
<td data-label="Description">Creates a new class that applies a generic box shadow, based on the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-border-generic</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$border-generic-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the generic border class</td><td data-label="Sample value">'bordered'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-border-generic</span> ('bordered');</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-border-radial-style</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$border-radial-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the generic radial border class</td><td data-label="Sample value">'rounded'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$border-radial-radius</td><td data-label="Type">Border radius</td>
|
||||
<td data-label="Description">Border radius for the generic radial border class</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-border-radial-style</span> ('rounded', 2px);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-box-shadow-generic</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$box-shadow-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the generic box shadow class</td><td data-label="Sample value">'shadow-small'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$box-shadow-value</td><td data-label="Type">Box shadow</td>
|
||||
<td data-label="Description">Box shadow for the generic box shadow class</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-box-shadow-generic</span> ('shadow-small', 0 1px 3px rgba(0,0,0, 0.1));</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="responsive-sizing-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Responsive sizing & spacing mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>utility</strong> module contains a couple of mixins for creating responsive sizing and spacing classes.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-margin-responsive (<span class="fore-primary">$margin-name</span>, <span class="fore-primary">$margin-small-value</span>, <span class="fore-primary">$margin-medium-value</span>, <span class="fore-primary">$margin-large-value</span>, <span class="fore-tertiary">$margin-medium-breakpoint</span>, <span class="fore-tertiary">$margin-large-breakpoint</span>, <span class="fore-tertiary">$margin-use-four-step-grid</span>, <span class="fore-tertiary">$margin-small-breakpoint</span>, <span class="fore-tertiary">$margin-extra-small-value</span>)</td>
|
||||
<td data-label="Description">Creates a responsive margin class using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-padding-responsive (<span class="fore-primary">$padding-name</span>, <span class="fore-primary">$padding-small-value</span>, <span class="fore-primary">$padding-medium-value</span>, <span class="fore-primary">$padding-large-value</span>, <span class="fore-tertiary">$padding-medium-breakpoint</span>, <span class="fore-tertiary">$padding-large-breakpoint</span>, <span class="fore-tertiary">$padding-use-four-step-grid</span>, <span class="fore-tertiary">$padding-small-breakpoint</span>, <span class="fore-tertiary">$padding-extra-small-value</span>)</td>
|
||||
<td data-label="Description">Creates a responsive padding class using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-margin-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the responsive margin class</td><td data-label="Sample value">'urgent'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-small-value</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin of the responsive margin class on smaller screens</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-medium-value</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin of the responsive margin class on medium-sized screens</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-large-value</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">Margin of the responsive margin class on larger screens</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-medium-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive margin class for medium-sized screens</td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-large-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive margin class for larger screens</td><td data-label="Sample value">1280px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-use-four-step-grid</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">(Optional) Enables the use of the four-step grid for the responsive margin class</td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-small-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive margin class for smaller screens (four-step grid only)</td><td data-label="Sample value">480px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$margin-extra-small-value</td><td data-label="Type">Margin</td>
|
||||
<td data-label="Description">(Optional) Margin of the responsive margin class on extra small screens (four-step grid only)</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-margin-responsive</span> ('responsive-margin', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-padding-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-name</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class name for the responsive padding class</td><td data-label="Sample value">'urgent'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-small-value</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding of the responsive padding class on smaller screens</td><td data-label="Sample value">4px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-medium-value</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding of the responsive padding class on medium-sized screens</td><td data-label="Sample value">6px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-large-value</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">Padding of the responsive padding class on larger screens</td><td data-label="Sample value">8px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-medium-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive padding class for medium-sized screens</td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-large-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive padding class for larger screens</td><td data-label="Sample value">1280px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-use-four-step-grid</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">(Optional) Enables the use of the four-step grid for the responsive padding class</td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-small-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive padding class for smaller screens (four-step grid only)</td><td data-label="Sample value">480px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$padding-extra-small-value</td><td data-label="Type">Padding</td>
|
||||
<td data-label="Description">(Optional) Padding of the responsive padding class on extra small screens (four-step grid only)</td><td data-label="Sample value">2px</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-padding-responsive</span> ('responsive-padding', 4px, 6px, 8px, 768px, 1280px, true, 480px, 2px);</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="responsive-visibility-mixins">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Responsive visibility helper mixins</h2></div>
|
||||
<div class="section">
|
||||
<p style="text-align:justify">The <strong>utility</strong> module contains a couple of mixins for creating responsive visibility helpers.</p><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption>Mixin definitions</caption>
|
||||
<thead>
|
||||
<tr><th>Mixin</th><th>Description</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-hidden-responsive (<span class="fore-primary">$hidden-prefix</span>, <span class="fore-tertiary">$hidden-medium-breakpoint</span>, <span class="fore-tertiary">$hidden-large-breakpoint</span>,<span class="fore-tertiary">$hidden-small-suffix</span>, <span class="fore-tertiary">$hidden-medium-suffix</span>, <span class="fore-tertiary">$hidden-large-suffix</span>, <span class="fore-tertiary">$hidden-use-four-step-grid</span>, <span class="fore-tertiary">$hidden-small-breakpoint</span>, <span class="fore-tertiary">$hidden-extra-small-suffix</span>)</td>
|
||||
<td data-label="Description">Creates a responsive class for hiding elements using the specified values.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Mixin">make-visually-hidden-responsive (<span class="fore-primary">$visually-hidden-prefix</span>, <span class="fore-tertiary">$visually-hidden-medium-breakpoint</span>, <span class="fore-tertiary">$visually-hidden-large-breakpoint</span>,<span class="fore-tertiary">$visually-hidden-small-suffix</span>, <span class="fore-tertiary">$visually-hidden-medium-suffix</span>, <span class="fore-tertiary">$visually-hidden-large-suffix</span>, <span class="fore-tertiary">$visually-hidden-use-four-step-grid</span>, <span class="fore-tertiary">$visually-hidden-small-breakpoint</span>, <span class="fore-tertiary">$visually-hidden-extra-small-suffix</span>)</td>
|
||||
<td data-label="Description">Creates a responsive class for visually hiding elements using the specified values.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-hidden-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class prefix for the responsive hiding class</td><td data-label="Sample value">'hidden'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-medium-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive hiding class for medium-sized screens</td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-large-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive hiding class for larger screens</td><td data-label="Sample value">1280px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-small-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive hiding class on smaller screens</td><td data-label="Sample value">'sm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-medium-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive hiding class on medium-sized screens</td><td data-label="Sample value">'md'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-large-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive hiding class on larger screens</td><td data-label="Sample value">'lg'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-use-four-step-grid</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">(Optional) Enables the use of the four-step grid for the responsive hiding class</td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-small-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive hiding class for smaller screens (four-step grid only)</td><td data-label="Sample value">480px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$hidden-extra-small-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">(Optional) Suffix of the responsive hiding class on extra small screens (four-step grid only)</td><td data-label="Sample value">'xs'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-hidden-responsive</span> ('hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');</pre>
|
||||
<br/>
|
||||
<table style="width: 100%" class="striped">
|
||||
<caption style="font-family: monospace, monospace">make-visually-hidden-responsive</caption>
|
||||
<thead>
|
||||
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-prefix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Class prefix for the responsive visual hiding class</td><td data-label="Sample value">'visually-hidden'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-medium-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive visual hiding class for medium-sized screens</td><td data-label="Sample value">768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-large-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive visual hiding class for larger screens</td><td data-label="Sample value">1280px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-small-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive visual hiding class on smaller screens</td><td data-label="Sample value">'sm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-medium-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive visual hiding class on medium-sized screens</td><td data-label="Sample value">'md'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-large-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">Suffix of the responsive visual hiding class on larger screens</td><td data-label="Sample value">'lg'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-use-four-step-grid</td><td data-label="Type">Logical</td>
|
||||
<td data-label="Description">(Optional) Enables the use of the four-step grid for the responsive visual hiding class</td><td data-label="Sample value">false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-small-breakpoint</td><td data-label="Type">Breakpoint</td>
|
||||
<td data-label="Description">(Optional) Breakpoint of the responsive visual hiding class for smaller screens (four-step grid only)</td><td data-label="Sample value">480px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Parameter">$visually-hidden-extra-small-suffix</td><td data-label="Type">String</td>
|
||||
<td data-label="Description">(Optional) Suffix of the responsive visual hiding class on extra small screens (four-step grid only)</td><td data-label="Sample value">'xs'</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br/>
|
||||
<h3>Sample usage</h3>
|
||||
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-visually-hidden-responsive</span> ('visually-hidden', 768px, 1280px, 'sm', 'md', 'lg', true, 480px, 'xs');</pre>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p style="text-align:justify">If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="../customization">customization page</a> or choose a module from the top menu to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<footer style="text-align:justify"><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>
|
||||
Reference in New Issue
Block a user