Grid selection

The grid system we use is heavily based on bootstrap. After reviewing many Australian government web-properties it was clear that the grids from bootstrap are commonly used for responsive layouts and that our users are likely to already be familiar with using it.

Note: we are not using the latest grid from bootstrap because it uses flexbox, which is not fully adopted by the browsers we support.

Why does the au-grid class exist?

The .au-grid class is added for specificity. If a developer or designer is using another grid system which uses the same classes or has an element with the class of .container it means they do not inherit those styles. This was a fundamental decision we made when creating this design system as we didn't want styles to leak onto elements unintentionally.