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
, andmd
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
Parameter | Description | Options |
---|---|---|
Property ($prop) | Required—Defines the css property to use. |
|
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. |
|
Large ($large) | Optional—Defines what size to set the large breakpoint to. Can be set directly. |
|