A Queensland Online - Design System development space
Please see For Gov - Queensland Government Design System for more details.
This is a BS5 flavour based on QGDS Figma Design.
Qld Health edition can be found at design-system.health.qld.gov.au.
This includes:
- Public NPM Release packages:
- Squiz Git bridge dist/binary repo: https://github.com/qld-gov-au/qgds-bootstrap5-release
- Git CDN repo: https://github.com/qld-gov-au/qgds-bootstrap5-cdn
- ES6 Javascript
- ESbuild for bundling, minification and transpiling
- Storybook for component development and documentation
- Mustache JS / Handlebars JS for component and HTML templating
- Figma for design and prototyping
- CSS/SCSS, extending Bootstrap 5.3 core components with custom CSS properties
- NPM for package management
- Storybook examples available at https://qld-gov-au.github.io/qgds-bootstrap5/
This repo is designed to allow easy forking.
Do enable GitHub Actions post forking and GitHub pages via GitHub actions
Also do configure your own personal chromatic to ease development in providing delta change diff-ing.
We welcome external contributors, so don't be afraid to raise PR's back to this repo for inclusion into core deployment + cdn repo.
This repo includes many workflows to reduce developer overheads. This includes but not limited to:
- CICD on all commit's and PR's
- GitHub io static document deployment based on develop/main
- Dependabot auto patching + storybook upgrade feature
- One click npm versioning publish (patch, minor, major) **
- Auto generate release notes based on PR's created (On version Tag)
- Npm js package publish (On version Tag) ***
- GitHub package Publish (On version Tag) ****
** Must configure GitHub service account ssh private key loaded into GitHub actions secret DEPLOY_KEY
*** Must have npm js token loaded into GitHub actions secrets NPM_TOKEN
to allow publishing.
**** Switch's @qld-gov-au with forked username (lowercase) and publish to your account see .github/workflows/githubPackage.yml step Update package scope, export package name
.
If you hava java and maven installed. This will pull in a local node/npm version and run through the full lifecycle build.
git clone https://github.com/qld-gov-au/qgds-bootstrap5
cd qgds-bootstrap5
mvn install
-
Download
git clone https://github.com/qld-gov-au/qgds-bootstrap5
-
Setup
Prerequisites
- Node 18.17.1+
- NPM 10.2.5+
-
Install dependencies
npm install
-
Build the Design System CSS, Components and templates
npm run build
-
Start Watch and Storybook for component development
npm run dev-storybook
Alt:
npm run watch npm run storybook
-
Lint
npm run lint
-
Static view, start a local server from /dist folder
npm run serve
-
Next steps
-
HTML templating using drop in components
If you wish to use the includes handle bars, please ensure "handlebars": "4.7.8" + is loaded prior to running handlebars.helpers.bundle.js
-
Dev build and testing branching
-
We recommend using VSCode as the IDE for development with the following plugins:
- Prettier
- ESLint
- Mustache JS or Handlebars JS template support
Webstorm also works.