Get started with the design system (for developers)

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

Options

There are two ways to develop your website or application with the Ontario Design System.

About the distribution package

One option to get started with using the design system within your own application/site is to use the official Ontario Design System distribution package.

The distribution package combines sample code of each component with all the necessary files (HTML, CSS/SCSS, JavaScript) to build into your development projects.

The package also includes assets, such as:

• font files
• the Ontario favicon set

You can find SCSS variables and usage in each component section.

Previous releases

Read the release notes and download previous versions.

Get the distribution package

Download manually

Create a folder where you can put all your files to keep them consistent and separate from other project files (for example, in a folder called vendor).

When a new version is released, you can easily replace the contents of this folder with the new version.

1. Download latest version (1.7.0)
2. Unzip the distribution package.
3. Rename the extracted folder to ontario-design-system.
4. Move this folder into your project (for example, the same place as your other static assets).
5. Import ontario-design-system/styles/ds-theme.css (or ds-theme.min.css) globally into your own project. Read the import guidance for more details.

Download with a script

You may also integrate the distribution package into your project using a script (instead of manually), and organize it to fit your needs.

For example, the following script will download a particular release version and move the contents to a folder under src/assets/vendor.

Note: remember to update the DS_VERSION number to the version you’d like to download.

export DS_VERSION=1.7.0 && \
    export DS_ZIP_NAME=ontario-design-system.zip && \
    export VEN_DIR=src/assets/vendor  && \
    export DS_UNZIP_DIR=$VEN_DIR/ontario-design-system && \
    curl https://designsystem.ontario.ca/dist/ontario-design-system-dist-$DS_VERSION.zip > $VEN_DIR/$DS_ZIP_NAME && \
    unzip -o $VEN_DIR/$DS_ZIP_NAME -d $DS_UNZIP_DIR && \
    rm $VEN_DIR/$DS_ZIP_NAME && \
    rm $DS_UNZIP_DIR/version-release-notes-*.* && \
    rm -rf $DS_UNZIP_DIR/html-samples && \
    rm $DS_UNZIP_DIR/index.html && \
    rm $DS_UNZIP_DIR/package.json && \
    rm -rf $DS_UNZIP_DIR/styles/components && \
    rm -rf $DS_UNZIP_DIR/styles/sass && \
    rm -rf $DS_UNZIP_DIR/fonts/ds-fonts.zip

You may customize the items that the script deletes if you’d like to keep them within your project.

Import the styles

In your main CSS file, add an import statement to import the Design System styles into your project.

Using @import and the path to your assets, add the Design System styles to your application/site’s CSS.

@import '<path-to-vendor-dir>/vendor/ontario-design-system/styles/ds-theme.min.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 may also use any of the component classes to create buttons, checkboxes and more.

Package contents

Building custom components

The design system distribution package contains SCSS files with variables. These can help you build new custom components and pages in alignment with the design system standards.

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;
}

Software requirements

Internally, we use Node.js 16 to build the static site, but externally many working with the Design System dist package will run into the need for SASS and SVGxUse in order to get the best experience with using the design system.

Our versions are as follows:

• Node.js: 16
• SASS: 1.49.6
• SVGxUse: 1.2.6