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.
Download the starter kit and unzip into your chosen development folder.
In terminal open this folder and run
This will install dependencies necessary for the local development environment.
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
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.
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.