Skip links and keyboard navigation

SWE foundations

Layout

Columns

Flexible 3 column layout

The main content area is a flexible section which can have one, 2 or 3 columns.

The main content of qld.gov.au website is laid out in three columns and is made up of the sections:

  • #qg-section-nav
  • #qg-primary-content
  • #qg-secondary-content

Wide layout

For applications, and other special purposes, it is possible to have the #qg-primary-content element span the whole width of the document. To do this, add the class qg-wide to the #qg-content element: <div id="qg-content" class="qg-wide">. For example, see the application page template.

Once you've done this, you'll notice the secondary content is no longer displayed. To add the secondary content back, add the class qg-has-aside to the #qg-primary-content element: <div id="qg-primary-content" class="qg-has-aside" role="main">.

Grid system

The SWE uses Bootstrap's grid system, with a custom responsive gutter system. The sizes for the gutter are as follows:

  • at xs, sm, and md screen sizes, the gutter is 30px to conserve screen real estate
  • at lg screen sizes, the gutter is 50px.

Bootstrap’s documentation has comprehensive information about how the grid system works.

Breakpoints

The SWE uses the following standard Bootstrap media queries:

// Extra small devices (portrait mobile phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape mobile phones, tablets, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, laptops 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

The SWE uses a responsive width that has a custom maximum width of 1327px.

Spacing

When adding new elements, your gutters will automatically be taken care of. However, your top and bottom margins and padding may not be. You can fix this by using our responsive spacing mixin.

For responsive margins

#yourElement {
    @include qg-responsive-spacing(margin);
    @include qg-responsive-spacing(margin-top);
    @include qg-responsive-spacing(margin-right);
}

For responsive padding

#yourElement {
    @include qg-responsive-spacing(padding);
    @include qg-responsive-spacing(padding-left);
    @include qg-responsive-spacing(padding-bottom);
}

If you wish to use the full gutter size (e.g. for top margins), you can set this using the 'full' parameter.

#yourElement {
    @include qg-responsive-margin(top, full);
}

Mixin specification for qg-responsive-spacing

ParameterDescriptionOptions
Property ($prop) Required—Defines the css property to use.
  • margin: sets all four sides
  • margin-top: the top margin
  • margin-bottom: the bottom margin
  • margin-left: the left margin
  • margin-right : the right margin
  • padding: sets all four sides
  • padding-top: the top padding
  • padding-bottom: the bottom padding
  • padding-left: the left padding
  • padding-right: the right padding
Small ($small) Optional—Defines what size to set the small breakpoint to. Can be set directly.
Note: If you only set the small parameter, and do not set it directly with $small, it will automatically set $large to the same value.
  • false: do not set this size
  • default: set this size to the default value
  • full: set this size to the full gutter value
  • *px / *em / *% : set this value to a specific px/em/% (note: this should be avoided).
Large ($large) Optional—Defines what size to set the large breakpoint to. Can be set directly.
  • false: do not set this size
  • default: set this size to the default value
  • full: set this size to the full gutter value
  • *px / *em / *% : set this value to a specific px/em/% (note: this should be avoided).
Last updated:
7 April 2022