Visibility

A series of utility classes that adjust the visibility property of a inline selector, with support for responsive modifiers.

Install

npm install seed-visibility --save

Dependencies

• seed-breakpoints
• seed-publish

Usage

All of the following classes support responsive modifiers.

Example

<div class="u-invisible">
  I'm invisible!
</div>
<div class="u-invisible u-visible@lg">
  I'm visible! But only for larger displays.
</div>

Screen readers

This technique is borrowed from Bootstrap’s screen reader class. Textual content within the utility class of .u-sr-only is only available for screen readers.

<div class="u-sr-only">Only screen readers can see this :)</div>

Configurations

Below are the default Sass configuration variables for seed-visibility. The variables can be found in the pack’s _config.scss file.

seed-visibility/_config.scss

$seed-visibility-invisible-namespace: u-invisible !default;
$seed-visibility-screen-reader-namespace: u-sr-only !default;
$seed-visibility-visible-namespace: u-visible !default;

Related

• seed-display
• seed-opacity