❗❗ NOT MAINTAINED ANYMORE. PLEASE USE https://github.com/govau/uikit/

Getting started

What is this?

UI-Kit is 2 things:

1. a draft design guide to build an accessible standardised look and feel for GOV.AU projects: gov-au-ui-kit.apps.staging.digital.gov.au
2. a lean and frugal CSS & JS framework (found in assets/) that you can include in your project:

Link to precompiled minified files

<link rel="stylesheet" type="text/css" href="https://gov-au-ui-kit.apps.staging.digital.gov.au/latest/ui-kit.min.css"/>
<script type="text/javascript" src="https://gov-au-ui-kit.apps.staging.digital.gov.au/latest/ui-kit.min.js"></script>

GOV.AU UI-Kit is currently in early draft release. You can help us build it by contributing.

The /docs/ folder contains draft documentation on experimental work. For example, how to install UI-Kit for use with webpack.

Features

• Normalize.
• Bourbon, version 4.2.7.
• Neat, and settings for a grid framework with some good defaults.
• Basic styling for content with some good typographic coverage.
• Basic styling for UI elements (eg input, label, etc).

For a full list of features see the CHANGELOG.

Accessibility

The framework is built on a solid accessible HTML foundation. We follow a philosophy of progressive enhancement over graceful degradation to produce accessible components by default.

UI Kit aims to be WCAG2 AA compliant, and AAA where possible.

We use automated testing:

• WCAG 2.0 criteria using HTML_CodeSniffer
• HTML validation using Nu HTML Checker.

We are working on:

• manual evaluation using Wave by WebAIM
• manual checking of page structure, content and keyboard navigation
• testing with users and assistive technologies
• an audit.

Browser support

Read cross browser and device support table.

The kit uses a conditional styling mixin for specific versions of IE. Use this when extending the kit.

We are working on:

• automated browser testing as part of our build process
• manual testing of all CSS, JS and markup
• documenting browser support for each component.

What this isn't

This is not yet a complete design or design system. This is the starting point that will develop with your help.

Who is this for?

Teams building Australian Government sites. This was designed for GOV.AU teams, but we welcome use outside of federal government.

How is this related to the Digital Service Standard?

The Digital Service Standard requires teams to build services using common design patterns. This is draft work on the framework and guidance that will eventually become the design patterns for digital content.

You should use this with the draft Content Style Guide for Digital Transformation Office projects.

Build the Guide yourself

We have a build process for the development of the framework which uses gulp on node.js.

To build it yourself, begin by installing the system dependencies:

• Node.js v5.0.0+

Install node package dependencies:

npm install

Run a build:

npm run-script build

Run a build with livereloading:

npm start

Run accessibility tests:

npm test

Note: Check Pa11y's requirements to make sure you have the necessary dependencies installed to run the automated accessibility tests.

The compiled style guide can be found at ./build/index.html and the UI Kit CSS at ./build/latest/ui-kit.css.

We have automated the build, with a few additions:

• sass-lint for linting
• cssnano for CSS compression
• autoprefixer for adding CSS vendor prefixes
• AusDTO/gulp-html for HTML validation
• kss for auto-building a living style guide

Our CI build is available as a shell script at bin/cibuild.sh.

Dependencies

We use Bourbon 4.2.7. We include its .scss files directly rather than calling it via its node (or gem) package. Bourbon and Neat live under /assets/sass/vendor.

Some of the key libraries we use are:

• gulp ^3.9.1
• gulp-sass ^2.3.1
• kss ^3.0.0-beta.14
• sass-lint ^1.7.0

^ = compatible with version (see semver).

Make GOV.AU UI-Kit better

• Contribute to our GitHub issue register by logging new issues and joining the discussion.
• Contribute to this repository. Please see CONTRIBUTING.md, Contributor Code of Conduct and our code Conventions, (also see Block Element Modifier), first.
• Contact us via the DTO slack in #guides-uikit.

Project goal

This framework is in active development.

Goal: build a lean and frugal CSS/SCSS framework to make building GOV.AU easier. It should:

• provide base consistency
• allow for easier rapid prototyping directly in the browser
• should not get in the way of customised design needs.

Releases

See RELEASING.md and CHANGELOG.md.

We aim to provide stable, usable releases at the end of each sprint.

Deprecation

We are wary about breaking changes. We will work to ensure we will gracefully deprecate any changes that cause things to break.

Installer/wrapper

We may create an installer wrapper (likely node-based), or release via git submodules.

Copyright & license

© Copyright Commonwealth of Australia.

With the exception of the Commonwealth Coat of Arms and where otherwise noted, this work is licensed under the MIT license.

This repository includes Bourbon, Neat and Normalize.css. All also use the MIT license.

GOV.AU UI-Kit is maintained and funded by the Digital Transformation Agency.