mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-06 05:47:23 +02:00
Documented icons
This commit is contained in:
Angelos Chalaris
@@ -22,6 +22,7 @@ var modalDialogs = require('./modalDialogs');
|
||||
var spoilersAndAccordions = require('./spoilersAndAccordions');
|
||||
var progressBars = require('./progressBars');
|
||||
var donutSpinners = require('./donutSpinners');
|
||||
var icons = require('./icons');
|
||||
|
||||
module.exports = [
|
||||
gettingStarted,
|
||||
@@ -31,5 +32,6 @@ module.exports = [
|
||||
header, navigationBar, footer, drawer,
|
||||
tables,
|
||||
textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions,
|
||||
progressBars, donutSpinners
|
||||
progressBars, donutSpinners,
|
||||
icons
|
||||
]
|
||||
|
||||
73
docs/doc-fragments/icons.js
Normal file
73
docs/doc-fragments/icons.js
Normal file
@@ -0,0 +1,73 @@
|
||||
module.exports = {
|
||||
id: 'icons',
|
||||
title: 'Icons',
|
||||
keywords: [`icon`, `svg`, `feather`, `icons`],
|
||||
description: `<p><strong>mini.css</strong> comes with a set of 20 commonly-used icons (courtesy of <a href="https://feathericons.com/" target="_blank" rel="noopener">Feather</a>) that you can use anywhere in your web apps, utilizing the appropriate class for each icon.</p>`,
|
||||
example: `<div class="row icon-row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-alert"></span> .icon-alert</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-bookmark"></span> .icon-bookmark</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-calendar"></span> .icon-calendar</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-cart"></span> .icon-cart</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-credit"></span> .icon-credit</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-edit"></span> .icon-edit</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-help"></span> .icon-help</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-home"></span> .icon-home</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-info"></span> .icon-info</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-link"></span> .icon-link</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-location"></span> .icon-location</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-lock"></span> .icon-lock</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-mail"></span> .icon-mail</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-phone"></span> .icon-phone</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-rss"></span> .icon-rss</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-search"></span> .icon-search</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-settings"></span> .icon-settings</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-share"></span> .icon-share</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-upload"></span> .icon-upload</p></div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-3"><p class="doc bordered rounded"><span class="icon-user"></span> .icon-user</p></div>
|
||||
</div>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-bookmark"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-calendar"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-cart"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-credit"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-edit"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-help"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-home"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-info"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-link"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-location"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-lock"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-mail"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-phone"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-rss"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-search"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-settings"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-share"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-upload"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-user"</span><span class="highlight-a">></span></span></span></pre>`],
|
||||
notes: [`You can only use a <code><span></code> element to create an icon.`,
|
||||
`You can inline icons inside a paragraph or pretty much any other textual content. Icons scale relative to their parent element.`],
|
||||
customization: [
|
||||
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`
|
||||
],
|
||||
modifiers: [
|
||||
{
|
||||
title : 'Color variants',
|
||||
description: `<p>You can create secondary or inverse (<code>.secondary</code>, <code>.inverse</code>) icons, simply by adding the appropriate color modifier.</p>`,
|
||||
example: `<p style="padding: 0.5rem;" class="doc">This is a <span class="icon-home secondary"></span> secondary icon, which has a lighter color.</p><p style="background: #111; color: #f8f8f8; padding: 0.5rem;" class="doc">This is an <span class="icon-home inverse"></span> inverse icon.</p>`,
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert secondary"</span><span class="highlight-a">></span></span></span>
|
||||
<span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert inverse"</span><span class="highlight-a">></span></span></span></pre>`]
|
||||
}
|
||||
],
|
||||
dos: [],
|
||||
donts: [
|
||||
{
|
||||
description: `Avoid inserting text inside icon elements.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert"</span><span class="highlight-a">></span>Don't place text here.<span class="highlight-a"></span></span></span></pre>`
|
||||
},
|
||||
{
|
||||
description: `Avoid applying two color modifiers on the same icon.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"icon-alert inverse secondary"</span><span class="highlight-a">></span></span></span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user