Queensland Government Design System - Vanilla

This is the 'Vanilla' version of the Queensland Government Design System, built and maintained by Queensland Health's Digital Experience Team.

This codebase is designed around the principle of reduce reliance on 3rd party libraries and framework lock in. We will continue to reduce this reliance over time.

For more information on the Queensland Government Design System and other codebases, please visit - Queensland Government Design System.

Inclusions

• Public NPM release package:
  • https://www.npmjs.com/package/@qhealth-design-system/core
• Figma
  • QGDS Figma

Technical overview

• Webpack – Bundling, transpilation, and asset optimisation
• Sass + PostCSS – CSS preprocessing and automatic prefixing
• HandlebarsJS – Component and HTML templating
• Storybook – Component development, testing, and documentation
• Hot Module Reloading (HMR) – Live HTML/JS/CSS updates during development
• Figma – Design, prototyping, and collaboration
• NPM – Package management and build automation

Documentation

• Storybook documentation is available at https://qld-health-online-team.github.io/design-system

Development Getting started

Requirements

• Node: v20.19.1
• NPM: 10.8.2

Download repo

git clone https://github.com/Qld-Health-Online-Team/design-system.git
cd design-system

Install dependencies

npm install

Build the Design System CSS, JS, Components and templates

npm run build

Build Storybook for Component development

npm run build-storybook
npm run storybook

Lint

npm run lint

Unit tests

npm run test

GitHub Actions

• NPM package publishing and release management
• Automated Semantic versioning for patch, minor, and major releases
• Automated CI/CD validation for pull requests
• Automated GitHub io static documentation for Storybook build and deployment workflows
• Chromatic visual regression testing on master and release branches

You can use any IDE of your choice. Our development team uses Visual Studio Code (VS Code) with the following recommended extensions:

• Prettier
• ESLint
• HandlebarsJS Template Support

Accessibility

This repository is tested against the Web Content Accessibility Guidelines (WCAG) 2.2 Level A and AA to help ensure a high standard of accessibility. We follow the Queensland Government's digital accessibility requirements to support equitable access to information, services, and opportunities.

Communication

If you have a suggestion for improvement or find an issue, please raise an issue in this repository.