dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Spacing between components

We use a technique called lobotomised owl ( * + * ) to add spacing above components. This only occurs when the component follows another element. This allows us to apply a consistent spacing throughout the page.

As an example:

* + h2 {
  @include AU-space( margin-top, 2unit );
}

The above code will add a margin-top to any <h2> element that is followed by any other element. If the <h2> element is the first child or does not follow an element it will not receive a margin-top.

This allows our components to reduce the amount of wasted space. The selector adds space between elements but not above or below them.

This is extremely useful in reducing the amount of CSS we write. The lobotomised owl selector allows us to remove code like :first-of-type and :last-of-type from components. We let the selector do the work, adding margins in-between when the components have a sibling.

One benefit we have noticed is that content writers no longer need to add additional custom classes to the components on the page. The spacing works in a logical way out of the box. This allows for css not to interrupt the editorial process.