From cc138c7ce70b7b681e681588975f57fb6ed90f18 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 29 Jan 2018 12:58:36 +0200 Subject: [PATCH] Documented visibility helpers --- dist/mini-default.css | 2 +- docs/build-docs.js | 3 +-- docs/doc-fragments/docFragments.js | 4 ++- docs/doc-fragments/visibilityHelpers.js | 34 +++++++++++++++++++++++++ docs/v3/DEVLOG.md | 4 +++ docs/v3/docs.html | 27 ++++++++++++++++---- docs/v3/index.html | 2 +- docs/vinf.js | 2 +- src/flavors/mini-default.scss | 2 +- 9 files changed, 68 insertions(+), 12 deletions(-) create mode 100644 docs/doc-fragments/visibilityHelpers.js diff --git a/dist/mini-default.css b/dist/mini-default.css index 2ccf142..a4daab3 100644 --- a/dist/mini-default.css +++ b/dist/mini-default.css @@ -3,7 +3,7 @@ Flavor name: Default (mini-default) Author: Angelos Chalaris (chalarangelo@gmail.com) Maintainers: Angelos Chalaris - mini.css version: v3.0.0-alpha.2 + mini.css version: v3.0.0-alpha.3 */ /* Browsers resets and base typography. diff --git a/docs/build-docs.js b/docs/build-docs.js index 629468e..0d27845 100644 --- a/docs/build-docs.js +++ b/docs/build-docs.js @@ -1,7 +1,6 @@ var fs = require('fs'); 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 var indexHtml = ` diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js index a24bec3..b5d0a93 100644 --- a/docs/doc-fragments/docFragments.js +++ b/docs/doc-fragments/docFragments.js @@ -23,6 +23,7 @@ var spoilersAndAccordions = require('./spoilersAndAccordions'); var progressBars = require('./progressBars'); var donutSpinners = require('./donutSpinners'); var icons = require('./icons'); +var visibilityHelpers = require('./visibilityHelpers'); module.exports = [ gettingStarted, @@ -33,5 +34,6 @@ module.exports = [ tables, textHighlighting, toasts, tooltips, modalDialogs, spoilersAndAccordions, progressBars, donutSpinners, - icons + icons, + visibilityHelpers ] diff --git a/docs/doc-fragments/visibilityHelpers.js b/docs/doc-fragments/visibilityHelpers.js new file mode 100644 index 0000000..fe53500 --- /dev/null +++ b/docs/doc-fragments/visibilityHelpers.js @@ -0,0 +1,34 @@ +module.exports = { + id: 'visibility-helpers', + title: 'Visibility helpers', + keywords: ['hidden', 'visibility', 'visually-hidden', 'accessibility', 'utility'], + description: '

You can use visibility helper classes to hide elements for all users (.hidden) or for users not on screen readers (.visually-hidden). There are also responsive visibility helpers provided, for hiding or visually hiding content only for specific screen sizes (.hidden-sm, .hidden-md, .hidden-lg and .visually-hidden-sm, .visually-hidden-md and .visually-hidden-lg respectively).

', + example: '', + samples: [`
<p class="hidden">Not visible for any users.</p>
+<p class="visually-hidden">Visible only for screen readers.</p>
+<p class="hidden-sm">Not visible for users on screens under 768px wide.</p>
+<p class="hidden-md">Not visible for users on screens 768px-1280px wide.</p>
+<p class="hidden-lg">Not visible for users on screens wider than 1280px.</p>
+<p class="visually-hidden-sm">Visible only for screen readers under 768px wide.</p>
+<p class="visually-hidden-md">Visible only for screen readers 768px-1280px wide.</p>
+<p class="visually-hidden-lg">Visible only for screen readers wider than 1280px.</p>
`], + notes: [ + 'Visibility helpers use !important 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:', + '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: `
<p class="hidden-sm hidden-md">Not visible for users on screens under 1280px wide.</p>
` + } + ], + donts: [ + { + description: `Avoid combining .hidden and .visually-hidden or responsive helpers for the same screen size.`, + sample: `
<p class="hidden visually-hidden">Do not do this.</p>
` + } + ] +} diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index d08db11..7b5538f 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -297,3 +297,7 @@ - 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. + +## 20180129 + +- Documented visibility helpers. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index 1a8712f..edc2bde 100644 --- a/docs/v3/docs.html +++ b/docs/v3/docs.html @@ -23,15 +23,15 @@
- +

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:

npm install mini.css
yarn add mini.css

Alternatively, you can use either rawgit or cdnjs to import mini.css into your HTML page's <head> tag:

- 
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0-alpha.2/dist/mini-default.min.css">
- 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0-alpha.2/mini-default.min.css">
+ 
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0-alpha.3/dist/mini-default.min.css">
+ 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0-alpha.3/mini-default.min.css">

After adding mini.css to your project, remember to also add the following line inside your HTML page's <head> tag to utilize the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

mini.css 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.


@@ -988,11 +988,28 @@

Best practices

<span class="icon-alert">Don't place text here.</span>

Don't: Avoid inserting text inside icon elements.


<span class="icon-alert inverse secondary"></span>

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

Notes

  • You can only use a <span> element to create an icon.
  • You can inline icons inside a paragraph or pretty much any other textual content. Icons scale relative to their parent element.

Customization

  • 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.
+

+

Visibility helpers

+ +

You can use visibility helper classes to hide elements for all users (.hidden) or for users not on screen readers (.visually-hidden). There are also responsive visibility helpers provided, for hiding or visually hiding content only for specific screen sizes (.hidden-sm, .hidden-md, .hidden-lg and .visually-hidden-sm, .visually-hidden-md and .visually-hidden-lg respectively).

+ +

Sample code

<p class="hidden">Not visible for any users.</p>
+<p class="visually-hidden">Visible only for screen readers.</p>
+<p class="hidden-sm">Not visible for users on screens under 768px wide.</p>
+<p class="hidden-md">Not visible for users on screens 768px-1280px wide.</p>
+<p class="hidden-lg">Not visible for users on screens wider than 1280px.</p>
+<p class="visually-hidden-sm">Visible only for screen readers under 768px wide.</p>
+<p class="visually-hidden-md">Visible only for screen readers 768px-1280px wide.</p>
+<p class="visually-hidden-lg">Visible only for screen readers wider than 1280px.</p>
+ +

Best practices

<p class="hidden-sm hidden-md">Not visible for users on screens under 1280px wide.</p>

Do: You can apply multiple responsive visibility helpers on the same element.

<p class="hidden visually-hidden">Do not do this.</p>

Don't: Avoid combining .hidden and .visually-hidden or responsive helpers for the same screen size.

+

Notes

  • Visibility helpers use !important 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:
    • small: less than 768px wide
    • medium: more than or equal to 768px wide and less than 1280px wide
    • large: 1280px wide or more
  • 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.
+