Visibility

Pack name: seed-visibility

Visibility utility pack for Seed

Contents

Install

npm install seed-visibility --save

Dependencies


Usage

All of the following classes support responsive modifiers.

Class Visibility
u-invisible hidden
u-visible visible

Example

I'm invisible!
I'm visible! But only for larger displays.
<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.

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