diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js index 0de910c..8235148 100644 --- a/docs/doc-fragments/docFragments.js +++ b/docs/doc-fragments/docFragments.js @@ -19,6 +19,7 @@ var toasts = require('./toasts'); var tooltips = require('./tooltips'); var modalDialogs = require('./modalDialogs'); var spoilersAndAccordions = require('./spoilersAndAccordions'); +var progressBars = require('./progressBars'); module.exports = [ gettingStarted, @@ -26,5 +27,6 @@ module.exports = [ grid, cards, cardSections, formsAndInput, buttons, inputGrouping, header, navigationBar, footer, drawer, - textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions + textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions, + progressBars ] diff --git a/docs/doc-fragments/donutSpinners.js b/docs/doc-fragments/donutSpinners.js new file mode 100644 index 0000000..e69de29 diff --git a/docs/doc-fragments/progressBars.js b/docs/doc-fragments/progressBars.js new file mode 100644 index 0000000..edb4b7d --- /dev/null +++ b/docs/doc-fragments/progressBars.js @@ -0,0 +1,45 @@ +module.exports = { + id: 'progress-bars', + title: 'Progress bars', + keywords: [`progress`, `bar`, `primary`, `secondary`, `tertiary`, `inline`], + description: `

Progress bars are minimally styled to match with the rest of the framework's aesthetics and be consistent across all modern browsers.

`, + example: ``, + samples: [`
<progress value="450" max="1000"></progress>
`], + 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.` + ], + modifiers: [ + { + title : 'Inline progress bars', + description: `

You can create inline progress bars (.inline), by applying the appropriate modifier.

`, + example: `

45% completed...

`, + samples: [`
<progress value="450" max="1000" class="inline"></progress>
`] + }, + { + title : 'Color variants', + description: `

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

`, + example: ``, + samples: [`
<progress value="450" max="1000" class="primary"></progress>
+<progress value="450" max="1000" class="secondary"></progress>
+<progress value="450" max="1000" class="tertiary"></progress>
`] + } + ], + dos: [], + donts: [ + { + description: `Avoid using different values than 1000 for progress bars' max attribute, as well as floating point values for either max or value.`, + sample: `
<progress value="45" max="100"></progress>
+<progress value="450.0" max="1000.0"></progress>
` + }, + { + description: `Avoid applying two color modifiers on the same progress bar.`, + sample: `
<progress value="450" max="1000" class="primary secondary"></progress>
` + } + ] +} diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index f65337e..7f4265b 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -248,3 +248,7 @@ - Added alternative color mixins for `progress` and `.spinner`. - Removed size variants and the inline variant mixin from `progress` and `.spinner`. - Updated flavor file with the `progress` module and mixed-in variants. + +## 20171230 + +- Documented `progress` element. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index d92c546..ef295e5 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:

@@ -721,11 +721,24 @@ </div>

Don't: You should not place anything between the checkbox controlling the collapsible spoiler and its label or between the label and the content container.

Notes

Customization

+
+

Progress bars

+

Progress bars are minimally styled to match with the rest of the framework's aesthetics and be consistent across all modern browsers.

+

Example

+

Sample code

<progress value="450" max="1000"></progress>
+

Modifiers

+

Inline progress bars

You can create inline progress bars (.inline), by applying the appropriate modifier.

Example

45% completed...

Sample code
<progress value="450" max="1000" class="inline"></progress>

Color variants

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

Example
Sample code
<progress value="450" max="1000" class="primary"></progress>
+<progress value="450" max="1000" class="secondary"></progress>
+<progress value="450" max="1000" class="tertiary"></progress>
+

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

+

Customization