How you use the NSW Design System depends on your team's capabilities. We recommend using npm but also provided in a CDN, and a downloadable starter kit which includes all the compiled assets.
package.jsonfile using the
npm initcommand in the terminal. You will be prompted to enter several pieces of information, like the name of your application, version, description etc.
nsw-design-systemto your project’s
npm install --save nsw-design-system
The NSW Design System styles can be imported as a whole package, or you can install core styles and add components selectively.
To import all styles as a single package you need to add following snippet at the start of your main SCSS file:
Our core library includes the design system's base theme, typography, mixins and helper functions. Once you imported it, you can take full advantage of our variables and helpers. To import core library you need to add following snippet at the start of your main SASS file:
Once you have installed the core library you can start importing components as you need it. To import individual components you need to add following snippets to your main SASS file under core libraries import:
In your main html document add this line of code inside the head tag. Make sure that it's placed before the NSW Design System styles import. Or install icon and font from npm.
Another way is to import it in css:
Depending on your project set up, you might wish to copy the file into your project from
node_modules or add the reference to your build workflow.
You can add the files to your main html document
NSW Design System is supported in the following browsers:
To be notified when there’s a new release, you can either join the Design System community or watch the NSW Design System Github