org.webjars.bowergithub.brightspaceui:typography
Advanced tools
A set of Polymer and Sass mixins for applying D2L typography.
For further information on this and other Brightspace UI components, see the docs at ui.developers.brightspace.com.
d2l-typography can be installed from Bower:
bower install d2l-typography
The following typography styles are available for use in your application:
"Standard Body" can be used to apply base font properties, but will also respond to viewport width changes.
Compact body is a smaller version of the standard body style, for use in areas that prefer to be conservative with the amount of real estate used by text.
The compact style is not recommended for blocks of readable text, particularly in paragraph form. Rather, it is best employed for brief informative text or calls to action.
Never used by itself; always in support of another piece of content on the page. Used for inline assistive text in forms, and for specifying metadata or properties of an existing piece of content.
Used for labels. Its font size/line spacing is relative to the root font and respond to viewport width changes.
There are four available heading styles. These would typically be applied to the <h1>, <h2>, <h3> and <h4> HTML elements, though it's not a requirement.
Typography fonts and styles can be applied using either Polymer or Sass mixins. Which one you use depends on your technology stack and comfort with each, however since Sass compiles to native CSS it's more performant.
Import the main d2l-typography.scss file into your application's Sass. Then call the d2l-typography-font-face() mixin to define the web fonts and apply the d2l-typography() mixin to your <body> element:
@import 'bower_components/d2l-typography/d2l-typography.scss';
@include d2l-typography-font-face();
body {
@include d2l-typography();
}
Mixins are also available for standard body, compact body, small body and heading styles:
.standard {
@include d2l-body-standard();
}
.compact {
@include d2l-body-compact();
}
.small {
@include d2l-body-small();
}
.label {
@include d2l-label-text();
}
h1 {
@include d2l-heading-1();
}
h2 {
@include d2l-heading-2();
}
h3 {
@include d2l-heading-3();
}
h4 {
@include d2l-heading-4();
}
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), import d2l-typography.html, and include d2l-typography in a custom style block:
<head>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../d2l-typography/d2l-typography.html">
<custom-style include="d2l-typography">
<style is="custom-style" include="d2l-typography"></style>
</custom-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>
Additional CSS classes are available for standard body, compact body, small body and headings:
<!-- standard body -->
<div class="d2l-body-standard">
...
</div>
<!-- small body -->
<div class="d2l-body-small">
...
</div>
<!-- label text -->
<label class="d2l-label-text">Lorem Ipsum</label>
<!-- compact body -->
<div class="d2l-body-compact">
...
</div>
<!-- headings -->
<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 fonts for headings, standard body, and compact body will all be styled to be smaller at a responsive breakpoint, defined as when the viewport width is 615px or smaller.
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;
}
See the Best Practices & Style Guide for information on naming conventions, plus information about the EditorConfig rules used in this repo.
FAQs
WebJar for d2l-typography
We found that org.webjars.bowergithub.brightspaceui:typography demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.