diff --git a/README.md b/README.md index 9570af0..70ed05b 100644 --- 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 `` element. ```scss +@import '/typography.scss'; body { @include vui-typography; } ``` -**Headings:** +**Headings:** ```scss -.app { - - h1 { - @include vui-typography-heading1; - } +@import '/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 '/help-text.scss'; +.help { + @include vui-typography-help-text; } ``` -**Other:** +**Other:** ```scss -.app { - - .text1 { - @include vui-typography-small-text; - } +@import '/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 deleted file mode 100644 index d2994b4..0000000 --- a/fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ - -@import 'import-once.scss'; - -@include import-once('brightspace fonts') { - @import url(https://s.brightspace.com/lib/fonts/0.2.0/fonts.css); -} diff --git a/headings.scss b/headings.scss new file mode 100644 index 0000000..0cf2b64 --- /dev/null +++ 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 new file mode 100644 index 0000000..f69a73d --- /dev/null +++ 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 index cb1b9da..36a2eaa 100644 --- 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 new file mode 100644 index 0000000..7207f42 --- /dev/null +++ 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 index 2b5c6ff..9973941 100644 --- 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 index e8bf0be..39f8ac8 100644 --- 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); - -}