mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-11 08:23:58 +02:00
Documented utility module
This commit is contained in:
@@ -24,6 +24,8 @@ var progressBars = require('./progressBars');
|
||||
var donutSpinners = require('./donutSpinners');
|
||||
var icons = require('./icons');
|
||||
var visibilityHelpers = require('./visibilityHelpers');
|
||||
var elementDecorators = require('./elementDecorators');
|
||||
var responsiveSpacingAndSizing = require('./responsiveSpacingAndSizing');
|
||||
|
||||
module.exports = [
|
||||
gettingStarted,
|
||||
@@ -35,5 +37,5 @@ module.exports = [
|
||||
textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions,
|
||||
progressBars, donutSpinners,
|
||||
icons,
|
||||
visibilityHelpers
|
||||
visibilityHelpers, elementDecorators, responsiveSpacingAndSizing
|
||||
]
|
||||
|
27
docs/doc-fragments/elementDecorators.js
Normal file
27
docs/doc-fragments/elementDecorators.js
Normal file
@@ -0,0 +1,27 @@
|
||||
module.exports = {
|
||||
id: 'element-decorators',
|
||||
title: 'Element decorators',
|
||||
keywords: ['border','border-radius', 'bordered', 'rounded', 'circular', 'shadowed', 'utility'],
|
||||
description: '<p>You can apply generic borders, shadows or border radiuses to any element, by using the appropriate class (<code>.bordered</code>, <code>.shadowed</code>, <code>.rounded</code> or <code>.circular</code>).</p>',
|
||||
example: '<button class="bordered doc">Bordered button</button><button class="primary bordered doc">Bordered button</button><button class="shadowed doc">Shadowed button</button><br/><p><img src="https://placehold.it/200x200?text=rounded" alt="placeholder" class="rounded"> <img src="https://placehold.it/200x200?text=circular" alt="placeholder" class="circular"></p>',
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"bordered"</span><span class="highlight-a">></span>Bordered element.<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">"shadowed"</span><span class="highlight-a">></span>Shadowed element.<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">"rounded"</span><span class="highlight-a">></span>Rounded element.<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">"circular"</span><span class="highlight-a">></span>Circular element.<span class="highlight-a"></span></span></span></pre>`],
|
||||
notes: [
|
||||
'Element decorators use <code>!important</code> declarations to override any other styles, so exercise caution when using them.',
|
||||
'Element decorators can be used with pretty much every element or component that is available.'
|
||||
],
|
||||
customization: [
|
||||
`Boder color for the generic border decorator can be changed by changing the value of the <code>--generic-border-color</code> variable.`,
|
||||
`Box shadow style for the generic shadow can be changed by changing the value of the <code>--generic-box-shadow</code> variable.`
|
||||
],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: [
|
||||
{
|
||||
description: `Avoid applying the <code>.rounded</code> and <code>.circular</code> decorators on the same element.`,
|
||||
sample: `<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"rounded circular"</span><span class="highlight-a">></span>Do not do this.<span class="highlight-a"></span></span></span></pre>`
|
||||
}
|
||||
]
|
||||
}
|
20
docs/doc-fragments/responsiveSpacingAndSizing.js
Normal file
20
docs/doc-fragments/responsiveSpacingAndSizing.js
Normal file
@@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
id: 'responsive-spacing-sizing',
|
||||
title: 'Responsive spacing & sizing',
|
||||
keywords: ['responsiveness', 'margin', 'padding', 'responsive-margin', 'responsive-margin'],
|
||||
description: '<p>You can make elements\' spacing or sizing responsive by applying the appropriate class (<code>.responsive-margin</code> or <code>.responsive-padding</code>).</p>',
|
||||
example: '',
|
||||
samples: [`<pre><span class="code-line"><span class="highlight-a"><span</span> <span class="highlight-b">class</span>=<span class="highlight-c">"responsive-margin"</span><span class="highlight-a">></span>Responsive margin.<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">"responsive-padding"</span><span class="highlight-a">></span>Responsive padding.<span class="highlight-a"></span></span></span></pre>`],
|
||||
notes: [
|
||||
'Responsive spacing and sizing modifiers use <code>!important</code> declarations to override any other styles, so exercise caution when using them.',
|
||||
'Responsive spacing and sizing modifiers are independent, meaning that hiding or visually hiding an element in one screen size will not affect its visibility in any other screen size.'
|
||||
],
|
||||
customization: [
|
||||
`Universal margin for elements can be changed globally by changing the value of the <code>--universal-margin</code> variable, affecting the responsive spacing modifier. 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.`,
|
||||
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable, affecting the responsive sizing modifier.`
|
||||
],
|
||||
modifiers: [],
|
||||
dos: [],
|
||||
donts: []
|
||||
}
|
Reference in New Issue
Block a user