All Projects → istreamlabs → pebble

istreamlabs / pebble

Licence: Apache-2.0 license
Pebble Design System

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects

Projects that are alternatives of or similar to pebble

Awesome Design Systems
A curated list of bookmarks, resources and articles about design systems focused on developers.
Stars: ✭ 222 (+1485.71%)
Mutual labels:  design-systems, storybook, design-system
shared-react-components-example
An example of a mono-repository of shared React components libraries!
Stars: ✭ 85 (+507.14%)
Mutual labels:  design-systems, storybook, design-system
react-uswds
USWDS 3.0 components built in React
Stars: ✭ 108 (+671.43%)
Mutual labels:  storybook, design-system
ui-kit
D2iQ UI Kit
Stars: ✭ 29 (+107.14%)
Mutual labels:  storybook, design-system
storybook-addon-blabbr
Component reviewer for React Storybook
Stars: ✭ 13 (-7.14%)
Mutual labels:  design-systems, storybook
moon-design
Moon Design System for React
Stars: ✭ 209 (+1392.86%)
Mutual labels:  design-systems, design-system
design-systems
A list of famous design systems, design languages and guidelines
Stars: ✭ 403 (+2778.57%)
Mutual labels:  design-systems, design-system
playbook
Playbook Design System
Stars: ✭ 17 (+21.43%)
Mutual labels:  design-systems, design-system
Argon Design System
Argon - Design System for Bootstrap 4 by Creative Tim
Stars: ✭ 2,307 (+16378.57%)
Mutual labels:  design-systems, design-system
sketch wireframing kit
Quick Sketchapp wireframing tool for UK government digital services
Stars: ✭ 74 (+428.57%)
Mutual labels:  design-systems, design-system
fyndiq-ui
Library of reusable web frontend components for Fyndiq
Stars: ✭ 39 (+178.57%)
Mutual labels:  design-systems, storybook
Stardust
🎨Tiller Design System
Stars: ✭ 19 (+35.71%)
Mutual labels:  storybook, design-system
web-components
A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
Stars: ✭ 322 (+2200%)
Mutual labels:  design-systems, design-system
Storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Stars: ✭ 67,445 (+481650%)
Mutual labels:  design-systems, storybook
mod-uk-design-system
Build web applications that meet the Defence Digital service standards
Stars: ✭ 78 (+457.14%)
Mutual labels:  storybook, design-system
orfium-ictinus
This repo will include the building blocks to create the Orfium Parthenons to come ...
Stars: ✭ 20 (+42.86%)
Mutual labels:  storybook, design-system
Vue Cion Design System
CION - Design system boilerplate for Vue.js
Stars: ✭ 119 (+750%)
Mutual labels:  design-systems, design-system
Vue Design System
An open source tool for building UI Design Systems with Vue.js
Stars: ✭ 2,077 (+14735.71%)
Mutual labels:  design-systems, design-system
cuida
A design system built by Sysvale, using storybook and Vue components
Stars: ✭ 16 (+14.29%)
Mutual labels:  storybook, design-system
react-ecommerce
E-commerce monorepo application using NextJs, React, React-native, Design-System and Graphql with Typescript
Stars: ✭ 136 (+871.43%)
Mutual labels:  storybook, design-system

CI GitHub Action

Deprecation Notice

This package has been deprecated and is no longer maintained


Pebble

A react-based design system built by iStreamPlanet

Documentation

Visit the Pebble documentation site for information.

Contribution and Support

Before opening an issue or pull request, please read the Contributing guide.

Development

See the Development guide for instructions on how to run Pebble locally for development.

Installation and Usage

To use Pebble, add the package to your package.json using your package manager of choice.

For yarn users:

$ yarn add @istreamplanet/pebble node-sass react-router-dom

For npm users:

npm install @istreamplanet/pebble node-sass react-router-dom --save

Include the Pebble foundation stylesheet in your layout template.

import '@istreamplanet/pebble/dist/Styles/foundation.scss';

Import the components into your application

import { Button, Card } from '@istreamplanet/pebble'`

Then add them in your React component as you would any other:

const MyComponent = () => (
  <Card>
    <Button>Submit</Button>
  </Card>
)

Have a look at the pebble.istreamplanet.net for component documentation.

Release History

See the Releases page.

License

Copyright © 2019 iStreamPlanet Co., LLC

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.

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].