All Projects → dpc-sdp → ripple

dpc-sdp / ripple

Licence: Apache-2.0 License
Ripple is the frontend framework for Single Digital Presence, delivered using Nuxt and Vue.js

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects
SCSS
7915 projects
CSS
56736 projects
HTML
75241 projects
shell
77523 projects
Gherkin
971 projects

Projects that are alternatives of or similar to ripple

Awesome Design Systems
A curated list of bookmarks, resources and articles about design systems focused on developers.
Stars: ✭ 222 (+516.67%)
Mutual labels:  pattern-library, storybook, design-system
orfium-ictinus
This repo will include the building blocks to create the Orfium Parthenons to come ...
Stars: ✭ 20 (-44.44%)
Mutual labels:  storybook, design-system
ui-kit
D2iQ UI Kit
Stars: ✭ 29 (-19.44%)
Mutual labels:  storybook, design-system
react-ecommerce
E-commerce monorepo application using NextJs, React, React-native, Design-System and Graphql with Typescript
Stars: ✭ 136 (+277.78%)
Mutual labels:  storybook, design-system
core
The Pangolin.js core that drives everything.
Stars: ✭ 18 (-50%)
Mutual labels:  pattern-library, design-system
ACCESS-NYC-PATTERNS
ACCESS NYC Pattern library and design system documentation for https://access.nyc.gov. Maintained by @NYCOpportunity
Stars: ✭ 14 (-61.11%)
Mutual labels:  gov, design-system
Stardust
🎨Tiller Design System
Stars: ✭ 19 (-47.22%)
Mutual labels:  storybook, design-system
vf-core
A (primarily CSS) framework that targets needs of life science websites and services
Stars: ✭ 16 (-55.56%)
Mutual labels:  pattern-library, design-system
elements
Lovingly crafted ui components based on web components. Works well with all Frameworks - including Angular, React and Vue.
Stars: ✭ 42 (+16.67%)
Mutual labels:  storybook, design-system
pebble
Pebble Design System
Stars: ✭ 14 (-61.11%)
Mutual labels:  storybook, design-system
shared-react-components-example
An example of a mono-repository of shared React components libraries!
Stars: ✭ 85 (+136.11%)
Mutual labels:  storybook, design-system
react-toolkit
Flexible components html + css + react using BEM convention. Maybe, you can call it "Design System" !
Stars: ✭ 89 (+147.22%)
Mutual labels:  storybook, design-system
design-systems
A list of famous design systems, design languages and guidelines
Stars: ✭ 403 (+1019.44%)
Mutual labels:  pattern-library, design-system
react-uswds
USWDS 3.0 components built in React
Stars: ✭ 108 (+200%)
Mutual labels:  storybook, design-system
Ugnis
Visual CSS generator for React
Stars: ✭ 249 (+591.67%)
Mutual labels:  pattern-library, design-system
cuida
A design system built by Sysvale, using storybook and Vue components
Stars: ✭ 16 (-55.56%)
Mutual labels:  storybook, design-system
Bolt
The Bolt Design System provides robust Twig and Web Component-powered UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.
Stars: ✭ 186 (+416.67%)
Mutual labels:  pattern-library, design-system
Backpack Ui
All the tools you need to build the Lonely Planet UI experience.
Stars: ✭ 216 (+500%)
Mutual labels:  pattern-library, storybook
mod-uk-design-system
Build web applications that meet the Defence Digital service standards
Stars: ✭ 78 (+116.67%)
Mutual labels:  storybook, design-system
smores-react
🍭 Marshmallow React components
Stars: ✭ 34 (-5.56%)
Mutual labels:  storybook, design-system

Logo

Ripple is the frontend framework for Single Digital Presence, delivered using Nuxt and Vue.js.

Version

Storybook

Table of Contents

About The Project

Ripple is the presentation layer for building websites on the DPC Single Digital Presence platform.

It includes :

Project Version Description
Ripple component library packages Version A reusable Vue.js component library based upon an atomic design systems. See them on Ripple storybook.
@dpc-sdp/ripple-nuxt-ui Version A Nuxt.js module to add Ripple component library for Nuxt.js projects
@dpc-sdp/ripple-nuxt-tide Version A Nuxt.js module to add Ripple and Tide integration for Nuxt.js projects
@dpc-sdp/create-ripple-app Version Create a Nuxt.js project with Ripple and Tide integration in seconds
@dpc-sdp/ripple-test-tools Version Cypress.io helper library for testing a ripple nuxt site and tide backend

Built With

Browser support

Ripple components support all modern browsers, including IE11.

Usage

Ripple components are published individually as npm packages and can be imported in any Vue project. See the List of packages.

Use without Tide Backend

Jump to Use with Tide integration if you are going to use Ripple with SDP Tide Backend

Use Ripple in Vue.js app

Check out our example Vue.js app: Vue app example.

Use Ripple in Nuxt.js(SSR) app

For users are using Nuxt.js. You can use our Nuxt module @dpc-sdp/ripple-nuxt-ui to add Ripple components library to your project. This configures @dpc-sdp/ripple-global and adds required webpack config.

Please see @dpc-sdp/ripple-nuxt-ui for details.

Learn more about Ripple configuration at packages/components/Atoms/Global/README.md

Use with Tide integration

If you are building a website with a Tide Drupal content backend, follow below installation guide.

Installation with using create-ripple-app

This is easiest way to start a new project from scratch.

npx @dpc-sdp/create-ripple-app <my-project>

Learn more at packages/create-ripple-app/README.md

Manual Installation

You also can add @dpc-sdp/ripple-nuxt-tide to an existing Nuxt.js project. This adds @dpc-sdp/ripple-nuxt-ui as a dependency, no need to add it yourself.

Please see @dpc-sdp/ripple-nuxt-tide for details of installation and configuration.

Contributing

Please see CONTRIBUTING.md first.

Ripple includes both a component explorer using Storybook and an example reference application.

Support

Digital Engagement, Department of Premier and Cabinet, Victoria, Australia is a maintainer of this package.

License

Distributed under the Apache 2.0 License. See LICENSE for more information.

Attribution

Single Digital Presence offers government agencies an open and flexible toolkit to build websites quickly and cost-effectively.


Logo

The Department of Premier and Cabinet partnered with Salsa Digital to deliver Single Digital Presence. As long-term supporters of open government approaches, they were integral to the establishment of SDP as an open source platform.

Logo

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].