diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js index 8235148..0b0f19f 100644 --- a/docs/doc-fragments/docFragments.js +++ b/docs/doc-fragments/docFragments.js @@ -20,6 +20,7 @@ var tooltips = require('./tooltips'); var modalDialogs = require('./modalDialogs'); var spoilersAndAccordions = require('./spoilersAndAccordions'); var progressBars = require('./progressBars'); +var donutSpinners = require('./donutSpinners'); module.exports = [ gettingStarted, @@ -28,5 +29,5 @@ module.exports = [ formsAndInput, buttons, inputGrouping, header, navigationBar, footer, drawer, textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions, - progressBars + progressBars, donutSpinners ] diff --git a/docs/doc-fragments/donutSpinners.js b/docs/doc-fragments/donutSpinners.js index e69de29..dab393f 100644 --- a/docs/doc-fragments/donutSpinners.js +++ b/docs/doc-fragments/donutSpinners.js @@ -0,0 +1,38 @@ +module.exports = { + id: 'donut-spinners', + title: 'Donut spinners', + keywords: [`spinner`, `donut`, `loading`, `progress`, `primary`, `secondary`, `tertiary`, `inline`, `animation`, `animated`], + description: `

mini.css provides you with animated loading indicators (.spinner), which you can use to indicate that some content is loading.

`, + example: ``, + samples: [`
<div class="spinner"></div>
`], + notes: [`You can use either a <div> or a <span> element to create a donut spinner.`, + `You can add the role="progressbar" attribute to spinner donut elements to increase accessibility.`, + `You can inline donut spinners inside a paragraph or some other textual content.`], + customization: [ + `Foreground color for donut spinners can be changed by changing the value of the --spinner-fore-color variable.`, + `Background color for donut spinners can be changed by changing the value of the --spinner-back-color variable.`, + `You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.`, + `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.` + ], + modifiers: [ + { + title : 'Color variants', + description: `

You can create primary, secondary or tertiary (.primary, .secondary, .tertiary) donut spinners, simply by adding the appropriate color modifier.

`, + example: ``, + samples: [`
<div class="spinner primary"></div>
+<div class="spinner secondary"></div>
+<div class="spinner tertiary"></div>
`] + } + ], + dos: [], + donts: [ + { + description: `Avoid inserting text inside donut spinners.`, + sample: `
<div class="spinner">Don't place text here.</div>
` + }, + { + description: `Avoid applying two color modifiers on the same donut spinner.`, + sample: `
<div class="spinner primary secondary"></div>
` + } + ] +} diff --git a/docs/doc-fragments/progressBars.js b/docs/doc-fragments/progressBars.js index edb4b7d..2a3b2d1 100644 --- a/docs/doc-fragments/progressBars.js +++ b/docs/doc-fragments/progressBars.js @@ -9,7 +9,6 @@ module.exports = { customization: [ `Foreground color for progress bars can be changed by changing the value of the --progress-fore-color variable.`, `Background color for progress bars can be changed by changing the value of the --progress-back-color variable.`, - `Border color for cards can be changed by changing the value of the --card-border-color variable.`, `You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.`, `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 border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.` diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 7f4265b..091bf91 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -252,3 +252,4 @@ ## 20171230 - Documented `progress` element. +- Documented `spinner` component. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index ef295e5..4ef4aa3 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:

@@ -733,12 +733,24 @@

Best practices

<progress value="45" max="100"></progress>
 <progress value="450.0" max="1000.0"></progress>

Don't: Avoid using different values than 1000 for progress bars' max attribute, as well as floating point values for either max or value.


<progress value="450" max="1000" class="primary secondary"></progress>

Don't: Avoid applying two color modifiers on the same progress bar.

Notes

  • Progress bars are designed to work with a max="1000" attribute, as this covers the most common use-cases.
-

Customization

  • Foreground color for progress bars can be changed by changing the value of the --progress-fore-color variable.
  • Background color for progress bars can be changed by changing the value of the --progress-back-color variable.
  • Border color for cards can be changed by changing the value of the --card-border-color variable.
  • You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.
  • 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 border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.
+

Customization

  • Foreground color for progress bars can be changed by changing the value of the --progress-fore-color variable.
  • Background color for progress bars can be changed by changing the value of the --progress-back-color variable.
  • You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.
  • 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 border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.
+

+

Donut spinners

+

mini.css provides you with animated loading indicators (.spinner), which you can use to indicate that some content is loading.

+

Example

+

Sample code

<div class="spinner"></div>
+

Modifiers

+

Color variants

You can create primary, secondary or tertiary (.primary, .secondary, .tertiary) donut spinners, simply by adding the appropriate color modifier.

Example
Sample code
<div class="spinner primary"></div>
+<div class="spinner secondary"></div>
+<div class="spinner tertiary"></div>
+

Best practices

<div class="spinner">Don't place text here.</div>

Don't: Avoid inserting text inside donut spinners.


<div class="spinner primary secondary"></div>

Don't: Avoid applying two color modifiers on the same donut spinner.

+

Notes

  • You can use either a <div> or a <span> element to create a donut spinner.
  • You can add the role="progressbar" attribute to spinner donut elements to increase accessibility.
  • You can inline donut spinners inside a paragraph or some other textual content.
+

Customization

  • Foreground color for donut spinners can be changed by changing the value of the --spinner-fore-color variable.
  • Background color for donut spinners can be changed by changing the value of the --spinner-back-color variable.
  • You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.
  • 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.