GOV.AU UI-Kit

The UI-Kit for the Australian Government.

How to use

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

Checklist and browser support

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

Checklist

General checks

A11y checks

A11y color contrast
Keyboard accessible?
A11y expert review

CSS / Sass

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

Js

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.

package.json

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

Browser support

All modules have to work on the below browsers:

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

⬆ back to top

Modules

@gov.au/core

yarn add @gov.au/core or npm install @gov.au/core

See the visual test file for core
See the readme file for core

No dependencies

@gov.au/accordion

yarn add @gov.au/accordion or npm install @gov.au/accordion

See the visual test file for accordion
See the readme file for accordion

Dependencies:

├─ core
└─ animate

@gov.au/animate

yarn add @gov.au/animate or npm install @gov.au/animate

See the visual test file for animate
See the readme file for animate

No dependencies

@gov.au/body

yarn add @gov.au/body or npm install @gov.au/body

See the visual test file for body
See the readme file for body

Dependencies:

└─ core

@gov.au/breadcrumbs

yarn add @gov.au/breadcrumbs or npm install @gov.au/breadcrumbs

See the visual test file for breadcrumbs
See the readme file for breadcrumbs

Dependencies:

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

@gov.au/buttons

yarn add @gov.au/buttons or npm install @gov.au/buttons

See the visual test file for buttons
See the readme file for buttons

Dependencies:

└─ core

@gov.au/callout

yarn add @gov.au/callout or npm install @gov.au/callout

See the visual test file for callout
See the readme file for callout

Dependencies:

└─ core

@gov.au/control-input

yarn add @gov.au/control-input or npm install @gov.au/control-input

See the visual test file for control-input
See the readme file for control-input

Dependencies:

└─ core

@gov.au/cta-link

yarn add @gov.au/cta-link or npm install @gov.au/cta-link

See the visual test file for cta-link
See the readme file for cta-link

Dependencies:

└─ core

@gov.au/direction-links

yarn add @gov.au/direction-links or npm install @gov.au/direction-links

See the visual test file for direction-links
See the readme file for direction-links

Dependencies:

├─ core
└─ body
   └─ core

@gov.au/footer

yarn add @gov.au/footer or npm install @gov.au/footer

See the visual test file for footer
See the readme file for footer

Dependencies:

└─ core

@gov.au/grid-12

yarn add @gov.au/grid-12 or npm install @gov.au/grid-12

See the visual test file for grid-12
See the readme file for grid-12

Dependencies:

└─ core

@gov.au/header

yarn add @gov.au/header or npm install @gov.au/header

See the visual test file for header
See the readme file for header

Dependencies:

└─ core

@gov.au/headings

yarn add @gov.au/headings or npm install @gov.au/headings

See the visual test file for headings
See the readme file for headings

Dependencies:

└─ core

@gov.au/inpage-nav

yarn add @gov.au/inpage-nav or npm install @gov.au/inpage-nav

See the visual test file for inpage-nav
See the readme file for inpage-nav

Dependencies:

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

@gov.au/keyword-list

yarn add @gov.au/keyword-list or npm install @gov.au/keyword-list

See the visual test file for keyword-list
See the readme file for keyword-list

Dependencies:

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

@gov.au/link-list

yarn add @gov.au/link-list or npm install @gov.au/link-list

See the visual test file for link-list
See the readme file for link-list

Dependencies:

├─ core
└─ body
   └─ core

@gov.au/page-alerts

yarn add @gov.au/page-alerts or npm install @gov.au/page-alerts

See the visual test file for page-alerts
See the readme file for page-alerts

Dependencies:

└─ core

@gov.au/progress-indicator

yarn add @gov.au/progress-indicator or npm install @gov.au/progress-indicator

See the visual test file for progress-indicator
See the readme file for progress-indicator

Dependencies:

└─ core

@gov.au/responsive-media

yarn add @gov.au/responsive-media or npm install @gov.au/responsive-media

See the visual test file for responsive-media
See the readme file for responsive-media

Dependencies:

└─ core

@gov.au/select

yarn add @gov.au/select or npm install @gov.au/select

See the visual test file for select
See the readme file for select

Dependencies:

└─ core

@gov.au/skip-link

yarn add @gov.au/skip-link or npm install @gov.au/skip-link

See the visual test file for skip-link
See the readme file for skip-link

Dependencies:

└─ core

@gov.au/tags

yarn add @gov.au/tags or npm install @gov.au/tags

See the visual test file for tags
See the readme file for tags

Dependencies:

└─ core

@gov.au/text-inputs

yarn add @gov.au/text-inputs or npm install @gov.au/text-inputs

See the visual test file for text-inputs
See the readme file for text-inputs

Dependencies:

└─ core

⬆ back to top

Contribute

💡 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

Tests

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

Name		Name	Last commit message	Last commit date
Latest commit History 514 Commits
.templates		.templates
packages		packages
scripts		scripts
.cfignore		.cfignore
.editorconfig		.editorconfig
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
circle.yml		circle.yml
lerna.json		lerna.json
manifest.yml		manifest.yml
package.json		package.json
uikit.json		uikit.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

GOV.AU UI-Kit

Contents

How to use

Checklist and browser support

Checklist

General checks

A11y checks

CSS / Sass

Js

package.json

Browser support

Modules

Contribute

Tests

License

};

About

Releases

Packages

Languages

License

TrebBrennan/uikit

Folders and files

Latest commit

History

Repository files navigation

GOV.AU UI-Kit

Contents

How to use

Checklist and browser support

Checklist

General checks

A11y checks

CSS / Sass

Js

package.json

Browser support

Modules

Contribute

Tests

License

};

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages