2.3.0 • Published 7 years ago

vui-typography v2.3.0

Weekly downloads
21
License
Apache-2.0
Repository
github
Last release
7 years ago

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.

d2lvalence-uivui
bower
@infinitebrahmanuniverse/nolb-vui@everything-registry/sub-chunk-3105d2l-insights-roles-inputvui-collapsible-section-jquery
2.3.0

7 years ago

2.2.0

8 years ago

2.1.0

8 years ago

2.0.2

8 years ago

2.0.1

8 years ago

2.0.0

8 years ago

1.2.2

8 years ago

1.2.1

8 years ago

1.2.0

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.11

8 years ago

1.0.10

8 years ago

1.0.9

8 years ago

1.0.8

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

9 years ago

1.0.4

9 years ago

1.0.3

9 years ago

1.0.2

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago

0.5.0

9 years ago

0.4.2

9 years ago

0.4.1

9 years ago

0.4.0

9 years ago

0.3.1

9 years ago

0.3.0

9 years ago

0.2.0

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago