Ripple
Ripple is the frontend framework for Single Digital Presence, delivered using Nuxt and Vue.js
Overview:
The Ripple project is the presentation layer for building websites on the DPC Single Digital Presence platform. It is built with Vue and Nuxt and provides support for all modern browsers. Ripple components can be published individually as npm packages and imported into any Vue project. There are two ways to use Ripple: without the Tide backend and with the Tide integration for Drupal content backend. Contributing to the project is encouraged and supported by the Digital Engagement department of the Department of Premier and Cabinet, Victoria, Australia. The project is licensed under the Apache 2.0 License.
Features:
- Vue and Nuxt-based presentation layer for building websites
- Support for all modern browsers, including IE11
- Published as individual npm packages for easy import into Vue projects
- Two installation options: using create-ripple-app or manually adding to an existing Nuxt.js project
- Component explorer using Storybook and example reference application included
Summary:
Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform. It provides Vue and Nuxt-based components that support all modern browsers. Ripple can be easily added to any Vue project through npm packages. For installation, there are options for both projects without the Tide backend and those with the Tide integration. Ripple is open to contributions and is supported by the Digital Engagement department. The project is licensed under the Apache 2.0 License.
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Storybook
Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.