Australian Government Design System - Starter
Get started with full page templates using the Australian Government Design System.
Production |
Staging |
---|---|
https://design-system-starter.apps.b.cld.gov.au/ | https://ds-starter.apps.y.cld.gov.au/ |
username:ds password:ds |
Contents
Templates
Browse full page templates using the Australian Government Design System.
Development environment
Clone this repository to create a local development environment and start modifying the templates.
Get started
The starter pack uses npm (node package manager) to set up a local development environment and install the Design System components. The default package manager for Node is npm. When you download Node, npm comes pre-installed.
-
Make sure you have npm and Node installed on your computer. You can follow the npm instructions if you are unsure.
-
Download, clone, or fork this repository into a folder on your computer.
-
In the command line go into this folder and run
npm install
. This will install dependencies necessary for the local development environment. -
You should now be ready to start your local server by running
npm run watch
. This will watch for changes on*.scss
files, create new*.css
files and refresh the browser.
Using Docker
Build the image:
$ docker build -t ds-starter .
Then run the image and map the volume. Note: $PWD is not supported in windows.
$ docker run --rm --volume="$PWD:/app" -p 3000:3000 -it ds-starter
How it works
In your directory you have a package.json
file. This file points to dependencies to install when running npm install
. When you run npm install
you install all of the Design System components and additional packages related to the local development environment.
After npm install
Pancake is ran, this checks that your dependencies work together and creates the docs/js/script.min.js
and src/sass/_uikit.scss
.
The src/sass/main.scss
imports the generated _uikit.scss
. You shouldn't touch the _uikit.scss
file as it is generated, but feel free to change the main.scss
file.
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 ran 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 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 _uikit.scss
. Changes to these files will be injected into your browser so you donβt even need to refresh thanks to Browser Sync.
The docs
folder in the 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.
Prerequisites
Node.js
8 or higher, preferably the current LTS version.
NOTE: If you're developing on Windows, please ensure that your local
npm
configuration is using a shell that supports UNIX like folder pathing ( i.ea/unix/path
rather thana\\windows\\path
).
Contributing
To contribute to the Australian Government Design System Starter Pack:
- Fork the project & clone it locally.
- Create a new branch for the work that is going to be completed.
- Complete the work and test it to the best of your abilities following the guidelines here.
- Once the work is completed, write a good commit message.
- Push your work to GitHub and create a new pull request.
- Respond to any code review feedback.
License
Copyright (c) Commonwealth of Australia. With the exception of the Commonwealth Coat of Arms and where otherwise noted, this work is licensed under the MIT license.