vui-offscreen

This component contains SASS mixins and CSS wich can be used to position elements off the screen in an accessible manor.

For further information on this and other VUI components, see the docs at ui.valence.d2l.com.

Installation

vui-offscreen can be installed from Bower:

bower install vui-offscreen

Or alternatively from NPM:

npm install vui-offscreen

Depending on which installation method you choose, use that path when doing the SASS import:

@import 'bower_components/vui-offscreen/offscreen.scss';
// or...
@import 'node_modules/vui-offscreen/offscreen.scss';

Usage

Off-screen elements are valuable from an accessibility perspective when you wish to use elements which are only visible to screen readers. For more information, read WebAIM's article on Invisible Content.

To position an element offscreen, apply the vui-offscreen() mixin using any CSS selector.

For example, to hide this message:

<p class="offscreen">This message will only be visible to assistive technology, such as a screen reader.</p>

SCSS:

.offscreen {
	@include vui-offscreen();
}

Coding styles

See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.