adding screenshot to the README

BrightspaceUI · Feb 18, 2016 · 917b088 · 917b088
1 parent 0721840
commit 917b088
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 24 deletions.
diff --git 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 `<body>` element.
+The `vui-typography` mixin can be used to set up the base font properties, typically applied to the `<body>` element.
 
 ```scss
 @import '<path-to-component>/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 `<h1>`, `<h2>`, `<h3>` and `<h4>` HTML elements, though it's not a requirement.
 
 ```scss
 @import '<path-to-component>/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 '<path-to-component>/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 '<path-to-component>/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
@@ -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
@@ -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
diff --git a/screenshots/paragraph.png b/screenshots/paragraph.png
diff --git a/screenshots/small-strong.png b/screenshots/small-strong.png
diff --git a/screenshots/small.png b/screenshots/small.png
diff --git a/test/typography.html b/test/typography.html
@@ -31,7 +31,7 @@ <h1>Typography</h1>
 			<tbody>
 				<tr>
 					<th>Headings</th>
-					<td>
+					<td class="screenshot-headings">
 						<h1 class="vui-heading-1">Heading 1</h1>
 						<h2 class="vui-heading-2">Heading 2</h2>
 						<h3 class="vui-heading-3">Heading 3</h3>
@@ -41,13 +41,13 @@ <h4 class="vui-heading-4">Heading 4</h4>
 				<tr>
 					<th>Small Text</th>
 					<td>
-						<p class="vui-typography-small-text">Small Text</p>
+						<p class="vui-typography-small-text screenshot-small">Small Text</p>
 					</td>
 				</tr>
 				<tr>
 					<th>Small Strong Text</th>
 					<td>
-						<p class="vui-typography-small-strong-text">Small Strong Text</p>
+						<p class="vui-typography-small-strong-text screenshot-small-strong">Small Strong Text</p>
 					</td>
 				</tr>
 				<tr>
@@ -59,7 +59,7 @@ <h4 class="vui-heading-4">Heading 4</h4>
 				<tr>
 					<th>Paragraph</th>
 					<td>
-						<p style="width: 430px;">
+						<p style="width: 430px;" class="screenshot-paragraph">
 							Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.
 						</p>
 					</td>