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

Toast message documentation

Browse source
This commit is contained in:
Angelos Chalaris 2017-12-11 17:34:25 +02:00
parent 95e31bd4ed
commit 68dedaea91
4 changed files with 35 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
docs/doc-fragments/docFragments.js
View file

@ -15,6 +15,7 @@ var navigationBar = require('./navigationBar');
var footer = require('./footer');
var drawer = require('./drawer');
var textHighlighting = require('./textHighlighting');
var toasts = require('./toasts');
module.exports = [
gettingStarted,
@ -22,5 +23,5 @@ module.exports = [
grid, cards, cardSections,
formsAndInput, buttons, inputGrouping,
header, navigationBar, footer, drawer,
textHighlighting
textHighlighting, toasts
]

21
docs/doc-fragments/toasts.js Normal file
View file

@ -0,0 +1,21 @@
module.exports = {
id: 'toasts',
title: 'Toasts',
keywords: [`span`, `highlight`, `text highlighting`, `tag`, `primary`, `secondary`, `tertiary`, `inline-block`],
description: `<p><strong>mini.css</strong> provides you with toast messages (<code>.toast</code>), allowing you to display native-looking notifications on mobile devices.</p>`,
example: `<div class="container" style="height: 8rem; position: relative;"><span class="toast doc" style="position: absolute;">This is a toast message!</span></div>`,
samples: [`<pre><span class="code-line"><span class="highlight-a">&lt;span</span> <span class="highlight-b">class</span>=<span class="highlight-c">&quot;toast&quot;</span><span class="highlight-a">&gt;</span>This is a toast message!<span class="highlight-a">&lt;/span&gt;</span><span class="highlight-a">&lt;/mark&gt;</span></span></pre>`],
notes: [
`Toast elements do not have any pre-defined behavior, but you can use Javascript to add functionality to them.`
],
customization: [
`Text color for toast messages can be changed by changing the value of the <code>--toast-fore-color</code> variable.`,
`Background color for toast messages can be changed by changing the value of the <code>--toast-back-color</code> variable.`,
`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.`,
`Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.`,
`Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.`
],
modifiers: [],
dos: [],
donts: []
}

1
docs/v3/DEVLOG.md
View file

@ -229,3 +229,4 @@
- Documented `mark` elements.
- Fixed a broken link in `index.html`.
- Added the appropriate script for generating Codepen links dynamically. Oh, yeah!
- Documented `.toast` messages.

13
docs/v3/docs.html
View file

@ -26,7 +26,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="#text-highlighting" id="link-to-text-highlighting">Text highlighting</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="#text-highlighting" id="link-to-text-highlighting">Text highlighting</a><a href="#toasts" id="link-to-toasts">Toasts</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>
<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>
@ -620,11 +620,20 @@
</pre></div><div class="col-sm-12 col-md-6"><p><mark class="dont">Don't:</mark>&nbsp;Avoid applying multiple color modifiers on the same highlight.</p></div></div></div>
<div class="section double-padded"><h3>Notes</h3><ul><li>Highlighted text scales according to its parent element, so it can be used inside any kind of element (headings, forms, paragraphs etc.).</li></ul></div>
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for highlighted text can be changed by changing the value of the <code>--mark-fore-color</code> variable.</li><li>Background color for highlighted text can be changed by changing the value of the <code>--mark-back-color</code> variable.</li><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</li></ul></div>
</div><br/><div id="toasts" class="card fluid">
<h2 class="section double-padded">Toasts</h2>
<div class="section"><p><strong>mini.css</strong> provides you with toast messages (<code>.toast</code>), allowing you to display native-looking notifications on mobile devices.</p></div>
<div class="section"><h3>Example</h3><div class="container" style="height: 8rem; position: relative;"><span class="toast doc" style="position: absolute;">This is a toast message!</span></div></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;toast&quot;</span><span class="highlight-a">&gt;</span>This is a toast message!<span class="highlight-a">&lt;/span&gt;</span><span class="highlight-a">&lt;/mark&gt;</span></span></pre></div>
<div class="section double-padded"><h3>Notes</h3><ul><li>Toast elements do not have any pre-defined behavior, but you can use Javascript to add functionality to them.</li></ul></div>
<div class="section double-padded"><h3>Customization</h3><ul><li>Text color for toast messages can be changed by changing the value of the <code>--toast-fore-color</code> variable.</li><li>Background color for toast messages can be changed by changing the value of the <code>--toast-back-color</code> variable.</li><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><li>Universal padding for elements can be changed globally by changing the value of the <code>--universal-padding</code> variable.</li><li>Universal border radius for elements can be changed globally by changing the value of the <code>--universal-border-radius</code> variable.</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: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] }];
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: "text-highlighting", keys: ["mark","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] },{id: "toasts", keys: ["span","highlight","text highlighting","tag","primary","secondary","tertiary","inline-block"] }];
var options = {threshold:0.4, keys:["keys"]};
var fuse = new Fuse(docs,options);
function search(){