NSW Design System
View documentation for NSW Design System.
Using the design system
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.
- Installing with NPM
- Import styles
- Adding the font and icons
- Importing javascript into your project
- Using JSDelivr CDN
Installing with NPM
-
Install
Node/npm.- More information can be found via the nodejs Installation guides
-
Generate a
package.jsonfile using thenpm initcommand 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-systemto your project’spackage.json:npm install --save nsw-design-system
The NSW Design System is now installed as a dependancy of your project, check out how to import styles and javascript in to your project build.
Importing styles
All styles
To import all styles as a single package you need to add following snippet at the start of your main SCSS file:
@import 'node_modules/nsw-design-system/src/main';Core and selected components
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:
// Core libraries
@import 'node_modules/nsw-design-system/src/global/scss/settings/settings';
@import 'node_modules/nsw-design-system/src/global/scss/base/all';
@import 'node_modules/nsw-design-system/src/global/scss/helpers/all';
@import 'node_modules/nsw-design-system/src/global/scss/settings/palette';
@import 'node_modules/nsw-design-system/src/global/scss/settings/theme';
@import 'node_modules/nsw-design-system/src/core/all';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:
// Components
@import 'node_modules/nsw-design-system/src/components/accordion/accordion';
@import 'node_modules/nsw-design-system/src/components/card/card';
@import 'node_modules/nsw-design-system/src/components/notification/notification';With this setup you can also start theming with a few sets of variable changes.
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/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Another way is to import it in css:
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');Importing javascript into your project
Some NSW Design System components require javascript to provide advanced functionality. To ensure the page is ready for javascript to run, include the follow scripts 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 set up, 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/nsw-design-system@3/dist/css/main.css">
</head>
<body>
...
<script src="https://cdn.jsdelivr.net/npm/nsw-design-system@3/dist/js/main.min.js"></script>
<script>window.NSW.initSite()</script>
</body>
</html>Design System Figma UI kit
Access all the design assets required to design, share and prototype in our Figma UI Kit.
Versioning
We are using semantic versioning so our version number are increments of MAJOR.MINOR.PATCH where:
- MAJOR version used for incompatible global changes
- MINOR version used for large backwards-compatible updates and release of new components
- PATCH version used for small backwards-compatible updates, new component variations and bug fixes