34 lines
4.6 KiB
JavaScript
34 lines
4.6 KiB
JavaScript
module.exports = {
|
|
id: 'visibility-helpers',
|
|
title: 'Visibility helpers',
|
|
keywords: ['hidden', 'visibility', 'visually-hidden', 'accessibility', 'utility'],
|
|
description: '<p>You can use visibility helper classes to hide elements for all users (<code>.hidden</code>) or for users not on screen readers (<code>.visually-hidden</code>). There are also responsive visibility helpers provided, for hiding or visually hiding content only for specific screen sizes (<code>.hidden-sm</code>, <code>.hidden-md</code>, <code>.hidden-lg</code> and <code>.visually-hidden-sm</code>, <code>.visually-hidden-md</code> and <code>.visually-hidden-lg</code> respectively).</p>',
|
|
example: '',
|
|
samples: [`<pre><span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hidden"</span><span class="highlight-a">></span>Not visible for any users.<span class="highlight-a"></p></span></span>
|
|
<span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"visually-hidden"</span><span class="highlight-a">></span>Visible only for screen readers.<span class="highlight-a"></p></span></span>
|
|
<span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hidden-sm"</span><span class="highlight-a">></span>Not visible for users on screens under 768px wide.<span class="highlight-a"></p></span></span>
|
|
<span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hidden-md"</span><span class="highlight-a">></span>Not visible for users on screens 768px-1280px wide.<span class="highlight-a"></p></span></span>
|
|
<span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hidden-lg"</span><span class="highlight-a">></span>Not visible for users on screens wider than 1280px.<span class="highlight-a"></p></span></span>
|
|
<span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"visually-hidden-sm"</span><span class="highlight-a">></span>Visible only for screen readers under 768px wide.<span class="highlight-a"></p></span></span>
|
|
<span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"visually-hidden-md"</span><span class="highlight-a">></span>Visible only for screen readers 768px-1280px wide.<span class="highlight-a"></p></span></span>
|
|
<span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"visually-hidden-lg"</span><span class="highlight-a">></span>Visible only for screen readers wider than 1280px.<span class="highlight-a"></p></span></span></pre>`],
|
|
notes: [
|
|
'Visibility helpers use <code>!important</code> 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:<ul><li>small: less than <code>768px</code> wide</li><li>medium: more than or equal to <code>768px</code> wide and less than <code>1280px</code> wide</li><li>large: <code>1280px</code> wide or more</li></ul>',
|
|
'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: `<pre><span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hidden-sm hidden-md"</span><span class="highlight-a">></span>Not visible for users on screens under 1280px wide.<span class="highlight-a"></p></span></span></pre>`
|
|
}
|
|
],
|
|
donts: [
|
|
{
|
|
description: `Avoid combining <code>.hidden</code> and <code>.visually-hidden</code> or responsive helpers for the same screen size.`,
|
|
sample: `<pre><span class="code-line"><span class="highlight-a"><p</span> <span class="highlight-b">class</span>=<span class="highlight-c">"hidden visually-hidden"</span><span class="highlight-a">></span>Do not do this.<span class="highlight-a"></p></span></span></pre>`
|
|
}
|
|
]
|
|
}
|