Ripple 2.0
Table of Contents
About the project
Ripple is the design system for Victorian government digital products.
Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products. Developed by the Single Digital Presence (SDP) team within the Department of Government Services, Ripple strives to:
- make it easier for citizens to find, understand and use government information
- ensure users can easily navigate sites regardless of technical ability, location or device
- allow designers and developers to create consistent Brand Victoria digital products
- increase the speed of delivery for digital products and services
Over 50 government websites use Ripple to date, including our main vic.gov.au platform. These sites attract the visitation of millions of views per month.
Ripple Framework
The Ripple design system consists of the design elements and components used to build websites using the Victorian government brand and Ripple framework, a collection of Nuxt modules and layers primarily used to create headless SDP websites using the Tide Drupal CMS.
Ripple components are built using Vue 3 and TypeScript.
The monorepo is managed with pnpm workspaces, using Node.js.
Tests use Jest, Axe-core and Cypress.
We use custom rules for ESLint and Stylelint.
Usage
Ripple was built as a whole to implement front end sites for SDP using a framework of Vue 3 and Nuxt 3, but parts of the modular architecture can be used independently: ripple-ui-core can be used as UI component libraries for any Vue 3 project.
There is also an experimental web components implementation, and a standalone export of all Ripple design system CSS. See the relevant section on the Ripple documentation site for more details.
Availability
Note: Ripple 2 will only be hosted on Github Packages, any packages still published to npm are either pre-release or deprecated, and should not be used. Please see the section Access to Github Packages repos for instructions on how to set up a personal access token, and where to use it.
Documentation
See https://www.ripple.sdp.vic.gov.au/ for more information about the Ripple design system.
For information about using Ripple in SDP websites see the Ripple Framework section.
Contributing
Please see CONTRIBUTING.md as well as https://www.ripple.sdp.vic.gov.au/design-system/develop/contributing/ for information about how to submit changes to Ripple.
License
Distributed under the Apache 2.0 License. See LICENSE for more information.