diff --git a/.csslintrc b/.csslintrc index a9c044c..e6996a0 100644 --- a/.csslintrc +++ b/.csslintrc @@ -1 +1 @@ ---ignore=zero-units,adjoining-classes,import +--ignore=adjoining-classes,import diff --git a/.gitignore b/.gitignore index 3ae27e0..9807517 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ bower_components/ node_modules/ -test/output +test/test.css typography.css diff --git a/.npmignore b/.npmignore index a6ba854..f17d210 100644 --- a/.npmignore +++ b/.npmignore @@ -1,10 +1,9 @@ +.csslintrc .editorconfig .gitattributes .gitignore .npmignore -.csslintrc .travis.yml bower_components node_modules -test -typography.css.scss +test/test.scss diff --git a/.travis.yml b/.travis.yml index 520ef64..042fc12 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: -- 4.1.1 +- 5.6 before_script: - gem install percy-cli after_success: diff --git a/LICENSE b/LICENSE index 2ad945b..6849157 100644 --- a/LICENSE +++ b/LICENSE @@ -176,7 +176,7 @@ recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. - Copyright 2014 D2L Corporation + Copyright 2016 D2L Corporation Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/README.md b/README.md index 70ed05b..6310819 100644 --- a/README.md +++ b/README.md @@ -30,63 +30,77 @@ Depending on which installation method you choose, use that path when doing the ## Usage -**Body:** +### Body -The `vui-typography` mixin can be used to setup the base font properties, typically applied to the `` element. +The `vui-typography` mixin can be used to set up the base font properties, typically applied to the `` element. ```scss @import '/typography.scss'; body { - @include vui-typography; + @include vui-typography(); } ``` -**Headings:** +The default font family, color and line/character spacing will look like this: + +![screenshot of paragraph text](/screenshots/paragraph.png?raw=true) + +### 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; + @include vui-typography-heading1(); } h2 { - @include vui-typography-heading2; + @include vui-typography-heading2(); } h3 { - @include vui-typography-heading3; + @include vui-typography-heading3(); } h4 { - @include vui-typography-heading4; + @include vui-typography-heading4(); } ``` -**Help Text:** +![screenshot of paragraph text](/screenshots/headings.png?raw=true) -```scss -@import '/help-text.scss'; +The margins around each heading style can be customized by passing in an override value to the mixin: -.help { - @include vui-typography-help-text; +```scss +h2.no-margin { + @include vui-typography-heading2($margin: 0); } ``` -**Other:** +### Small Text -```scss -@import '/small-text.scss'; +There are two mixins available to achieve a smaller look. They're both available by importing `small-text.scss`. -.text1 { - @include vui-typography-small-text; +The first is `vui-typography-small-text()`: +```scss +.small { + @include vui-typography-small-text(); } +``` + +![screenshot of small text](/screenshots/small.png?raw=true) -.text2 { - @include vui-typography-small-strong-text; +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. diff --git a/package.json b/package.json index 1e9d4ae..ed40c00 100644 --- a/package.json +++ b/package.json @@ -6,11 +6,11 @@ "clean": "rimraf *.css && rimraf ./test/*.css", "prebuild": "npm run clean", "build:sass": "node-sass --output-style expanded typography.css.scss typography.css", - "build:sass:test": "node-sass --output-style expanded ./test/test.scss ./test/test.css", - "build": "npm run build:sass && npm run build:sass:test", + "build": "npm run build:sass", "perceptual-diff": "percy snapshot test/", "postinstall": "bower install", - "pretest": "npm run build", + "screenshot": "phantomjs ./screenshots/build.js", + "pretest": "npm run build && cpy typography.css test", "test": "csslint typography.css" }, "repository": { @@ -29,11 +29,13 @@ }, "homepage": "https://github.com/Brightspace/valence-ui-typography", "dependencies": { - "bower": "^1.5.3" + "bower": "^1.7.7" }, "devDependencies": { + "cpy-cli": "^1.0.0", "csslint": "^0.10.0", - "node-sass": "^3.1.1", - "rimraf": "^2.3.4" + "node-sass": "^3.4.2", + "phantomjs-prebuilt": "^2.1.4", + "rimraf": "^2.5.2" } } diff --git a/screenshots/build.js b/screenshots/build.js new file mode 100644 index 0000000..66e4bcd --- /dev/null +++ b/screenshots/build.js @@ -0,0 +1,27 @@ +var page = require('webpage').create(); +page.viewportSize = {width: 750, height: 1000}; + +function capture(name, width) { + + var clipRect = page.evaluate(function(n) { + return document.querySelector('.screenshot-' + n) + .getBoundingClientRect(); + }, name); + + page.clipRect = { + top: clipRect.top, + left: clipRect.left, + width: width || clipRect.width, + height: clipRect.height + }; + page.render('./screenshots/' + name + '.png'); + +} + +page.open('./test/typography.html', function() { + capture('paragraph'); + capture('headings', 200); + capture('small', 200); + capture('small-strong', 200); + phantom.exit(); +}); diff --git a/screenshots/headings.png b/screenshots/headings.png new file mode 100644 index 0000000..b43ebeb Binary files /dev/null and b/screenshots/headings.png differ diff --git a/screenshots/paragraph.png b/screenshots/paragraph.png new file mode 100644 index 0000000..1fb65e0 Binary files /dev/null and b/screenshots/paragraph.png differ diff --git a/screenshots/small-strong.png b/screenshots/small-strong.png new file mode 100644 index 0000000..a0cddb9 Binary files /dev/null and b/screenshots/small-strong.png differ diff --git a/screenshots/small.png b/screenshots/small.png new file mode 100644 index 0000000..19d9157 Binary files /dev/null and b/screenshots/small.png differ diff --git a/test/test.css b/test/test.css deleted file mode 100644 index 9ef2bc1..0000000 --- a/test/test.css +++ /dev/null @@ -1,123 +0,0 @@ -@import url(https://s.brightspace.com/lib/fonts/0.2.0/fonts.css); -html { - font-size: 20px; -} - -body { - color: #565a5c; - font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; - font-size: 1rem; - font-weight: 300; - line-height: 1.5; - letter-spacing: 0.015rem; - margin: 1rem; -} - -body.vui-dyslexic, -body .vui-dyslexic { - font-weight: 400; - font-family: 'Open Dyslexic', sans-serif; -} - -body :lang(ar) { - font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif; -} - -body :lang(zh-CN) { - font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; -} - -body :lang(zh-TW) { - font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif; -} - -body :lang(ko) { - font-family: 'Apple SD Gothic Neo', Dotum, sans-serif; -} - -body :lang(ja) { - font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif; -} - -body p { - margin: 1.5rem 0; -} - -table { - max-width: 1000px; -} - -td, th { - padding: 0.5rem; -} - -.heading-1 { - color: #565a5c; - font-family: inherit; - font-size: 2rem; - font-weight: 300; - line-height: 3rem; - letter-spacing: -0.025rem; - margin: 1.5rem 0 1.5rem 0; -} - -.heading-2 { - color: #565a5c; - font-family: inherit; - font-size: 1.5rem; - font-weight: 300; - line-height: 2.25rem; - letter-spacing: -0.015rem; - margin: 1.5rem 0 1.5rem 0; -} - -.heading-3 { - color: #565a5c; - font-family: inherit; - font-size: 1rem; - font-weight: 700; - line-height: 1.5rem; - letter-spacing: 0.025rem; - margin: 1.5rem 0 1.5rem 0; -} - -.heading-3 { - color: #565a5c; - font-family: inherit; - font-size: 1rem; - font-weight: 400; - line-height: 1.5rem; - letter-spacing: 0.02rem; - margin: 1.5rem 0 1.5rem 0; -} - -.small-text { - color: #565a5c; - font-family: inherit; - font-size: 0.7rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.02rem; - margin: 1rem 0 1rem 0; -} - -.small-strong-text { - color: #565a5c; - font-family: inherit; - font-size: 0.7rem; - font-weight: 700; - line-height: 1rem; - letter-spacing: 0.02rem; - margin: 1rem 0 1rem 0; - text-transform: uppercase; -} - -.help-text { - color: #565a5c; - font-family: inherit; - font-size: 0.7rem; - font-weight: 400; - line-height: 1rem; - letter-spacing: 0.02rem; - margin: auto; -} diff --git a/test/test.scss b/test/test.scss deleted file mode 100644 index 490bf93..0000000 --- a/test/test.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import '../typography.scss'; -@import '../headings.scss'; -@import '../small-text.scss'; -@import '../help-text.scss'; - -html { - font-size: 20px; -} -body { - @include vui-typography; - margin: 1rem; -} -table { - max-width: 1000px; -} -td, th { - padding: 0.5rem; -} -td { -} - -.heading-1 { - @include vui-typography-heading1; -} - -.heading-2 { - @include vui-typography-heading2; -} - -.heading-3 { - @include vui-typography-heading3; -} - -.heading-3 { - @include vui-typography-heading4; -} - -.small-text { - @include vui-typography-small-text; -} - -.small-strong-text { - @include vui-typography-small-strong-text; -} - -.help-text { - @include vui-typography-help-text; -} diff --git a/test/typography.html b/test/typography.html index e0c60e4..b4017cd 100644 --- a/test/typography.html +++ b/test/typography.html @@ -2,9 +2,24 @@ Typography Sample - + + - +

Typography

@@ -15,53 +30,39 @@

Typography

- - + - + - + - + - - - - - - - - - - - - -
Heading 1 -
Grumpy Wizards
+ 		Headings +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4
Heading 2Small Text -
Grumpy Wizards
+

Small Text
Heading 3Small Strong Text -
Grumpy Wizards
+

Small Strong Text
Heading 4Help Text -
Grumpy Wizards
+

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. -

Small Text -
Grumpy Wizards
-
Small Strong Text -
Grumpy Wizards
-
Help Text -
Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.
+

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