Installation
How you use the NSW Design System depends on your team's capabilities. We recommend using npm
but also provide a CDN and a downloadable starter kit which includes all the compiled assets.
Installing with NPM
npm
is a package manager for Node-based projects. We recommend npm
packages because it makes it easy to update and install the design system from the command line.
-
Install
Node/npm
. More information can be found via the nodejs Installation guides -
Generate a
package.json
file using thenpm init
command in the terminal. You will be prompted to enter several pieces of information, like the name of your application, version, description, etc. -
Add
nsw-design-system
to your project’spackage.json
:
npm install --save nsw-design-system
The NSW Design System is now installed as a dependency of your project, check out how to import styles and javascript into your project build.
Importing styles into your project
The NSW Design System styles need to be added to the main Sass file in your project.
Use the below snippet to import the NSW Design System (ideally placed before any other imports or sass):
@import 'node_modules/nsw-design-system/src/main';
Adding the font and the icons
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.
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Importing javascript into your project
Some of the NSW Design System components require javascript to provide advanced functionality. To ensure the page is ready for javascript to run, include the following script tags at the end of the html document.
<script src="path/to/main.js"></script>
<script>window.NSW.initSite()</script>
</body>
</html>
Depending on your project setup, you might wish to copy the file into your project from node_modules
or add the reference to your build workflow.
Using JSDelivr CDN
The bundled CSS and js files are also hosted in JSDelivr.
You can add the files to your main html document
<html>
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/main.css">
</head>
<body>
...
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/main.min.js"></script>
<script>window.NSW.initSite()</script>
</body>
</html>
Download starter kit
You can download the compiled design system assets (HTML, CSS, JavaScript) in the HTMLStarterkit zip file from the latest release.
Design System Figma UI Kit
Get access to the latest Design System UI patterns and styles via the Design System Figma UI kit.
Getting updates
To be notified when there’s a new release, you can either join the NSW Design System community or watch the NSW Design System Github