mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-12 08:53:59 +02:00
Code Issues Releases Wiki Activity

Documented utility module

Browse Source
This commit is contained in:
Angelos Chalaris
2018-01-29 13:30:24 +02:00
parent ad84a02f63
commit bd837161e9
5 changed files with 79 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/doc-fragments/docFragments.js
View File

@@ -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
View 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">&nbsp;&nbsp;<img src="https://placehold.it/200x200?text=circular" alt="placeholder" class="circular"></p>',
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;bordered&quot;</span><span class="highlight-a">&gt;</span>Bordered element.<span class="highlight-a">&lt;/span&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;shadowed&quot;</span><span class="highlight-a">&gt;</span>Shadowed element.<span class="highlight-a">&lt;/span&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;rounded&quot;</span><span class="highlight-a">&gt;</span>Rounded element.<span class="highlight-a">&lt;/span&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;circular&quot;</span><span class="highlight-a">&gt;</span>Circular element.<span class="highlight-a">&lt;/span&gt;</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">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;rounded circular&quot;</span><span class="highlight-a">&gt;</span>Do not do this.<span class="highlight-a">&lt;/span&gt;</span></span></pre>`
}
]
}

20
docs/doc-fragments/responsiveSpacingAndSizing.js Normal file
View File

@@ -0,0 +1,20 @@
module.exports = {
id: 'responsive-spacing-sizing',
title: 'Responsive spacing &amp; 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">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;responsive-margin&quot;</span><span class="highlight-a">&gt;</span>Responsive margin.<span class="highlight-a">&lt;/span&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;responsive-padding&quot;</span><span class="highlight-a">&gt;</span>Responsive padding.<span class="highlight-a">&lt;/span&gt;</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: []
}