Skip to content
This repository has been archived by the owner on Jun 1, 2023. It is now read-only.

Commit

Permalink
Merge pull request #10 from Brightspace/web-component
Browse files Browse the repository at this point in the history
converting to a web component, renaming to "d2l-offscreen"
  • Loading branch information
dlockhart authored Jun 13, 2016
2 parents 4feec66 + a337233 commit 5a535aa
Show file tree
Hide file tree
Showing 7 changed files with 109 additions and 55 deletions.
10 changes: 10 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"extends": "eslint:recommended",
"env": {
"browser": true
},
"plugins": ["html"],
"globals": {
"Polymer": false
}
}
59 changes: 30 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,42 @@
# vui-offscreen
# d2l-offscreen
[![Bower version][bower-image]][bower-url]
[![NPM version][npm-image]][npm-url]
[![Build status][ci-image]][ci-url]
[![Dependency Status][dependencies-image]][dependencies-url]

This component contains [SASS mixins](http://sass-lang.com/) and CSS wich can be used to position elements off the screen in an accessible manor.
This component contain a [Polymer](https://www.polymer-project.org/1.0/)-based web component and [Sass mixin](http://sass-lang.com/), either of which 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](http://ui.valence.d2l.com/).
For further information on this and other D2L UI components, see the docs at [ui.valence.d2l.com](http://ui.valence.d2l.com/).

## Installation

`vui-offscreen` can be installed from [Bower][bower-url]:
`d2l-offscreen` can be installed from [Bower][bower-url]:
```shell
bower install vui-offscreen
bower install d2l-offscreen
```

Or alternatively from [NPM][npm-url]:
```shell
npm install vui-offscreen
```
## Usage

Depending on which installation method you choose, use that path when doing the SASS import:
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](http://webaim.org/techniques/css/invisiblecontent/).

```scss
@import 'bower_components/vui-offscreen/offscreen.scss';
// or...
@import 'node_modules/vui-offscreen/offscreen.scss';
### Polymer Web component

Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-offscreen.html`.

```html
<head>
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="../d2l-offscreen/d2l-offscreen.html">
</head>
```

## Usage
The `<d2l-offscreen>` custom element can now be used in your markup, the children of which will be hidden offscreen.

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](http://webaim.org/techniques/css/invisiblecontent/).
```html
<d2l-offscreen>This message will only be visible to assistive technology, such as a screen reader.</d2l-offscreen>
```

### Sass Mixin

To position an element offscreen, apply the `vui-offscreen()` mixin using any CSS selector.
Alternatively, to position an element offscreen using the Sass mixin, apply the `d2l-offscreen()` mixin to any CSS selector.

For example, to hide this message:
```html
Expand All @@ -41,20 +45,17 @@ For example, to hide this message:

SCSS:
```scss
@import 'bower_components/d2l-offscreen/offscreen.scss';
.offscreen {
@include vui-offscreen();
@include d2l-offscreen();
}
```

## Coding styles

See the [VUI Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on VUI naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo.
See the [VUI Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on D2L UI naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo.

[bower-url]: http://bower.io/search/?q=vui-offscreen
[bower-image]: https://img.shields.io/bower/v/vui-offscreen.svg
[npm-url]: https://npmjs.org/package/vui-offscreen
[npm-image]: https://img.shields.io/npm/v/vui-offscreen.svg
[ci-image]: https://travis-ci.org/Brightspace/valence-ui-offscreen.svg?branch=master
[ci-url]: https://travis-ci.org/Brightspace/valence-ui-offscreen
[dependencies-url]: https://david-dm.org/brightspace/valence-ui-offscreen
[dependencies-image]: https://img.shields.io/david/Brightspace/valence-ui-offscreen.svg
[bower-url]: http://bower.io/search/?q=d2l-offscreen
[bower-image]: https://img.shields.io/bower/v/d2l-offscreen.svg
[ci-image]: https://travis-ci.org/Brightspace/d2l-offscreen-ui.svg?branch=master
[ci-url]: https://travis-ci.org/Brightspace/d2l-offscreen-ui
21 changes: 19 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
{
"name": "vui-offscreen",
"main": "offscreen.scss",
"name": "d2l-offscreen",
"description": "Polymer web component and Sass mixin for positioning elements offscreen",
"main": [
"d2l-offscreen.html",
"offscreen.scss"
],
"license": "Apache-2.0",
"keywords": [
"d2l",
"ui",
"offscreen",
"scss",
"sass",
"mixins",
"polymer",
"web component"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0"
},
"ignore": [
".csslintrc",
".editorconfig",
Expand Down
26 changes: 26 additions & 0 deletions d2l-offscreen.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<link rel="import" href="../polymer/polymer.html">
<dom-module id="d2l-offscreen">
<template>
<style>
:host {
display: inline-block;
position: absolute !important;
left: -10000px;
overflow: hidden;
width: 1px;
height: 1px;
white-space: nowrap;
}
:host-context([dir="rtl"]) {
left: auto;
right: -10000px;
}
</style>
<content></content>
</template>
<script>
Polymer({
is: 'd2l-offscreen'
});
</script>
</dom-module>
5 changes: 0 additions & 5 deletions offscreen.css.scss

This file was deleted.

3 changes: 1 addition & 2 deletions offscreen.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@

@mixin vui-offscreen() {
@mixin d2l-offscreen() {

$offset: -10000px;

Expand Down
40 changes: 23 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,32 +1,38 @@
{
"name": "vui-offscreen",
"version": "1.0.1",
"description": "Mixins and CSS for positioning elements offscreen",
"name": "d2l-offscreen",
"version": "2.0.0",
"description": "Polymer web component and Sass mixin for positioning elements offscreen",
"private": true,
"scripts": {
"clean": "rimraf *.css",
"prebuild": "npm run clean",
"build": "node-sass --output-style expanded offscreen.css.scss offscreen.css",
"pretest": "npm run build",
"test": "csslint offscreen.css"
"postinstall": "bower install",
"test": "npm run test:lint:js && npm run test:lint:wc",
"test:lint:js": "eslint *.html",
"test:lint:wc": "polylint"
},
"repository": {
"type": "git",
"url": "https://github.com/Brightspace/valence-ui-offscreen.git"
"url": "https://github.com/Brightspace/d2l-offscreen-ui.git"
},
"keywords": [
"vui",
"valence-ui",
"d2l"
"d2l",
"ui",
"offscreen",
"scss",
"sass",
"mixins",
"polymer",
"web component"
],
"author": "D2L Corporation",
"license": "Apache 2.0",
"bugs": {
"url": "https://github.com/Brightspace/valence-ui-offscreen/issues"
"url": "https://github.com/Brightspace/d2l-offscreen-ui/issues"
},
"homepage": "https://github.com/Brightspace/valence-ui-offscreen",
"homepage": "https://github.com/Brightspace/d2l-offscreen-ui",
"devDependencies": {
"csslint": "^0.10.0",
"node-sass": "^3.4.2",
"rimraf": "^2.5.1"
"bower": "^1.7.9",
"eslint": "^2.5.3",
"eslint-plugin-html": "^1.4.0",
"polylint": "^2.10.1"
}
}

0 comments on commit 5a535aa

Please sign in to comment.