Nonchalantly Perusing Magazines

    This package has been deprecated

    Author message:

    replaced with BrightspaceUI/offscreen Bower package

    vui-offscreen

    1.0.1 • Public • Published

    vui-offscreen

    Bower version NPM version Build status Dependency Status

    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.

    Install

    npm i vui-offscreen

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    Apache 2.0

    Last publish

    Collaborators

    • d2l-travis-deploy