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 |
Browse full page templates using the Australian Government Design System.
Clone this repository to create a local development environment and start modifying the templates.
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*.scssfiles, create new*.cssfiles and refresh the browser.
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-starterIn 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.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 _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.
Node.js8 or higher, preferably the current LTS version.
NOTE: If you're developing on Windows, please ensure that your local
npmconfiguration is using a shell that supports UNIX like folder pathing ( i.ea/unix/pathrather thana\\windows\\path).
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.
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.