From 3fa094f3326f46ab44e651cd390a2b3348e58527 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 11 Dec 2017 17:34:25 +0200 Subject: [PATCH] Toast message documentation --- docs/doc-fragments/docFragments.js | 3 ++- docs/doc-fragments/toasts.js | 21 +++++++++++++++++++++ docs/v3/DEVLOG.md | 1 + docs/v3/docs.html | 13 +++++++++++-- 4 files changed, 35 insertions(+), 3 deletions(-) create mode 100644 docs/doc-fragments/toasts.js diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js index aa1b228..acdf7e8 100644 --- a/docs/doc-fragments/docFragments.js +++ b/docs/doc-fragments/docFragments.js @@ -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 ] diff --git a/docs/doc-fragments/toasts.js b/docs/doc-fragments/toasts.js new file mode 100644 index 0000000..56e03d9 --- /dev/null +++ b/docs/doc-fragments/toasts.js @@ -0,0 +1,21 @@ +module.exports = { + id: 'toasts', + title: 'Toasts', + keywords: [`span`, `highlight`, `text highlighting`, `tag`, `primary`, `secondary`, `tertiary`, `inline-block`], + description: `

mini.css provides you with toast messages (.toast), allowing you to display native-looking notifications on mobile devices.

`, + example: `
This is a toast message!
`, + samples: [`
<span class="toast">This is a toast message!</span></mark>
`], + 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 --toast-fore-color variable.`, + `Background color for toast messages can be changed by changing the value of the --toast-back-color variable.`, + `Universal margin for elements can be changed globally by changing the value of the --universal-margin 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 --universal-padding variable.`, + `Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.` + ], + modifiers: [], + dos: [], + donts: [] +} diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 9624131..b837dfb 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -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. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index 3f6102f..e72b711 100644 --- a/docs/v3/docs.html +++ b/docs/v3/docs.html @@ -26,7 +26,7 @@
- +

Getting started

You can get started using mini.css in one of many ways. It is published on npm and yarn, so you can easily download it, using your preferred package manager:

@@ -620,11 +620,20 @@

Don't: Avoid applying multiple color modifiers on the same highlight.

Notes

Customization

+
+

Toasts

+

mini.css provides you with toast messages (.toast), allowing you to display native-looking notifications on mobile devices.

+

Example

This is a toast message!
+

Sample code

<span class="toast">This is a toast message!</span></mark>
+ + +

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 --toast-fore-color variable.
  • Background color for toast messages can be changed by changing the value of the --toast-back-color variable.
  • Universal margin for elements can be changed globally by changing the value of the --universal-margin 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 --universal-padding variable.
  • Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.