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

Documented visibility helpers

Browse Source
This commit is contained in:
Angelos Chalaris
2018-01-29 12:58:36 +02:00
parent 0d897060a1
commit cc138c7ce7
9 changed files with 68 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/mini-default.css vendored
View File

@@ -3,7 +3,7 @@
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.2 mini.css version: v3.0.0-alpha.3
*/ */
/* /*
Browsers resets and base typography. Browsers resets and base typography.

3
docs/build-docs.js
View File

@@ -1,7 +1,6 @@
var fs = require('fs'); var fs = require('fs');
var version = require('./vinf'); // Gets version info. var version = require('./vinf'); // Gets version info.
var frameworkUrl = '"https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0-alpha.1/mini-default.css"'; var frameworkUrl = `"https://cdnjs.cloudflare.com/ajax/libs/mini.css/${version.version.slice(1)}/mini-default.css"`;
// INDEX // INDEX
var indexHtml = `<!DOCTYPE html> var indexHtml = `<!DOCTYPE html>

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

@@ -23,6 +23,7 @@ var spoilersAndAccordions = require('./spoilersAndAccordions');
var progressBars = require('./progressBars'); var progressBars = require('./progressBars');
var donutSpinners = require('./donutSpinners'); var donutSpinners = require('./donutSpinners');
var icons = require('./icons'); var icons = require('./icons');
var visibilityHelpers = require('./visibilityHelpers');
module.exports = [ module.exports = [
gettingStarted, gettingStarted,
@@ -33,5 +34,6 @@ module.exports = [
tables, tables,
textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions, textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions,
progressBars, donutSpinners, progressBars, donutSpinners,
icons icons,
visibilityHelpers
] ]

34
docs/doc-fragments/visibilityHelpers.js Normal file
View File

@@ -0,0 +1,34 @@
module.exports = {
id: 'visibility-helpers',
title: 'Visibility helpers',
keywords: ['hidden', 'visibility', 'visually-hidden', 'accessibility', 'utility'],
description: '<p>You can use visibility helper classes to hide elements for all users (<code>.hidden</code>) or for users not on screen readers (<code>.visually-hidden</code>). There are also responsive visibility helpers provided, for hiding or visually hiding content only for specific screen sizes (<code>.hidden-sm</code>, <code>.hidden-md</code>, <code>.hidden-lg</code> and <code>.visually-hidden-sm</code>, <code>.visually-hidden-md</code> and <code>.visually-hidden-lg</code> respectively).</p>',
example: '',
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hidden&quot;</span><span class="highlight-a">&gt;</span>Not visible for any users.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;visually-hidden&quot;</span><span class="highlight-a">&gt;</span>Visible only for screen readers.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hidden-sm&quot;</span><span class="highlight-a">&gt;</span>Not visible for users on screens under 768px wide.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hidden-md&quot;</span><span class="highlight-a">&gt;</span>Not visible for users on screens 768px-1280px wide.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hidden-lg&quot;</span><span class="highlight-a">&gt;</span>Not visible for users on screens wider than 1280px.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;visually-hidden-sm&quot;</span><span class="highlight-a">&gt;</span>Visible only for screen readers under 768px wide.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;visually-hidden-md&quot;</span><span class="highlight-a">&gt;</span>Visible only for screen readers 768px-1280px wide.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;visually-hidden-lg&quot;</span><span class="highlight-a">&gt;</span>Visible only for screen readers wider than 1280px.<span class="highlight-a">&lt;/p&gt;</span></span></pre>`],
notes: [
'Visibility helpers use <code>!important</code> declarations to override any other styles, so exercise caution when using them.',
'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>',
'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.'
],
customization: [],
modifiers: [],
dos: [
{
description: `You can apply multiple responsive visibility helpers on the same element.`,
sample: `<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>`
}
],
donts: [
{
description: `Avoid combining <code>.hidden</code> and <code>.visually-hidden</code> or responsive helpers for the same screen size.`,
sample: `<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>`
}
]
}

4
docs/v3/DEVLOG.md
View File

@@ -297,3 +297,7 @@
- Updated `icon` module to have the variables definitions in comments (in case of standalone use). - Updated `icon` module to have the variables definitions in comments (in case of standalone use).
- Documented `icon` module in its entirety and retested everything. It's all good. - Documented `icon` module in its entirety and retested everything. It's all good.
## 20180129
- Documented visibility helpers.

27
docs/v3/docs.html
View File

@@ -23,15 +23,15 @@
</header> </header>
<div class="row" id="doc-wrapper"> <div class="row" id="doc-wrapper">
<input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox"> <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><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><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"> <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> <h2 class="section double-padded">Getting started</h2>
<div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p> <div class="section"><p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
<div class="row"><div class="col-sm-12 col-md"><pre>npm install mini.css</pre></div><div class="col-sm-12 col-md"><pre>yarn add mini.css</pre></div></div> <div class="row"><div class="col-sm-12 col-md"><pre>npm install mini.css</pre></div><div class="col-sm-12 col-md"><pre>yarn add mini.css</pre></div></div>
<br/><p>Alternatively, you can use either <strong>rawgit</strong> or <strong>cdnjs</strong> to import <strong>mini.css</strong> into your HTML page's <code>&lt;head&gt;</code> tag:</p> <br/><p>Alternatively, you can use either <strong>rawgit</strong> or <strong>cdnjs</strong> to import <strong>mini.css</strong> into your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0-alpha.2/dist/mini-default.min.css&quot;&gt;</pre> <pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0-alpha.3/dist/mini-default.min.css&quot;&gt;</pre>
<pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0-alpha.2/mini-default.min.css&quot;&gt;</pre> <pre>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0-alpha.3/mini-default.min.css&quot;&gt;</pre>
<br/><p>After adding <strong>mini.css</strong> to your project, remember to also add the following line inside your HTML page's <code>&lt;head&gt;</code> tag to utilize the viewport meta tag:</p> <br/><p>After adding <strong>mini.css</strong> to your project, remember to also add the following line inside your HTML page's <code>&lt;head&gt;</code> tag to utilize the viewport meta tag:</p>
<pre>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</pre> <pre>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</pre>
<br/><p><strong>mini.css</strong> is crafted with long-term support in mind, so expect it to be compatible with all modern browsers, as well as their future versions. However, most legacy and proxy browsers, such as Internet Explorer, Opera Mini, IE Mobile and UC Browser are not officially supported, meaning certain features may not be displayed properly or behave exactly as expected.</p><br/> <br/><p><strong>mini.css</strong> is crafted with long-term support in mind, so expect it to be compatible with all modern browsers, as well as their future versions. However, most legacy and proxy browsers, such as Internet Explorer, Opera Mini, IE Mobile and UC Browser are not officially supported, meaning certain features may not be displayed properly or behave exactly as expected.</p><br/>
@@ -988,11 +988,28 @@
<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;icon-alert&quot;</span><span class="highlight-a">&gt;</span>Don't place text here.<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 inserting text inside icon elements.</p></div></div><br/><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;icon-alert inverse secondary&quot;</span><span class="highlight-a">&gt;&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 two color modifiers on the same icon.</p></div></div></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;icon-alert&quot;</span><span class="highlight-a">&gt;</span>Don't place text here.<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 inserting text inside icon elements.</p></div></div><br/><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;icon-alert inverse secondary&quot;</span><span class="highlight-a">&gt;&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 two color modifiers on the same icon.</p></div></div></div>
<div class="section double-padded"><h3>Notes</h3><ul><li>You can only use a <code>&lt;span&gt;</code> element to create an icon.</li><li>You can inline icons inside a paragraph or pretty much any other textual content. Icons scale relative to their parent element.</li></ul></div> <div class="section double-padded"><h3>Notes</h3><ul><li>You can only use a <code>&lt;span&gt;</code> element to create an icon.</li><li>You can inline icons inside a paragraph or pretty much any other textual content. Icons scale relative to their parent element.</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. 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></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. 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></ul></div>
</div><br/><div id="visibility-helpers" class="card fluid">
<h2 class="section double-padded">Visibility helpers</h2>
<div class="section"><p>You can use visibility helper classes to hide elements for all users (<code>.hidden</code>) or for users not on screen readers (<code>.visually-hidden</code>). There are also responsive visibility helpers provided, for hiding or visually hiding content only for specific screen sizes (<code>.hidden-sm</code>, <code>.hidden-md</code>, <code>.hidden-lg</code> and <code>.visually-hidden-sm</code>, <code>.visually-hidden-md</code> and <code>.visually-hidden-lg</code> respectively).</p></div>
<div class="section double-padded prefiller-example"><h3>Sample code</h3><pre><span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hidden&quot;</span><span class="highlight-a">&gt;</span>Not visible for any users.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;visually-hidden&quot;</span><span class="highlight-a">&gt;</span>Visible only for screen readers.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hidden-sm&quot;</span><span class="highlight-a">&gt;</span>Not visible for users on screens under 768px wide.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hidden-md&quot;</span><span class="highlight-a">&gt;</span>Not visible for users on screens 768px-1280px wide.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;hidden-lg&quot;</span><span class="highlight-a">&gt;</span>Not visible for users on screens wider than 1280px.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;visually-hidden-sm&quot;</span><span class="highlight-a">&gt;</span>Visible only for screen readers under 768px wide.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;visually-hidden-md&quot;</span><span class="highlight-a">&gt;</span>Visible only for screen readers 768px-1280px wide.<span class="highlight-a">&lt;/p&gt;</span></span>
<span class="code-line"><span class="highlight-a">&lt;p</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;visually-hidden-lg&quot;</span><span class="highlight-a">&gt;</span>Visible only for screen readers wider than 1280px.<span class="highlight-a">&lt;/p&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;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><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><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> </div></div>
<script> <script>
// Search 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"] }]; 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 options = {threshold:0.4, keys:["keys"]}; var options = {threshold:0.4, keys:["keys"]};
var fuse = new Fuse(docs,options); var fuse = new Fuse(docs,options);
function search(){ function search(){
@@ -1018,7 +1035,7 @@
el.forEach(e => e.innerHTML = '<form action="https://codepen.io/pen/define" method="POST" target="_blank" class="codepen-form">' + el.forEach(e => e.innerHTML = '<form action="https://codepen.io/pen/define" method="POST" target="_blank" class="codepen-form">' +
'<input type="hidden" name="data" value=\'' + JSON.stringify({ '<input type="hidden" name="data" value=\'' + JSON.stringify({
html : e.innerText, html : e.innerText,
css_external : "https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0-alpha.1/mini-default.css" css_external : "https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0-alpha.3/mini-default.css"
}).replace(/"/g, "&quot;") }).replace(/"/g, "&quot;")
.replace(/'/g, "&apos;") + '\'>' + .replace(/'/g, "&apos;") + '\'>' +
'<input type="image" class="codepen-link" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23424242%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2022%208.5%2022%2015.5%2012%2022%202%2015.5%202%208.5%2012%202%22%3E%3C%2Fpolygon%3E%3Cline%20x1%3D%2212%22%20y1%3D%2222%22%20x2%3D%2212%22%20y2%3D%2215.5%22%3E%3C%2Fline%3E%3Cpolyline%20points%3D%2222%208.5%2012%2015.5%202%208.5%22%3E%3C%2Fpolyline%3E%3Cpolyline%20points%3D%222%2015.5%2012%208.5%2022%2015.5%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%2212%22%20y1%3D%222%22%20x2%3D%2212%22%20y2%3D%228.5%22%3E%3C%2Fline%3E%3C%2Fsvg%3E" width="40" height="40" value="Open in Codepen">' + '<input type="image" class="codepen-link" src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23424242%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolygon%20points%3D%2212%202%2022%208.5%2022%2015.5%2012%2022%202%2015.5%202%208.5%2012%202%22%3E%3C%2Fpolygon%3E%3Cline%20x1%3D%2212%22%20y1%3D%2222%22%20x2%3D%2212%22%20y2%3D%2215.5%22%3E%3C%2Fline%3E%3Cpolyline%20points%3D%2222%208.5%2012%2015.5%202%208.5%22%3E%3C%2Fpolyline%3E%3Cpolyline%20points%3D%222%2015.5%2012%208.5%2022%2015.5%22%3E%3C%2Fpolyline%3E%3Cline%20x1%3D%2212%22%20y1%3D%222%22%20x2%3D%2212%22%20y2%3D%228.5%22%3E%3C%2Fline%3E%3C%2Fsvg%3E" width="40" height="40" value="Open in Codepen">' +

2
docs/v3/index.html
View File

@@ -19,7 +19,7 @@
<div class="index-splash-image"></div> <div class="index-splash-image"></div>
<h1 class="splash">mini<small>.css</small></h1> <h1 class="splash">mini<small>.css</small></h1>
<p class="splash">minimal, responsive, style-agnostic <br>CSS framework</p> <p class="splash">minimal, responsive, style-agnostic <br>CSS framework</p>
<p id="version-info">v3.0.0-alpha.2</p> <p id="version-info">v3.0.0-alpha.3</p>
<a class="button splash" href="docs">Get started</a> <a class="button splash" href="docs">Get started</a>
</div> </div>
<header class="row sticky"> <header class="row sticky">

2
docs/vinf.js
View File

@@ -1,4 +1,4 @@
// Get the current version of the Gluon branch. // Get the current version of the Gluon branch.
module.exports = { module.exports = {
version: 'v3.0.0-alpha.2' version: 'v3.0.0-alpha.3'
} }

2
src/flavors/mini-default.scss
View File

@@ -5,7 +5,7 @@
Flavor name: Default (mini-default) Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com) Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.2 mini.css version: v3.0.0-alpha.3
*/ */
@import '../mini/core'; @import '../mini/core';
@import '../mini/layout'; @import '../mini/layout';