Skip to content

duttonw/qgds-qol-mvp

 
 

Repository files navigation

Queensland Online Design System development space

Extends Bootstrap 5.3

Technical overview

  • ES6 Javascript
  • ESbuild for bundling, minification and transpiling
  • Storybook for component development
  • 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

Getting started

1. Download

git clone https://github.com/qld-gov-au/qgds-qol-mvp

2. Setup

Prerequisites

  • Node 18.17.1
  • NPM 10.2.5

Install dependencies

npm install

Build the Desing System CSS, Components and templates

npm run build or node build.js

Watch for changes and rebuild automatically

npm run watch or node build.js --watch

Start Storybook for component development

npm run storybook

Start a local server from /dist folder

npm run serve

Next steps

  • HTML templating using drop in components
  • Dev build and testing branching

Documentation

Development

We recommend using VSCode as the IDE for development with the following plugins:

  • Prettier
  • ESLint
  • Mustache JS or Handlebars JS template support

About

MVP development space for Queensland Online Design System

Resources

Stars

Watchers

Forks

Packages

 
 
 

Languages

  • HTML 78.2%
  • SCSS 14.5%
  • JavaScript 6.2%
  • Handlebars 1.1%