Development set up

We have created a starter kit with templates that can get you up and running with the design system. You can go to the starter kit GitHub repository to download the code.

To run the design system locally requires Node.js version 8 or higher. See the Node.js/npm installation guides if you require assistance installing node.

  1. Download the starter kit and unzip into your chosen development folder.

  2. In terminal open this folder and run

    npm install

    This will install dependencies necessary for the local development environment.

  3. You can now start your local server by running 

    npm run dev

    This will check for file changes, when it occurs the server will build your site refresh the browser.

How it works

In your directory you have a package.json file. This file points to dependencies that are installed when npm install is run. When you run npm install all of the design system components and additional packages related to the local development environment are added to the node_modules/ folder.

When the user runs npm run build or npm run dev we use node-sass to convert the src/main.scss file into the dist/css/main.css file. Autoprefixer is run after compilation to add vendor prefixes to the main.css file. Refer to the package.json scripts for how this has been set up

This set up allows you to modify the variables in the design system file from the src/global/scss/settings.scss file. You change the typography and spacing by updating the .scss files in src/global/scss/tools/ folder. Changes to these files will be injected into your browser so you don’t even need to refresh thanks to Browser Sync.

The dist folder contains all the files required to publish a website. The index.html file references the main.css file and main.js assets to generate the page. 

To start using other components you can copy paste the HTML code snippets from the documentation on digital.nsw.gov.au site into the index.html or other html file that you may have created.

Last updated