From 80cee6cf411c8ee0e5f0f8e5cf71476b4b676c65 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Tue, 29 Mar 2016 10:04:27 -0400 Subject: [PATCH 1/8] Add web components for typography. --- .csslintrc | 1 - .gitignore | 3 +- .npmignore | 9 - .travis.yml | 14 +- README.md | 95 +- base-font-size.scss | 1 - bower.json | 10 +- demo/index.html | 81 + font.scss | 37 - fonts.html | 53 + headings.html | 46 + headings.scss | 50 - help-text.html | 21 + help-text.scss | 5 - import-once.scss | 15 - package.json | 37 +- px-to-base-rem.scss | 6 - px-to-rem.scss | 13 - screenshots/build.js | 12 +- small-text.html | 35 + small-text.scss | 34 - test/perceptual/typography.html | 80 + test/perceptual/typography.html.ignore | 7917 ++++++++++++++++++++++++ test/typography.html | 69 - typography.css.scss | 36 - typography.html | 71 + typography.scss | 16 - 27 files changed, 8362 insertions(+), 405 deletions(-) delete mode 100644 .csslintrc delete mode 100644 .npmignore delete mode 100644 base-font-size.scss create mode 100644 demo/index.html delete mode 100644 font.scss create mode 100644 fonts.html create mode 100644 headings.html delete mode 100644 headings.scss create mode 100644 help-text.html delete mode 100644 help-text.scss delete mode 100644 import-once.scss delete mode 100644 px-to-base-rem.scss delete mode 100644 px-to-rem.scss create mode 100644 small-text.html delete mode 100644 small-text.scss create mode 100644 test/perceptual/typography.html create mode 100644 test/perceptual/typography.html.ignore delete mode 100644 test/typography.html delete mode 100644 typography.css.scss create mode 100644 typography.html delete mode 100644 typography.scss diff --git a/.csslintrc b/.csslintrc deleted file mode 100644 index e6996a0..0000000 --- a/.csslintrc +++ /dev/null @@ -1 +0,0 @@ ---ignore=adjoining-classes,import diff --git a/.gitignore b/.gitignore index 9807517..d543f10 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ bower_components/ node_modules/ -test/test.css -typography.css +test/perceptual/typography.html.ignore diff --git a/.npmignore b/.npmignore deleted file mode 100644 index f17d210..0000000 --- a/.npmignore +++ /dev/null @@ -1,9 +0,0 @@ -.csslintrc -.editorconfig -.gitattributes -.gitignore -.npmignore -.travis.yml -bower_components -node_modules -test/test.scss diff --git a/.travis.yml b/.travis.yml index 042fc12..a8b73a3 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,19 +1,13 @@ language: node_js -node_js: -- 5.6 +node_js: stable before_script: - gem install percy-cli +script: +- polylint +- wct --skip-plugin local after_success: - '[ "$TRAVIS_SECURE_ENV_VARS" = "true" ] && npm run perceptual-diff' sudo: false -deploy: - provider: npm - email: d2ltravisdeploy@d2l.com - api_key: - secure: lh51pn6JgbDjHlcvWWGJWxO/JwAMurTk/TFFYO6447lvP1QsMogcs5nUNNp7045YpEFcc7v94tlz42UMrFCXRoRVKy0g3AWKtATVl1FQ4oY7X18C3KuQMOVBZt89uQVX5X2+LOkDnlGEzYNerFWcDAV8FoBOUIKwPeUvCNZJO5s= - on: - tags: true - all_branches: true env: global: secure: Z291fOPTg/3XEw/pBgA/9s4y0cyc/CkFdn0YRIbLyk66y9FWVIwacytGsl2hs2+hQZXXizrx6GK+NEUCuOB+CpFzFi9sE0+b+HIQ/hAnPC8L9AdGWKiIS6skekjJC+ZhQRJq+/DnSe8/N8Mr3YA6rO3PiqHlVJ5787y5vId4w2E= diff --git a/README.md b/README.md index 6310819..13fe1a0 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ +**Looking for SASS-based `vui-typography`?** It's [over here](https://github.com/Brightspace/valence-ui-typography/tree/sass). + # vui-typography [![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 that can be used to produce basic typography styles. +A Valence UI, [Polymer](https://www.polymer-project.org/1.0/)-based web component for typography styles. For further information on this and other VUI components, see the docs at [ui.valence.d2l.com](http://ui.valence.d2l.com/). @@ -15,30 +15,26 @@ For further information on this and other VUI components, see the docs at [ui.va bower install vui-typography ``` -Or alternatively from [NPM][npm-url]: -```shell -npm install vui-typography -``` +## Usage -Depending on which installation method you choose, use that path when doing the SASS import: +Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), import `typography.html`, and include the `vui-typography` style: -```scss -@import 'bower_components/vui-typography/typography.scss'; -// or... -@import "node_modules/vui-typography/typography.scss"; +```html + + + + + ``` -## Usage - ### Body -The `vui-typography` mixin can be used to set up the base font properties, typically applied to the `` element. +The `vui-typography` class can be used to set base font properties, typically applied to the `` element. -```scss -@import '/typography.scss'; -body { - @include vui-typography(); -} +```html + + ... + ``` The default font family, color and line/character spacing will look like this: @@ -47,69 +43,30 @@ The default font family, color and line/character spacing will look like this: ### Headings -There are four separate mixins for the available heading styles. These would typically be applied to the `

`, `

`, `

` and `

` HTML elements, though it's not a requirement. - -```scss -@import '/headings.scss'; - -h1 { - @include vui-typography-heading1(); -} - -h2 { - @include vui-typography-heading2(); -} +There are four separate classes for the available heading styles. These would typically be applied to the `

`, `

`, `

` and `

` HTML elements, though it's not a requirement. -h3 { - @include vui-typography-heading3(); -} - -h4 { - @include vui-typography-heading4(); -} +```html +

...

+

...

+

...

+

...

``` ![screenshot of paragraph text](/screenshots/headings.png?raw=true) -The margins around each heading style can be customized by passing in an override value to the mixin: - -```scss -h2.no-margin { - @include vui-typography-heading2($margin: 0); -} -``` - -### Small Text +### Help Text -There are two mixins available to achieve a smaller look. They're both available by importing `small-text.scss`. +The custom `vui-help-text` element can be used to apply styling to help text. -The first is `vui-typography-small-text()`: -```scss -.small { - @include vui-typography-small-text(); -} +```html +... ``` -![screenshot of small text](/screenshots/small.png?raw=true) - -The second, `vui-typography-small-strong-text()` has a heavier font-weight: -```scss -.small-strong { - @include vui-typography-small-strong-text(); -} -``` - -![screenshot of small strong text](/screenshots/small-strong.png?raw=true) - ## 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. [bower-url]: http://bower.io/search/?q=vui-typography [bower-image]: https://img.shields.io/bower/v/vui-typography.svg -[npm-url]: https://www.npmjs.org/package/vui-typography -[npm-image]: https://img.shields.io/npm/v/vui-typography.svg [ci-url]: https://travis-ci.org/Brightspace/valence-ui-typography [ci-image]: https://img.shields.io/travis-ci/Brightspace/valence-ui-typography.svg -[dependencies-url]: https://david-dm.org/brightspace/valence-ui-typography -[dependencies-image]: https://img.shields.io/david/Brightspace/valence-ui-typography.svg diff --git a/base-font-size.scss b/base-font-size.scss deleted file mode 100644 index 1743ed0..0000000 --- a/base-font-size.scss +++ /dev/null @@ -1 +0,0 @@ -$vui-base-fontSize: 20px; diff --git a/bower.json b/bower.json index 113da90..26ad4f4 100644 --- a/bower.json +++ b/bower.json @@ -1,18 +1,20 @@ { "name": "vui-typography", - "main": "typography.scss", + "main": "typography.html", "license": "Apache-2.0", "ignore": [ "test", - ".csslintrc", ".editorconfig", ".gitattributes", ".gitignore", - ".npmignore", ".travis.yml", "package.json" ], "dependencies": { - "vui-colors": "^0.2.0" + "polymer": "^1.3.0", + "vui-colors": "^1.0.1" + }, + "devDependencies": { + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.20" } } diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..40738f6 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,81 @@ + + + + + Typography Snapshot + + + + + + + +

Typography

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementStyle
Headings +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Small Text +

Small Text

+
Small Strong Text +

Small Strong Text

+
Help Text + Help Text +
Paragraph +

+ Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack. +

+
+ + diff --git a/font.scss b/font.scss deleted file mode 100644 index 83b92a3..0000000 --- a/font.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import 'bower_components/vui-colors/colors.scss'; -@import 'px-to-base-rem.scss'; - -@mixin vui-typography-font( - $line-height: 1.5 - ) { - - color: $vui-color-ferrite; - font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; - font-size: 1rem; - font-weight: 300; - line-height: $line-height; - letter-spacing: px-to-base-rem(0.3px); - - &.vui-dyslexic, - .vui-dyslexic { - font-weight: 400; - font-family: 'Open Dyslexic', sans-serif; - } - - :lang(ar) { - font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif; - } - :lang(zh-CN) { - font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; - } - :lang(zh-TW) { - font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; - } - :lang(ko) { - font-family: 'Apple SD Gothic Neo', Dotum, sans-serif; - } - :lang(ja) { - font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif; - } - -} diff --git a/fonts.html b/fonts.html new file mode 100644 index 0000000..c84cbaf --- /dev/null +++ b/fonts.html @@ -0,0 +1,53 @@ + + + + + + diff --git a/headings.html b/headings.html new file mode 100644 index 0000000..5674d8e --- /dev/null +++ b/headings.html @@ -0,0 +1,46 @@ + + + + + + diff --git a/headings.scss b/headings.scss deleted file mode 100644 index 0cf2b64..0000000 --- a/headings.scss +++ /dev/null @@ -1,50 +0,0 @@ -@import 'bower_components/vui-colors/colors.scss'; -@import 'px-to-base-rem.scss'; - -@mixin vui-typography-heading1($margin: 1.5rem 0 1.5rem 0) { - - color: $vui-color-ferrite; - font-family: inherit; - font-size: 2rem; - font-weight: 300; - line-height: 3rem; - letter-spacing: px-to-base-rem(-0.5px); - margin: $margin; - -} - -@mixin vui-typography-heading2($margin: 1.5rem 0 1.5rem 0) { - - color: $vui-color-ferrite; - font-family: inherit; - font-size: 1.5rem; - font-weight: 300; - line-height: 2.25rem; - letter-spacing: px-to-base-rem(-0.3px); - margin: $margin; - -} - -@mixin vui-typography-heading3($margin: 1.5rem 0 1.5rem 0) { - - color: $vui-color-ferrite; - font-family: inherit; - font-size: 1rem; - font-weight: 700; - line-height: 1.5rem; - letter-spacing: px-to-base-rem(0.5px); - margin: $margin; - -} - -@mixin vui-typography-heading4($margin: 1.5rem 0 1.5rem 0) { - - color: $vui-color-ferrite; - font-family: inherit; - font-size: 1rem; - font-weight: 400; - line-height: 1.5rem; - letter-spacing: px-to-base-rem(0.4px); - margin: $margin; - -} diff --git a/help-text.html b/help-text.html new file mode 100644 index 0000000..fe4fc7d --- /dev/null +++ b/help-text.html @@ -0,0 +1,21 @@ + + + + + + + + diff --git a/help-text.scss b/help-text.scss deleted file mode 100644 index f69a73d..0000000 --- a/help-text.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'small-text.scss'; - -@mixin vui-typography-help-text() { - @include vui-typography-small-text($margin: auto); -} diff --git a/import-once.scss b/import-once.scss deleted file mode 100644 index b0b33fd..0000000 --- a/import-once.scss +++ /dev/null @@ -1,15 +0,0 @@ - -$imported-modules: () !default; - -@mixin import-once($name, $warn: true) { - - @if (index($imported-modules, $name) == null) { - - $imported-modules: append($imported-modules, $name) !global; - @content; - - } @else if $warn == true { - @warn "Module `#{$name}` has already been imported."; - } - -} diff --git a/package.json b/package.json index ed40c00..a070770 100644 --- a/package.json +++ b/package.json @@ -1,41 +1,30 @@ { "name": "vui-typography", - "version": "2.0.2", - "description": "Mixins and CSS for applying basic typography styles", + "version": "3.0.0", + "description": "Web component with shared typography styles", + "private": true, "scripts": { - "clean": "rimraf *.css && rimraf ./test/*.css", - "prebuild": "npm run clean", - "build:sass": "node-sass --output-style expanded typography.css.scss typography.css", - "build": "npm run build:sass", - "perceptual-diff": "percy snapshot test/", + "prebuild": "cpy *.html ./bower_components/temp", + "build": "vulcanize ./bower_components/temp/typography.html > ./test/perceptual/typography.html.ignore", + "postbuild": "rimraf ./bower_components/temp", + "preperceptual-diff": "npm run build", + "perceptual-diff": "percy snapshot test/perceptual --enable_javascript", "postinstall": "bower install", "screenshot": "phantomjs ./screenshots/build.js", - "pretest": "npm run build && cpy typography.css test", - "test": "csslint typography.css" + "test": "polylint" }, "repository": { "type": "git", "url": "https://github.com/Brightspace/valence-ui-typography.git" }, - "keywords": [ - "d2l", - "valence-ui", - "vui" - ], "author": "D2L Corporation", "license": "Apache-2.0", - "bugs": { - "url": "https://github.com/Brightspace/valence-ui-typography/issues" - }, - "homepage": "https://github.com/Brightspace/valence-ui-typography", - "dependencies": { - "bower": "^1.7.7" - }, "devDependencies": { + "bower": "^1.7.7", "cpy-cli": "^1.0.0", - "csslint": "^0.10.0", - "node-sass": "^3.4.2", "phantomjs-prebuilt": "^2.1.4", - "rimraf": "^2.5.2" + "polylint": "^2.10.0", + "rimraf": "^2.5.2", + "vulcanize": "^1.14.7" } } diff --git a/px-to-base-rem.scss b/px-to-base-rem.scss deleted file mode 100644 index 352698a..0000000 --- a/px-to-base-rem.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import 'base-font-size.scss'; -@import 'px-to-rem.scss'; - -@function px-to-base-rem($targetPx) { - @return px-to-rem($targetPx, $vui-base-fontSize); -} diff --git a/px-to-rem.scss b/px-to-rem.scss deleted file mode 100644 index 90fe1fb..0000000 --- a/px-to-rem.scss +++ /dev/null @@ -1,13 +0,0 @@ - -@function px-to-rem($targetPx, $basePx) { - @if (unitless($targetPx)) { - $targetPx: $targetPx * 1px; - } - @if (unitless($basePx)) { - $basePx: $basePx * 1px; - } - @if ($targetPx / $basePx == 0) { - @return 0; - } - @return ($targetPx / $basePx) * 1rem; -} diff --git a/screenshots/build.js b/screenshots/build.js index 66e4bcd..4eb97eb 100644 --- a/screenshots/build.js +++ b/screenshots/build.js @@ -4,8 +4,11 @@ page.viewportSize = {width: 750, height: 1000}; function capture(name, width) { var clipRect = page.evaluate(function(n) { - return document.querySelector('.screenshot-' + n) - .getBoundingClientRect(); + var thing = document.querySelector('.screenshot-' + n); + thing.style.display = 'inline-block'; + return thing.getBoundingClientRect(); + //return document.querySelector('.screenshot-' + n) + // .getBoundingClientRect(); }, name); page.clipRect = { @@ -14,13 +17,14 @@ function capture(name, width) { width: width || clipRect.width, height: clipRect.height }; + page.render('./screenshots/' + name + '.png'); } -page.open('./test/typography.html', function() { +page.open('./test/perceptual/typography.html', function() { capture('paragraph'); - capture('headings', 200); + capture('headings', 1200); capture('small', 200); capture('small-strong', 200); phantom.exit(); diff --git a/small-text.html b/small-text.html new file mode 100644 index 0000000..5076f8f --- /dev/null +++ b/small-text.html @@ -0,0 +1,35 @@ + + + + + + diff --git a/small-text.scss b/small-text.scss deleted file mode 100644 index 774a8e2..0000000 --- a/small-text.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import 'bower_components/vui-colors/colors.scss'; - -@mixin vui-typography-small-text( - $color: $vui-color-ferrite, - $fontWeight: 400, - $margin: 1rem 0 1rem 0, - $line-height: 1rem - ) { - - color: $color; - font-family: inherit; - font-size: 0.7rem; - font-weight: $fontWeight; - line-height: $line-height; - letter-spacing: 0.02rem; - margin: $margin; - -} - -@mixin vui-typography-small-strong-text( - $color: $vui-color-ferrite, - $fontWeight: 700, - $margin: 1rem 0 1rem 0 - ) { - - @include vui-typography-small-text( - $color: $color, - $fontWeight: $fontWeight, - $margin: $margin - ); - - text-transform: uppercase; - -} diff --git a/test/perceptual/typography.html b/test/perceptual/typography.html new file mode 100644 index 0000000..26c218d --- /dev/null +++ b/test/perceptual/typography.html @@ -0,0 +1,80 @@ + + + + + Typography Snapshot + + + + + + +

Typography

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementStyle
Headings +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Small Text +

Small Text

+
Small Strong Text +

Small Strong Text

+
Help Text + Help Text +
Paragraph +

+ Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack. +

+
+ + diff --git a/test/perceptual/typography.html.ignore b/test/perceptual/typography.html.ignore new file mode 100644 index 0000000..d70e847 --- /dev/null +++ b/test/perceptual/typography.html.ignore @@ -0,0 +1,7917 @@ + + + + + + \ No newline at end of file diff --git a/test/typography.html b/test/typography.html deleted file mode 100644 index b4017cd..0000000 --- a/test/typography.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - Typography Sample - - - - -

Typography

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementStyle
Headings -

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Small Text -

Small Text

-
Small Strong Text -

Small Strong Text

-
Help Text -

Help Text

-
Paragraph -

- Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack. -

-
- - diff --git a/typography.css.scss b/typography.css.scss deleted file mode 100644 index 9973941..0000000 --- a/typography.css.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import 'typography.scss'; -@import 'headings.scss'; -@import 'help-text.scss'; - -.vui-typography { - @include vui-typography; -} - -.vui-heading-1 { - @include vui-typography-heading1; -} - -.vui-heading-2 { - @include vui-typography-heading2; -} - -.vui-heading-3 { - @include vui-typography-heading3; -} - -.vui-heading-4 { - @include vui-typography-heading4; -} - -p.vui-help, -.vui-help { - @include vui-typography-help-text; -} - -.vui-typography-small-text { - @include vui-typography-small-text; -} - -.vui-typography-small-strong-text { - @include vui-typography-small-strong-text; -} diff --git a/typography.html b/typography.html new file mode 100644 index 0000000..ddcc364 --- /dev/null +++ b/typography.html @@ -0,0 +1,71 @@ + + + + + + + + + + diff --git a/typography.scss b/typography.scss deleted file mode 100644 index 3bc107c..0000000 --- a/typography.scss +++ /dev/null @@ -1,16 +0,0 @@ -@import 'font.scss'; -@import 'import-once.scss'; - -@include import-once('brightspace fonts') { - @import url(https://s.brightspace.com/lib/fonts/0.2.0/fonts.css); -} - -@mixin vui-typography() { - - @include vui-typography-font(); - - & p { - margin: 1.5rem 0; - } - -} From 6c93607114f03965865865bae7f7316e410e12fe Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Tue, 29 Mar 2016 10:15:49 -0400 Subject: [PATCH 2/8] Removing wct since it 's not needed for typography. --- .travis.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index a8b73a3..938d2bc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,7 +4,6 @@ before_script: - gem install percy-cli script: - polylint -- wct --skip-plugin local after_success: - '[ "$TRAVIS_SECURE_ENV_VARS" = "true" ] && npm run perceptual-diff' sudo: false From e9b6dc2f4035a0bac809bcf261607a45deb2acfe Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Tue, 29 Mar 2016 12:51:25 -0400 Subject: [PATCH 3/8] Wait before taking screenshot. --- screenshots/build.js | 20 ++++++++++---------- test/perceptual/typography.html | 6 +++--- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/screenshots/build.js b/screenshots/build.js index 4eb97eb..29dc030 100644 --- a/screenshots/build.js +++ b/screenshots/build.js @@ -4,11 +4,8 @@ page.viewportSize = {width: 750, height: 1000}; function capture(name, width) { var clipRect = page.evaluate(function(n) { - var thing = document.querySelector('.screenshot-' + n); - thing.style.display = 'inline-block'; - return thing.getBoundingClientRect(); - //return document.querySelector('.screenshot-' + n) - // .getBoundingClientRect(); + return document.querySelector('.screenshot-' + n) + .getBoundingClientRect(); }, name); page.clipRect = { @@ -23,9 +20,12 @@ function capture(name, width) { } page.open('./test/perceptual/typography.html', function() { - capture('paragraph'); - capture('headings', 1200); - capture('small', 200); - capture('small-strong', 200); - phantom.exit(); + setTimeout(function() { + capture('paragraph'); + capture('headings', 200); + capture('small', 200); + capture('small-strong', 200); + capture('help-text'); + phantom.exit(); + }, 500); }); diff --git a/test/perceptual/typography.html b/test/perceptual/typography.html index 26c218d..a8e3f83 100644 --- a/test/perceptual/typography.html +++ b/test/perceptual/typography.html @@ -18,7 +18,7 @@ padding: 0.5rem; white-space: nowrap; } - td { + th { text-align: center; } .small-text { @@ -63,14 +63,14 @@

Heading 4

Help Text - + Help Text Paragraph -

+

Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.

From 73b3f6fabd30e17b0c4eaa108a5738fae9af75ac Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Tue, 29 Mar 2016 13:04:55 -0400 Subject: [PATCH 4/8] Adding comment about usage in production. --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 13fe1a0..a7841b7 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,10 @@ The custom `vui-help-text` element can be used to apply styling to help text. ... ``` +### Usage in Production + +In production, it's recommended to use a build tool like [Vulcanize](https://github.com/Polymer/vulcanize) to combine all your web components into a single import file. [More from the Polymer Docs: Optimize for Production](https://www.polymer-project.org/1.0/tools/optimize-for-production.html)... + ## 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. From fbbe786cd8d8ab5967206fd048b0fa5cbe2d16be Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Tue, 29 Mar 2016 13:08:49 -0400 Subject: [PATCH 5/8] Removing the polyfill from bower since it's pulled from cdn. --- bower.json | 1 - 1 file changed, 1 deletion(-) diff --git a/bower.json b/bower.json index 26ad4f4..2b566f5 100644 --- a/bower.json +++ b/bower.json @@ -15,6 +15,5 @@ "vui-colors": "^1.0.1" }, "devDependencies": { - "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.20" } } From 5a79826c4642971583fc1f4f3f9a48d405464905 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Tue, 29 Mar 2016 13:41:47 -0400 Subject: [PATCH 6/8] Minors fixes for initial web components. --- README.md | 2 +- bower.json | 2 +- fonts.html | 2 +- headings.html | 3 +- screenshots/build.js | 3 - screenshots/small-strong.png | Bin 3475 -> 0 bytes screenshots/small.png | Bin 1623 -> 0 bytes small-text.html | 4 +- test/perceptual/typography.html.ignore | 7917 ------------------------ 9 files changed, 6 insertions(+), 7927 deletions(-) delete mode 100644 screenshots/small-strong.png delete mode 100644 screenshots/small.png delete mode 100644 test/perceptual/typography.html.ignore diff --git a/README.md b/README.md index a7841b7..5b3456c 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ There are four separate classes for the available heading styles. These would ty

...

``` -![screenshot of paragraph text](/screenshots/headings.png?raw=true) +![screenshot of headings](/screenshots/headings.png?raw=true) ### Help Text diff --git a/bower.json b/bower.json index 2b566f5..4258272 100644 --- a/bower.json +++ b/bower.json @@ -11,7 +11,7 @@ "package.json" ], "dependencies": { - "polymer": "^1.3.0", + "polymer": "^1.4.0", "vui-colors": "^1.0.1" }, "devDependencies": { diff --git a/fonts.html b/fonts.html index c84cbaf..4406bcb 100644 --- a/fonts.html +++ b/fonts.html @@ -8,7 +8,7 @@ :root { --vui-font: { - color: var(--vui-color-ferrite, #000000); + color: var(--vui-color-ferrite); display: block; font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 1rem; diff --git a/headings.html b/headings.html index 5674d8e..c4ec5b5 100644 --- a/headings.html +++ b/headings.html @@ -1,9 +1,8 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file From 260407565b639e81b61b1720c2a6b017ce668df6 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Tue, 29 Mar 2016 13:52:08 -0400 Subject: [PATCH 7/8] Adding base font-size note. --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 5b3456c..c96f970 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,16 @@ The custom `vui-help-text` element can be used to apply styling to help text. ... ``` +### Note About Font Size + +Normally within Brightspace, the user-configured base font size will automatically be present, and requires no additional work to opt-in. However, if your application exists outside of Brightspace, you should set your desired font size on the `` element. The default recommended size is `20px`: + +```css +html { + font-size: 20px; +} +``` + ### Usage in Production In production, it's recommended to use a build tool like [Vulcanize](https://github.com/Polymer/vulcanize) to combine all your web components into a single import file. [More from the Polymer Docs: Optimize for Production](https://www.polymer-project.org/1.0/tools/optimize-for-production.html)... From 9a6c830ffc7c41820ad132862fe8d83a1e9fcc5e Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Tue, 29 Mar 2016 14:02:06 -0400 Subject: [PATCH 8/8] Removing unnecessary vui-colors import. --- help-text.html | 1 - 1 file changed, 1 deletion(-) diff --git a/help-text.html b/help-text.html index fe4fc7d..7aa6d84 100644 --- a/help-text.html +++ b/help-text.html @@ -1,5 +1,4 @@ -