0afb5277ad
Pretty sizeable documentation update, improving layout, typos etc. Also added the Codepen Project to the templates page, a small note to star the project in the front page and two more examples in the drawer component documentation to make sure that everything is properly documented.
579 lines
40 KiB
HTML
579 lines
40 KiB
HTML
<!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.html" class="logo"><span id="header-logo">m</span></a>
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
|
|
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
|
|
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" 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.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
|
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
|
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
|
|
<a href="core.html#typography-headings" class="sublink-1">Typography & headings</a>
|
|
<a href="core.html#common-elements" class="sublink-1">Common elements & fixes</a>
|
|
<br/> <a href="grid.html#grid-title">Grid</a>
|
|
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
|
<br/> <a href="input_control.html#input-control-title">Input Control</a>
|
|
<a href="input_control.html#forms-input" class="sublink-1">Forms & input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a>
|
|
<a href="input_control.html#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a>
|
|
<br/> <a href="navigation.html#navigation-title">Navigation</a>
|
|
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
|
|
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
|
|
<br/> <a href="table.html#table-title">Table</a>
|
|
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
|
|
<br/> <a href="card.html#card-title">Card</a>
|
|
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
|
|
<br/> <a href="tab.html#tab-title">Tab</a>
|
|
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
|
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
|
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
|
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
|
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
|
<br/> <a href="progress.html#progress-title">Progress</a>
|
|
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
|
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
|
<br/> <a href="utility.html#utility-title">Utility</a>
|
|
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
|
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
|
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
|
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
|
<a href="../quick_reference.html"><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="index.html">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>
|