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.
350 lines
29 KiB
HTML
350 lines
29 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; } @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
|
[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;}}
|
|
.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: #1b5e20; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
|
.box-colored { color: #f5f5f5;} @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="customization/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>
|
|
<h4 style="margin-left: 0;">Modules</h4> <a href="core.html#core-title">Core</a>
|
|
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
|
|
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
|
|
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness & captions</a>
|
|
<br/> <a href="grid.html#grid-title">Grid</a>
|
|
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
|
|
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
|
|
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
|
|
<br/> <a href="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#file-upload" class="sublink-1">File upload buttons</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> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
|
<br/> <a href="table.html#table-title">Table</a>
|
|
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
|
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
|
<br/> <a href="card.html#card-title">Card</a>
|
|
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
|
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</a>
|
|
<br/> <a href="tab.html#tab-title">Tab</a>
|
|
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
|
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
|
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
|
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
|
<br/> <a href="progress.html#progress-title">Progress</a>
|
|
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
|
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
|
<br/> <a href="utility.html#utility-title">Utility</a>
|
|
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders & shadows</a>
|
|
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing & spacing classes</a>
|
|
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
|
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></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>
|
|
<p style="text-align:justify"><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p><br/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<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 use the <strong>utility</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p>
|
|
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="visibility-helpers">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Visibility helpers</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-first">
|
|
<p style="text-align:justify">You can hide content for all your users, using the default <code><span class="fore-secondary">hidden</span></code> attribute. However, we provide you with the <code>.hidden</code> class for the same purpose, as well as the <code>.visually-hidden</code> class which will make your content hidden, except for screen readers.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><span class="hidden">Hidden text</span>
|
|
<span class="visually-hidden">Screen-reader-only text</span></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align:justify">
|
|
<li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<pre><span class="hidden visually-hidden">Not a good idea</span></pre>
|
|
<p class="dont" style="text-align:justify"><mark class="secondary">Don't:</mark> Avoid using both classes at the same time. Instead, use <code>.hidden</code> to hide content for all users, <code>.visually-hidden</code> to hide it for non-screen-reader users or <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">"true"</span></code> to hide it for screen-reader-only users.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="borders-shadows">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Generic borders & shadows</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
|
<div>
|
|
<br>
|
|
<p>This is a paragraph with a piece of <span class="bordered">bordered text</span>.</p>
|
|
<button class="bordered">Bordered button</button><button class="bordered primary">Bordered button</button><br>
|
|
<p><img src="https://placehold.it/200x200?text=rounded" class="rounded" alt="image"> <img src="https://placehold.it/200x200?text=circular" class="circular" alt="image"></p><br>
|
|
<p><span class="shadowed">This is an element that casts a shadow.</span></p><br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
|
<p style="text-align:justify">Use the <code>.bordered</code> class to apply a generic black border with 25% opacity to any element. Apart from that you can use the <code>.rounded</code> and <code>.circular</code> classes to create generic border radiuses. Finally, you can use the <code>.shadowed</code> class to add a generic <code><span class="fore-secondary">box-shadow</span></code> to any element.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><span class="bordered">Bordered</span>
|
|
<span class="rounded">Rounded</span>
|
|
<span class="circular">Circular</span>
|
|
<span class="shadowed">Casts shadow</span></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align:justify">
|
|
<li>All of these classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
|
|
<li>The <code>.bordered</code> class was originally created with elements such as buttons in mind, to allow users highlighting certain elements in their designs, without having to change any default styles.</li>
|
|
<li>All of the above classes can be used with most modern HTML elements.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><span class="bordered rounded shadow-small">Stylized element</span></pre>
|
|
<p class="do" style="text-align:justify"><mark class="tertiary">Do:</mark> You can combine a generic border with any border radius or shadow or even both.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
|
<pre><span class="rounded circular">Bad radius</span>
|
|
<span class="fore-secondary"><!-- or --></span>
|
|
<span class="shadow-small shadow-large">Bad shadow</span></pre>
|
|
<p class="dont" style="text-align:justify"><mark class="secondary">Don't:</mark> Avoid combining two classes of the same type (i.e. two radii or two shadow styles), as they might overwrite each other and cause unexpected behavior.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="responsive-sizing">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Responsive sizing & spacing classes</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-first">
|
|
<p style="text-align:justify">Helper classes for the <code>padding</code> and <code>margin</code> attributes are provided in the form of <code>.responsive-margin</code> and <code>.responsive-padding</code> classes. Both of these classes are responsive, allowing you to collapse the spacing and size of elements on different displays to make better use of the device's viewport.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><div class="responsive-padding">Responsive padding</div>
|
|
<div class="responsive-margin">Responsive margin</div></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align:justify">
|
|
<li>If the default values of these classes are not suited to your needs, check out the <a href="customization.html">customization</a> page.</li>
|
|
<li>Both classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<pre><div class="responsive-padding responsive-margin">Responsive padding and margin</div></pre>
|
|
<p class="do" style="text-align:justify"><mark class="tertiary">Do:</mark> You can use both of these classes to make certain element adapt to changes. This could be especially useful for certain grid layouts.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="responsive-visibility">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Responsive visibility helpers</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-first">
|
|
<p style="text-align:justify">You can hide content (either fully or only visually) for certain screens, using the responsive visibility helpers. To hide elements completely use the <code>.hidden-<span class="fore-primary">SCR_SZ</span></code> syntax, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names (<code><span class="fore-tertiary">sm</span></code> for smaller screens, <code><span class="fore-tertiary">md</span></code> for medium-sized screens or <code><span class="fore-tertiary">lg</span></code> for larger screens). If you want to hide certains elements for all users, except screen readers, replace <code>.hidden</code> with <code>.visually-hidden</code>, followed by the screen size name.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><span class="hidden-sm">Hidden in smaller screens</span>
|
|
<span class="hidden-md">Hidden in medium-sized screens</span>
|
|
<span class="hidden-lg">Hidden in larger screens</span>
|
|
|
|
<span class="visually-hidden-sm">Visually hidden in smaller screens</span>
|
|
<span class="visually-hidden-md">Visually hidden in medium-sized screens</span>
|
|
<span class="visually-hidden-lg">Visually hidden in larger screens</span></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align:justify">
|
|
<li>Responsive visibility helper classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
|
|
<li>The specific breakpoints for small, medium and large screen sizes are as follows:
|
|
<ul>
|
|
<li><strong>small</strong>: less than <code>768px</code> wide</li>
|
|
<li><strong>medium</strong>: more than or equal to <code>768px</code> wide but less than <code>1280px</code> wide</li>
|
|
<li><strong>large</strong>: <code>1280px</code> wide or more</li>
|
|
</ul>
|
|
</li>
|
|
<li>Responsive visibility helper classes are independent, meaning that hiding an element in one screen size will not affect it visibility in any other screen size.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><span class="hidden-sm hidden-md">Hidden in smaller and medium-sized screens, visible in larger screens</span>
|
|
<span class="fore-tertiary"><!-- or --></span>
|
|
<span class="visually-hidden-md visually-hidden-lg">Visually hidden in medium-sized and larger screens, visible in smaller screens</span>
|
|
<span class="fore-tertiary"><!-- or --></span>
|
|
<span class="hidden-sm visually-hidden-lg">Hidden in smaller screens, visually hidden in larger screens, visible in medium-sized screens</span></pre>
|
|
<p class="do" style="text-align:justify"><mark class="tertiary">Do:</mark> You can combine responsive visibility helpers for different sizes, based on your needs.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
|
<pre><span class="hidden-sm visually-hidden-sm">Not a good idea</span></pre>
|
|
<p class="dont" style="text-align:justify"><mark class="secondary">Don't:</mark> Avoid combining responsive visibility helpers for the same screen size. Combining both of them might cause unexpected behavior.</p>
|
|
</div>
|
|
</div>
|
|
</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 row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
|
<div><br>
|
|
<ul class="breadcrumbs"> <li><a href="#">Root</a></li> <li><a href="#">Folder</a></li> <li>File</li> </ul><br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
|
<p style="text-align:justify">Breadcrumbs are usually used to show the navigational hierarchy of pages or folders. To use them, simply create a <code><ul></code> element that implements the <code>.breadcrumbs</code> class. Inside this unordered list, add as many <code><li></code> elements as needed to show your hierarchy. You can add links to the list elements, as necessary.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><ul class="breadcrumbs">
|
|
<li><a href="#">Root</a></li>
|
|
<li><a href="#">Folder</a></li>
|
|
<li>File</li>
|
|
</ul></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align:justify">
|
|
<li>The separators between breadcrumbs are added using some tricky CSS rules. Due to that, there might be a few browser versions or devices where you can see part of the seams between the element separators.</li>
|
|
<li>Breadcrumbs show a hierarchy, an ordered list. However, we do not use the <code><ol></code> element, as it might conflict with some custom styles we've seen people use.</li>
|
|
<li>If you want to add some accesibility to your breadcrumbs, you can add the <code><span class="fore-secondary">role</span>=<span class="fore-primary">"<a href="https://www.w3.org/TR/wai-aria/roles#navigation">navigation</a>"</span></code> attribute, although it is not required.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><ol class="breadcrumbs">
|
|
<li><a href="#">Does</a></li>
|
|
<li><a href="#">Not</a></li>
|
|
<li>Work</li>
|
|
</ol></pre>
|
|
<p class="dont" style="text-align:justify"><mark class="secondary">Don't:</mark> The structure of the breadcrumb component prohibits the use of <code><ol></code> in place of the <code><ul></code> element.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
|
<pre><ul class="breadcrumbs">
|
|
<li><a href="#">Root</a>
|
|
<ul class="breadcrumbs">
|
|
<li><a href="#">Folder</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>File</li>
|
|
</ul></pre>
|
|
<p class="dont" style="text-align:justify"><mark class="secondary">Don't:</mark> Avoid nesting lists, breadcrumbs or a combination of the two inside the <code>.breadcrumbs</code> list, as this might cause unexpected behavior.</p>
|
|
</div>
|
|
</div>
|
|
</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 row">
|
|
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
|
<div>
|
|
<br>
|
|
<p style="text-align:center;"> <span class="close"></span> </p>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
|
<p style="text-align:justify">To create a close icon, simply add an element implementing the <code>.close</code> class.</p>
|
|
<h3>Sample code</h3>
|
|
<pre><span class="close"></span></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul style="text-align:justify">
|
|
<li>The close icon behaves similar to a button when hovering over it or otherwise focusing or selecting it.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><div class="close"></div></pre>
|
|
<p class="do" style="text-align:justify"><mark class="tertiary">Do:</mark> You can use a handful of other HTML elements instead of the <code><span></code> element showcased in the example above, most commonly <code><div></code> elements.</p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><button class="close"></button></pre>
|
|
<p class="do" style="text-align:justify"><mark class="tertiary">Do:</mark> If you want your close icon to behave like a button (i.e. register as a button on screen readers and have the required logic attached to it), you can apply the <code>.close</code> class to a <code><button></code> element instead. You can even apply any of the button color variant classes.</p>
|
|
</div>
|
|
</div>
|
|
</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 <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</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>
|