beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Documented utility module

Browse source
This commit is contained in:
Angelos Chalaris 2018-01-29 13:30:24 +02:00
parent cc138c7ce7
commit 9e79bcc131
5 changed files with 79 additions and 3 deletions
Show stats 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: []
}

3
docs/v3/DEVLOG.md
View file

@ -301,3 +301,6 @@
## 20180129
- Documented visibility helpers.
- Documented element decorators.
- Documented responsive spacing and sizing modifiers.
- Updated version info to `v3.0.0-alpha.3`, soon ready to be released as the final alpha.

28
docs/v3/docs.html
View file

@ -23,7 +23,7 @@
</header>
<div class="row" id="doc-wrapper">
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images &amp; captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code &amp; quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms &amp; input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#tables" id="link-to-tables">Tables</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><a href="#spoilers-and-accordions" id="link-to-spoilers-and-accordions">Spoilers &amp; accordions</a><a href="#progress-bars" id="link-to-progress-bars">Progress bars</a><a href="#donut-spinners" id="link-to-donut-spinners">Donut spinners</a><a href="#icons" id="link-to-icons">Icons</a><a href="#visibility-helpers" id="link-to-visibility-helpers">Visibility helpers</a><span id="no-results">No results found</span></nav>
<nav class="col-md-4 col-lg-3" id="nav-drawer"><h3>Menu</h3><label for="doc-drawer-checkbox" class="button drawer-close"></label><div><input style="width: 100%; margin: 0px;" placeholder="Search..." type="search" id="search-bar" oninput="search()"></div><a href="#getting-started" id="link-to-getting-started">Getting started</a><a href="#common-textual-elements" id="link-to-common-textual-elements">Common textual elements</a><a href="#heading" id="link-to-heading">Headings</a><a href="#images-captions" id="link-to-images-captions">Images &amp; captions</a><a href="#lists" id="link-to-lists">Lists</a><a href="#code-and-quotations" id="link-to-code-and-quotations">Code &amp; quotations</a><a href="#grid" id="link-to-grid">Grid system</a><a href="#cards" id="link-to-cards">Cards</a><a href="#card-sections" id="link-to-card-sections">Card sections</a><a href="#forms-and-input" id="link-to-forms-and-input">Forms &amp; input</a><a href="#buttons" id="link-to-buttons">Buttons</a><a href="#input-grouping" id="link-to-input-grouping">Input grouping</a><a href="#header" id="link-to-header">Header</a><a href="#navigation-bar" id="link-to-navigation-bar">Navigation bar</a><a href="#footer" id="link-to-footer">Footer</a><a href="#drawer" id="link-to-drawer">Menu drawer</a><a href="#tables" id="link-to-tables">Tables</a><a href="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</a><a href="#tooltips" id="link-to-tooltips">Tooltips</a><a href="#modal-dialogs" id="link-to-modal-dialogs">Modal dialogs</a><a href="#spoilers-and-accordions" id="link-to-spoilers-and-accordions">Spoilers &amp; accordions</a><a href="#progress-bars" id="link-to-progress-bars">Progress bars</a><a href="#donut-spinners" id="link-to-donut-spinners">Donut spinners</a><a href="#icons" id="link-to-icons">Icons</a><a href="#visibility-helpers" id="link-to-visibility-helpers">Visibility helpers</a><a href="#element-decorators" id="link-to-element-decorators">Element decorators</a><a href="#responsive-spacing-sizing" id="link-to-responsive-spacing-sizing">Responsive spacing &amp; sizing</a><span id="no-results">No results found</span></nav>
<main class="col-sm-12 col-md-8 col-lg-9" id="doc-content"><div id="getting-started" class="card fluid">
<h2 class="section double-padded">Getting started</h2>
@ -1005,11 +1005,35 @@
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hidden-sm hidden-md&quot;</span><span class="highlight-a">&gt;</span>Not visible for users on screens under 1280px wide.<span class="highlight-a">&lt;/p&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="do">Do:</mark>&nbsp;You can apply multiple responsive visibility helpers on the same element.</p></div></div><div class="row dodos"><div class="col-sm-12 col-md-6"><pre><span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hidden visually-hidden&quot;</span><span class="highlight-a">&gt;</span>Do not do this.<span class="highlight-a">&lt;/p&gt;</span></span></pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark>&nbsp;Avoid combining <code>.hidden</code> and <code>.visually-hidden</code> or responsive helpers for the same screen size.</p></div></div></div>
<div class="section double-padded"><h3>Notes</h3><ul><li>Visibility helpers use <code>!important</code> declarations to override any other styles, so exercise caution when using them.</li><li>The specific breakpoints for small, medium and large screen sizes are as follows:<ul><li>small: less than <code>768px</code> wide</li><li>medium: more than or equal to <code>768px</code> wide and less than <code>1280px</code> wide</li><li>large: <code>1280px</code> wide or more</li></ul></li><li>Responsive visibility helper classes are independent, meaning that hiding or visually hiding an element in one screen size will not affect its visibility in any other screen size.</li></ul></div>
</div><br/><div id="element-decorators" class="card fluid">
<h2 class="section double-padded">Element decorators</h2>
<div class="section"><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></div>
<div class="section"><h3>Example</h3><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></div>
<div class="section double-padded prefiller-example"><h3>Sample code</h3><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></div>
<div class="section double-padded"><h3>Best practices</h3><div class="row dodos"><div class="col-sm-12 col-md-6"><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></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark>&nbsp;Avoid applying the <code>.rounded</code> and <code>.circular</code> decorators on the same element.</p></div></div></div>
<div class="section double-padded"><h3>Notes</h3><ul><li>Element decorators use <code>!important</code> declarations to override any other styles, so exercise caution when using them.</li><li>Element decorators can be used with pretty much every element or component that is available.</li></ul></div>
<div class="section double-padded"><h3>Customization</h3><ul><li>Boder color for the generic border decorator can be changed by changing the value of the <code>--generic-border-color</code> variable.</li><li>Box shadow style for the generic shadow can be changed by changing the value of the <code>--generic-box-shadow</code> variable.</li></ul></div>
</div><br/><div id="responsive-spacing-sizing" class="card fluid">
<h2 class="section double-padded">Responsive spacing &amp; sizing</h2>
<div class="section"><p>You can make elements' spacing or sizing responsive by applying the appropriate class (<code>.responsive-margin</code> or <code>.responsive-padding</code>).</p></div>
<div class="section double-padded prefiller-example"><h3>Sample code</h3><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></div>
<div class="section double-padded"><h3>Notes</h3><ul><li>Responsive spacing and sizing modifiers use <code>!important</code> declarations to override any other styles, so exercise caution when using them.</li><li>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.</li></ul></div>
<div class="section double-padded"><h3>Customization</h3><ul><li>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.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable, affecting the responsive sizing modifier.</li></ul></div>
</div><footer><p><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo" target="_blank">@Chalarangelo</a>. Source code licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>.</p><p>Icons provided by <a href="https://feathericons.com/" target="_blank">Feather</a>. Search powered by <a href="http://fusejs.io/" target="_blank">Fuse.js</a>.</p></footer></main>
</div></div>
<script>
// Search script
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "tables", keys: ["table","caption","thead","tbody","tr","th","td","horizontal","striped","hoverable"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] },{id: "spoilers-and-accordions", keys: ["spoiler","collapse","accordion","contextual","vertical tabs"] },{id: "progress-bars", keys: ["progress","bar","primary","secondary","tertiary","inline"] },{id: "donut-spinners", keys: ["spinner","donut","loading","progress","primary","secondary","tertiary","inline","animation","animated"] },{id: "icons", keys: ["icon","svg","feather","icons"] },{id: "visibility-helpers", keys: ["hidden","visibility","visually-hidden","accessibility","utility"] }];
var docs= [{id: "getting-started", keys: ["html","viewport","head","meta","getting started","introduction","browser support","installation","usage","setup","cdn","npm","yarn"] },{id: "common-textual-elements", keys: ["p","paragraph","text","textual elements","strong","bold","b","em","i","emphasis","italics","small","a","link","hr","horizontal rule","sub","subscript","sup","exponent","superscript","normalize","reset"] },{id: "heading", keys: ["heading","h1","h2","h3","h4","h5","h6","small","title","subtitle","subheading"] },{id: "images-captions", keys: ["img","image","responsive","responsiveness","caption","figure","figcaption"] },{id: "lists", keys: ["list","ul","ol","li"] },{id: "code-and-quotations", keys: ["code","pre","kbd","blockquote","quotation"] },{id: "grid", keys: ["grid","grid system","col","column","layout","row","container","small","medium","large","sm","md","lg","cols","predefined","offset","order","reorder","first","last","normal"] },{id: "cards", keys: ["card","row","section","container","col","column","small","large","fluid","warning","error"] },{id: "card-sections", keys: ["card","row","section","container","col","column","media","double-padded","dark"] },{id: "forms-and-input", keys: ["form","fieldset","legend","input","type","text","checkbox","radio","email","password","tel","input-group","input group","row","col","column","vertical","fluid","file","upload","select","textarea","option","label"] },{id: "buttons", keys: ["button","input","reset","submit","link","a","label","primary","secondary","tertiary","aria","small","large","inverse"] },{id: "input-grouping", keys: ["input group","input-group","vertical","fluid","input","button","button group","button-group"] },{id: "header", keys: ["navigation","header","sticky","button","logo","link"] },{id: "navigation-bar", keys: ["navigation","bar","nav","link"] },{id: "footer", keys: ["navigation","footer","sticky","link"] },{id: "drawer", keys: ["drawer","checkbox","toggle","close","drawer-toggle","drawer-close","menu","navigation","hamburger"] },{id: "tables", keys: ["table","caption","thead","tbody","tr","th","td","horizontal","striped","hoverable"] },{id: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","toast","mobile","contextual","message"] },{id: "tooltips", keys: ["tooltip","aria-label","contextual","bottom","span"] },{id: "modal-dialogs", keys: ["modal","dialog","contextual","alert","notification"] },{id: "spoilers-and-accordions", keys: ["spoiler","collapse","accordion","contextual","vertical tabs"] },{id: "progress-bars", keys: ["progress","bar","primary","secondary","tertiary","inline"] },{id: "donut-spinners", keys: ["spinner","donut","loading","progress","primary","secondary","tertiary","inline","animation","animated"] },{id: "icons", keys: ["icon","svg","feather","icons"] },{id: "visibility-helpers", keys: ["hidden","visibility","visually-hidden","accessibility","utility"] },{id: "element-decorators", keys: ["border","border-radius","bordered","rounded","circular","shadowed","utility"] },{id: "responsive-spacing-sizing", keys: ["responsiveness","margin","padding","responsive-margin","responsive-margin"] }];
var options = {threshold:0.4, keys:["keys"]};
var fuse = new Fuse(docs,options);
function search(){