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