Looking for SASS-based d2l-typography? It's over here.
A set of Polymer-based web components and shared styles for applying D2L typography.
For further information on this and other D2L UI components, see the docs at ui.valence.d2l.com.
d2l-typography can be installed from Bower:
bower install d2l-typographyInclude the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), import d2l-typography.html, and include the d2l-typography shared style:
<head>
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
<link rel="import" href="../d2l-typography/d2l-typography.html">
<style is="custom-style" include="d2l-typography"></style>
</head>The d2l-typography class can be used to set base font properties, typically applied to the <body> element.
<body class="d2l-typography">
...
</body>The default font family, color and line/character spacing will look like this:
There are four separate classes 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.
<h1 class="d2l-heading-1">...</h1>
<h2 class="d2l-heading-2">...</h2>
<h3 class="d2l-heading-3">...</h3>
<h4 class="d2l-heading-4">...</h4>
The custom d2l-help-text element can be used to apply styling to help text.
<d2l-help-text>...</d2l-help-text>Normally within Brightspace, the user-configured base font size will automatically be present, and requires no additional work to opt-in. However, if your application exists outside of Brightspace, you should set your desired font size on the <html> element. The default recommended size is 20px:
html {
font-size: 20px;
}In production, it's recommended to use a build tool like Vulcanize to combine all your web components into a single import file. More from the Polymer Docs: Optimize for Production...
See the Best Practices & Style Guide for information on naming conventions, plus information about the EditorConfig rules used in this repo.