Get started with the design system (for developers)

If you’re a developer, you can start here to make sure you have everything you need to use the design system.


Install the distribution package

In the distribution package, you will find all the necessary files (HTML, CSS/SCSS, JS) to build into your development projects. The package also includes font files and the favicon. You can find SCSS variables and usage in each component section.

Download latest version (0.11.0)

Release notes and past versions

We recommend you create a folder where you can put all your files to keep them consistent and separate from other project files. When a new version is released, you can easily replace this folder with the new version.


Usage

  1. Unzip the distribution package
  2. Rename the extracted folder to ontario-design-system
  3. Move this folder into your project (i.e. the same place as your other static assets)
  4. Import ontario-design-system/styles/ds-theme.css (or ds-theme.min.css) globally into your own project. Example using SCSS and CSS: @import "ontario-design-system/styles/ds-theme.css";

Now that the design system is a part of your project, all of the global styles are applied automatically (header styles, paragraph spacing, etc). You can also use any of the component classes to create buttons, checkboxes and more.


Building custom components

The design system distribution package contains SCSS files with variables that can help you build new custom components and pages in alignment with the design system. Simply import ontario-design-system/styles/sass/_variables-import.scss into your component. This file will import several categories of variables all at once (grid, colour, font, spacing, etc).

Example: colour variables

.ontario-callout-alert {
   border-color: $ontario-colour-alert;
}

Help improve the design system

If you have other suggestions, advice or any questions, the design system team would love to hear from you.

Find out what to do if you don’t see the component you need .