If you’re a developer, you can start here to make sure you have everything you need to use the design system.
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.
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.
ontario-design-system/styles/ds-theme.css(or ds-theme.min.css) globally into your own project. Example using SCSS and 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.
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
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 .