Design system starter kit
The starter kit requires Node.js version 8 or higher. See the Node.js/npm installation guides if you require assistance installing node.
In terminal open this folder and run
npm install. This will install dependencies necessary for the local development environment.
You can now start your local server by running
npm run watch. 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
When the user runs
npm run build or
npm run watch we use node-sass to convert the
src/sass/main.scss file into the
docs/css/main.css file. Autoprefixer is run after compilation to add vendor prefixes to the
Refer to the
package.jsonscripts for how this has been set up
This set up allows you to modify the variables in the design system file from the
main.scss file. You can add your own colour scheme, or change the typography and spacing. Tweaks to the components or additional ones should be added below the import of
_auds.scss in the
main.scss file. Changes to these files will be injected into your browser so you don’t even need to refresh thanks to Browser Sync.
docs folder contains all the files required to publish a website. The
index.html file references the
main.css file and
script.min.js assets to generate the page. We name the folder
docs because GitHub pages uses the docs folder to host static websites.
To start using other components you can copy paste the HTML code snippets from the documentation into the
index.html or other
html file that you may have created.