Get started with SWE
Review the foundations to learn about the key underpinning elements of the SWE. Explore the components and templates to familiarise yourself with the existing interface patterns that you can incorporate into your website.
To help with rapid design and development, the SWE is tightly integrated with the open source frontend framework Bootstrap 4.
Figma UI kit
A SWE UI kit is available in Figma and contains all the design assets required to quickly and easily create, share and test prototypes.
To reuse the styles, components and templates from the SWE UI kit across your Figma design files you'll need access to the library. Send your Figma account email address to online@qld.gov.au and we'll send you a direct invitation.
If you don't need access to the library, you can access the view-only SWE Figma UI kit.
HTML prototyping
You can also use the SWE codebase available on GitHub for HTML prototyping.
Installation instructions can be found on the GitHub repository: qg-web-template.
For the compiled/released assets copy of the codebase, see the GitHub repository: web-template-release.
The SWE includes jQuery and a suite of custom Javascript features.
The SWE is built on SASS. The source SCSS files are included in the NPM package (or the GitHub released assets repository) under /scss. The main SCSS files are:
qg-main.scss - the main file which includes all other SCSS fragments. Compiles to qg-main.css .
scss-general/_qg-variables.scss- contains settings specific to Queensland Governmentscss-general/_bootstrap-variables- contains the standard set of Bootstrap variablesscss-general/_bootstrap-loader.scss- loader for standard Bootstrap files, fromnode_modules/bootstrap-sass/scss-general/bootstrap/_mixins.scss- loader for Bootstrap mixins, fromnode_modules/bootstrap-sass/mixins/
qg-noscript.scss - contains styles for browsers not running javascript.
See Squiz Matrix CMS documentation and guides for instructions on how to add and configure SWE components on your web pages.