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.
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";
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:
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();
}
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);
}
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();
}
The second, vui-typography-small-strong-text()
has a heavier font-weight:
.small-strong {
@include vui-typography-small-strong-text();
}
See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.