The UI-Kit for the Australian Government.

• How to use
• Checklist and browser support
• Modules
• Contribute
• Tests
• License

The GOV.AU UI-Kit is distributed through the npm ecosystem and can only be installed through the yarn or npm command. Npm requires node.js and the UI-Kit needs a node.js 5 or higher.

To install a module make sure you have a package.json file in the root of your project folders. (You can generate one by running yarn init or npm init.) Inside your working folder install any module and pancake will make sure you have all assets ready to use.

Run yarn add @gov.au/body or npm install @gov.au/body to install the body module. To install several modules just chain them like:

yarn add @gov.au/body @gov.au/header @gov.au/footer @gov.au/buttons

or

npm install @gov.au/body @gov.au/header @gov.au/footer @gov.au/buttons

💡 You can make the very first install even faster by including the pancake plugins you need:

yarn add @gov.au/pancake-sass @gov.au/body @gov.au/header @gov.au/footer @gov.au/buttons

An even better experience is using Syrup. Install it globally via yarn global add @gov.au/syrup. More info coming soon.

⬆ back to top

We use the below checklist to ensure new modules or updates to existing modules have a certain level of quality:

• Semantic HTML and non semantic test?
• No js fallback?
• SVG fallback, functional without SVG?
• IE9, IE10, IE11 legacy test
• IE8 functional test

• A11y color contrast
• Keyboard accessible?
• A11y expert review

• Never nest anything that is not either an overwrite or a child element.
• font-family and text color on elements that don’t require body
• Using uikit-space() for spacing everywhere but in font-sizes; no magic numbers
• No hardcoded colors, use $uikit-colour- vars.
• Sass focus mixin uikit-outline()
• Print style sheets

• var UIKIT = UIKIT || {}; in top?
• Each module has it's own name-space prefixed with UIKIT e.g.: UIKIT.modulename.function1, UIKIT.modulename.function2
• Keep public API small, use private functions where you can
• Export out private function for tests only if( typeof module !== 'undefined' )
• Export entire module in the end: if( typeof module !== 'undefined' ) { module.exports = UIKIT; } so react can use it.
• Provide sane defaults for parameters where you can
• Add jest unit tests where you can
• Document public API in the readme.

• dependencies - peerDependencies check
• Delete/enable js object and settings for pancake plugins

All modules have to work on the below browsers:

• >= IE8
• All modern browsers 2 version back; one version up

⬆ back to top

├─ core
└─ animate

└─ core

├─ core
└─ link-list
   ├─ core
   └─ body
      └─ core

└─ core

└─ core

└─ core

└─ core

├─ core
└─ body
   └─ core

└─ core

└─ core

└─ core

└─ core

├─ core
└─ link-list
   ├─ core
   └─ body
      └─ core

├─ core
└─ link-list
   ├─ core
   └─ body
      └─ core

├─ core
└─ body
   └─ core

└─ core

└─ core

└─ core

└─ core

└─ core

└─ core

└─ core

⬆ back to top

💡 Building the UI-Kit is only necessary of you want to contribute to it. If you want to use the modules in your own project, install them via npm as described in How to use.

To build this project you have to install lerna globally after cloning it via yarn global add lerna and run:

yarn
yarn bootstrap
yarn build

To make changes to an existing module, cd into the folder and run the watch:

cd packages/body
yarn watch

To add a new module run the scaffolding helper:

npm run scaffolding

❗ After you have filled out all the blanks and added your dependencies into your package.json make sure you run lerna bootstrap again.

⬆ back to top

Visual tests have been built into each module and can be seen in either of the README.md files of each module or in the listing above. We have also integrated pa11y for accessibility testing and are using jest for javascript tests.

Run all tests with the npm test script:

yarn test

⬆ back to top

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top