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
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.