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.

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 Government
  • scss-general/_bootstrap-variables - contains the standard set of Bootstrap variables
  • scss-general/_bootstrap-loader.scss - loader for standard Bootstrap files, from node_modules/bootstrap-sass/
  • scss-general/bootstrap/_mixins.scss - loader for Bootstrap mixins, from node_modules/bootstrap-sass/mixins/

qg-noscript.scss - contains styles for browsers not running javascript.