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:
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: