Home

Awesome

The Australian Government Design System has been decommissioned Visit our community page for more information

Australian Government Design System - Starter

Get started with full page templates using the Australian Government Design System.

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.

  1. Make sure you have npm and Node installed on your computer. You can follow the npm instructions if you are unsure.

  2. Download, clone, or fork this repository into a folder on your computer.

  3. In the command line go into this folder and run npm install. This will install dependencies necessary for the local development environment.

  4. 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

⬆ back to top

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.

⬆ back to top

Prerequisites

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.e a/unix/path rather than a\\windows\\path ).

⬆ back to top

Contributing

To contribute to the Australian Government Design System Starter Pack:

  1. Fork the project & clone it locally.
  2. Create a new branch for the work that is going to be completed.
  3. Complete the work and test it to the best of your abilities following the guidelines here.
  4. Once the work is completed, write a good commit message.
  5. Push your work to GitHub and create a new pull request.
  6. Respond to any code review feedback.

⬆ back to top

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.

⬆ back to top

};