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.
What's new
23 Jan 2024: We released v4.4.0
This release included a new tag component and numerous improvements to the topic index and franchise landing page templates. Updates were also made to the table, social media, quick exit, radio, checkbox, and accordion components.
- Read the latest release notes.
- Sign up to get email updates.
- Watch the GitHub repository.
Contribute
The SWE is for, and built by, all of us—and we need your help to continue improving it. Anyone can suggest an improvement, report a bug or fix an error. Take a look at the 'contribute to SWE' page to find out how.
Join the User interface community of practice (UI CoP), where Queensland Government employees share and discuss our experiences, ideas and resources on user interface design and development, including the SWE.
Support
The SWE is maintained by Queensland Online within Smart Service Queensland, Department of Transport and Main Roads.
Contact the team by email at online@qld.gov.au.