Design

Research and rationale

Breakpoints

Our breakpoints were created by selecting the mid points between most commonly used screen resolutions for desktop, tablet and mobile devices in Australia. This method allowed us to determine the optimum place to create our ‘break points'.

For example, 960px was the largest frequently used screen size of note in medium screen category while 1024px was the smallest used screen size in the large category. We determine the break point to move from md-lg screen by finding the midpoint between these 2 sizes. The midpoint between 960 and 1024 was 992px.

We also compared our chosen breakpoints to other break points used in Design Systems to make sure we were consistent with any common practices, and we changed the number of breakpoints to 5 levels opposed to the original DTA system which only had 4 as this was more common amongst other design and allowed for greater control and flexibility at very large screen sizes.

All our breakpoints are based use variables so that we can easily optimise and adjust them as displays and resolutions change.

Why does the qld__grid class exist?

The qld__grid class is added for specificity. If a developer or designer is using another grid system that uses the same classes or has an element with the class of container they won’t inherit those styles. This prevents styles unintentionally leaking onto elements (DTA2018).

Why do we we use multiples of 8 in our grid?

For most common devices, the screen size in pixels is a multiple of 8. Keeping grid-component values at a multiple of 8 will generally make it easier to scale and implement a grid (Gordon 2022).