Skip to content

Polymer and Sass custom styles/mixins for applying D2L typography

License

Notifications You must be signed in to change notification settings

BrightspaceUI/typography

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

3e6ba4b · Jun 30, 2016
Feb 18, 2016
Feb 18, 2016
Feb 17, 2016
Oct 14, 2014
Sep 19, 2014
Feb 17, 2016
Feb 17, 2016
Feb 17, 2016
Feb 17, 2016
Feb 18, 2016
Dec 14, 2015
Jun 29, 2016
Feb 1, 2016
Feb 18, 2016
Jan 12, 2016
Jan 12, 2016
Oct 27, 2015
Jun 30, 2016
Dec 14, 2015
Oct 27, 2015
Feb 1, 2016
Jun 29, 2016
Apr 8, 2016

Repository files navigation

vui-typography

Bower version NPM version Build status Dependency Status

This component contains Sass mixins 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.

Installation

vui-typography can be installed from Bower:

bower install vui-typography

Or alternatively from NPM:

npm install vui-typography

Depending on which installation method you choose, use that path when doing the SASS import:

@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 set up the base font properties, typically applied to the <body> element.

@import '<path-to-component>/typography.scss';
body {
	@include vui-typography();
}

The default font family, color and line/character spacing will look like this:

screenshot of paragraph text

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.

@import '<path-to-component>/headings.scss';

h1 {
	@include vui-typography-heading1();
}

h2 {
	@include vui-typography-heading2();
}

h3 {
	@include vui-typography-heading3();
}

h4 {
	@include vui-typography-heading4();
}

screenshot of paragraph text

The margins around each heading style can be customized by passing in an override value to the mixin:

h2.no-margin {
	@include vui-typography-heading2($margin: 0);
}

Small Text

There are two mixins available to achieve a smaller look. They're both available by importing small-text.scss.

The first is vui-typography-small-text():

.small {
	@include vui-typography-small-text();
}

screenshot of small text

The second, vui-typography-small-strong-text() has a heavier font-weight:

.small-strong {
	@include vui-typography-small-strong-text();
}

screenshot of small strong text

Coding styles

See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.