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 4f40611..d7c9e47 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "build": "npm run build:sass", "perceptual-diff": "percy snapshot test/", "postinstall": "bower install", + "screenshot": "phantomjs ./screenshots/build.js", "pretest": "npm run build && cpy typography.css test", "test": "csslint typography.css" }, @@ -34,6 +35,7 @@ "cpy-cli": "^1.0.0", "csslint": "^0.10.0", "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/typography.html b/test/typography.html index 84a7be4..b4017cd 100644 --- a/test/typography.html +++ b/test/typography.html @@ -31,7 +31,7 @@

Typography

Headings - +

Heading 1

Heading 2

Heading 3

@@ -41,13 +41,13 @@

Heading 4

Small Text -

Small Text

+

Small Text

Small Strong Text -

Small Strong Text

+

Small Strong Text

@@ -59,7 +59,7 @@

Heading 4

Paragraph -

+

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