Merge pull request #40 from Brightspace/split-mixins

splitting mixins into separate files so duplicate font imports can be avoided
BrightspaceUI · Jan 12, 2016 · 9c325ae · 9c325ae
2 parents 699e3bf + 6fd27ab
commit 9c325ae
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 137 deletions.
diff --git a/README.md b/README.md
@@ -4,95 +4,90 @@
 [![Build status][ci-image]][ci-url]
 [![Dependency Status][dependencies-image]][dependencies-url]
 
-This component contains Sass mixins and CSS that can be used to produce basic typography styles.
+This component contains [Sass mixins](http://sass-lang.com) and CSS that can be used to produce basic typography styles.
+
+For further information on this and other VUI components, see the docs at [ui.valence.d2l.com](http://ui.valence.d2l.com/).
 
 ## Installation
 
-Install from NPM:
+`vui-typography` can be installed from [Bower][bower-url]:
 ```shell
-npm install vui-typography
+bower install vui-typography
 ```
 
-Install from Bower:
+Or alternatively from [NPM][npm-url]:
 ```shell
-bower install vui-typography
+npm install vui-typography
 ```
 
-## Usage
-
-**Import the mixins:**
+Depending on which installation method you choose, use that path when doing the SASS import:
 
 ```scss
-@import 'bower_components/vui-typography/typography.scss'; // or...
-
+@import 'bower_components/vui-typography/typography.scss';
+// or...
 @import "node_modules/vui-typography/typography.scss";
 ```
 
+## Usage
+
 **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 setup the base font properties, typically applied to the `<body>` element.
 
 ```scss
+@import '<path-to-component>/typography.scss';
 body {
 	@include vui-typography;
 }
 ```
 
-**Headings:** 
+**Headings:**
 
 ```scss
-.app {
-
-	h1 {
-		@include vui-typography-heading1;
-	}
+@import '<path-to-component>/headings.scss';
 
-	h2 {
-		@include vui-typography-heading2;
-	}
+h1 {
+	@include vui-typography-heading1;
+}
 
-	h3 {
-		@include vui-typography-heading3;
-	}
+h2 {
+	@include vui-typography-heading2;
+}
 
-	h4 {
-		@include vui-typography-heading4;
-	}
+h3 {
+	@include vui-typography-heading3;
+}
 
+h4 {
+	@include vui-typography-heading4;
 }
 ```
 
 **Help Text:**
 
 ```scss
-.app {
-
-	.help {
-		@include vui-typography-help-text;
-	}
+@import '<path-to-component>/help-text.scss';
 
+.help {
+	@include vui-typography-help-text;
 }
 ```
 
-**Other:** 
+**Other:**
 
 ```scss
-.app {
-
-	.text1 {
-		@include vui-typography-small-text;
-	}
+@import '<path-to-component>/small-text.scss';
 
-	.text2 {
-		@include vui-typography-small-strong-text;
-	}
+.text1 {
+	@include vui-typography-small-text;
+}
 
+.text2 {
+	@include vui-typography-small-strong-text;
 }
 ```
 
-For further information on this component and other VUI components, see the docs at [ui.valence.d2l.com](http://ui.valence.d2l.com/).
-
-#### Coding styles
+## 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/fonts.scss b/fonts.scss
diff --git a/headings.scss b/headings.scss
@@ -0,0 +1,50 @@
+@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.scss b/help-text.scss
@@ -0,0 +1,5 @@
+@import 'small-text.scss';
+
+@mixin vui-typography-help-text() {
+	@include vui-typography-small-text($margin: auto);
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vui-typography",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "description": "Mixins and CSS for applying basic typography styles",
   "scripts": {
     "clean": "rimraf *.css",

diff --git a/small-text.scss b/small-text.scss
@@ -0,0 +1,31 @@
+@import 'bower_components/vui-colors/colors.scss';
+@import 'px-to-base-rem.scss';
+
+@mixin vui-typography-small-text(
+		$fontWeight: 400,
+		$margin: 1rem 0 1rem 0,
+		$line-height: 1rem
+	) {
+
+	color: $vui-color-ferrite;
+	font-family: inherit;
+	font-size: 0.7rem;
+	font-weight: $fontWeight;
+	line-height: $line-height;
+	letter-spacing: px-to-base-rem(0.4px);
+	margin: $margin;
+
+}
+
+@mixin vui-typography-small-strong-text($fontWeight: 700, $margin: 1rem 0 1rem 0) {
+
+	color: $vui-color-ferrite;
+	font-family: inherit;
+	font-size: 0.7rem;
+	font-weight: $fontWeight;
+	line-height: 1rem;
+	letter-spacing: px-to-base-rem(0.4px);
+	margin: $margin;
+	text-transform: uppercase;
+
+}
diff --git a/typography.css.scss b/typography.css.scss
@@ -1,4 +1,6 @@
 @import 'typography.scss';
+@import 'headings.scss';
+@import 'help-text.scss';
 
 .vui-typography {
 	@include vui-typography;

diff --git a/typography.scss b/typography.scss
@@ -1,7 +1,10 @@
 @import 'bower_components/vui-colors/colors.scss';
-@import 'px-to-rem.scss';
-@import 'fonts.scss';
-@import 'base-font-size.scss';
+@import 'px-to-base-rem.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() {
 
@@ -20,7 +23,7 @@
 	font-size: 1rem;
 	font-weight: 300;
 	line-height: 1.5;
-	letter-spacing: px-to-rem(0.3px, $vui-base-fontSize);
+	letter-spacing: px-to-base-rem(0.3px);
 
 	&.vui-dyslexic,
 	.vui-dyslexic {
@@ -45,86 +48,3 @@
 	}
 
 }
-
-@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-rem(-0.5px, $vui-base-fontSize);
-	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-rem(-0.3px, $vui-base-fontSize);
-	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-rem(0.5px, $vui-base-fontSize);
-	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-rem(0.4px, $vui-base-fontSize);
-	margin: $margin;
-
-}
-
-@mixin vui-typography-small-text(
-		$fontWeight: 400,
-		$margin: 1rem 0 1rem 0,
-		$line-height: 1rem
-	) {
-
-	color: $vui-color-ferrite;
-	font-family: inherit;
-	font-size: 0.7rem;
-	font-weight: $fontWeight;
-	line-height: $line-height;
-	letter-spacing: px-to-rem(0.4px, $vui-base-fontSize);
-	margin: $margin;
-
-}
-
-@mixin vui-typography-small-strong-text($fontWeight: 700, $margin: 1rem 0 1rem 0) {
-
-	color: $vui-color-ferrite;
-	font-family: inherit;
-	font-size: 0.7rem;
-	font-weight: $fontWeight;
-	line-height: 1rem;
-	letter-spacing: px-to-rem(0.4px, $vui-base-fontSize);
-	margin: $margin;
-	text-transform: uppercase;
-
-}
-
-@mixin vui-typography-help-text() {
-
-	@include vui-typography-small-text($margin: auto);
-
-}