Skip to content

Latest commit

 

History

History
63 lines (44 loc) · 2.23 KB

README.md

File metadata and controls

63 lines (44 loc) · 2.23 KB
Raw

d2l-progress

Bower version Build status

A set of Polymer and Sass mixins for styling native progress elements in D2L applications.

For further information on this and other Brightspace UI components, see the docs at ui.developers.brightspace.com.

Installation

d2l-progress can be installed from Bower:

bower install d2l-progress

Progress Styles

screenshot of progress bar

Usage

Progress 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.

Sass

Import the main d2l-progress.scss file into your application's Sass. Then call the d2l-progress() mixin to define the styles of your progress element:

@import 'bower_components/d2l-progress/d2l-progress.scss';

progress.my-progress {
	@include d2l-progress();
}

Polymer

Include the webcomponents.js "lite" polyfill (for browsers that don't natively support web components), import d2l-progress.html, and consume the required mixins in a custom style block:

<head>
	<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
	<link rel="import" href="../d2l-progress/d2l-progress.html">
	<custom-style>
		<style is="custom-style">
			progress.d2l-progress {
				@apply --d2l-progress;
			}
			/* etc. */
		</style>
	</custom-style>
</head>

Coding styles

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