Add custom CSS

While Ontario.ca Frontend ships with up-to-date styles from the Ontario Design System, there may be times when you need to add custom CSS to your project and its components or pages.

Create a custom CSS file

Ontario.ca Frontend projects contain a css directory in the the assets folder (src/assets/css) to store your project's custom CSS files. It also contains style.css, which is used to import the Ontario Design System stylesheet. You can use this file to import your custom CSS.

Begin by creating a new file in the css directory:

assets/css/app-styles.css

.my-custom-component {  margin: 0.5em;  padding: 0.5em;}

You can then add your custom file to the style.css file using the CSS @import rule:

assets/css/style.css

@import '../vendor/ontario-ca/ontarioca-styles.css';/* Import any custom CSS files below the Ontario Design System */@import './app-styles.css';

When you import your custom CSS into style.css, it will be automatically bundled into your project's default stylesheet, and there is no need to link it to your project's layout templates.