Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/designsystems-os/design-ui
CSS-in-JS (styled-components, emotion and more...) starter design systems with react and docz
https://github.com/designsystems-os/design-ui
cli css-in-js design-systems docz emotion jest react styled-components
Last synced: about 3 hours ago
JSON representation
CSS-in-JS (styled-components, emotion and more...) starter design systems with react and docz
- Host: GitHub
- URL: https://github.com/designsystems-os/design-ui
- Owner: designsystems-os
- Created: 2019-02-23T21:56:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-03-02T21:00:15.000Z (over 5 years ago)
- Last Synced: 2024-11-09T21:11:34.322Z (7 days ago)
- Topics: cli, css-in-js, design-systems, docz, emotion, jest, react, styled-components
- Language: JavaScript
- Homepage: https://opencollective.com/design-systems-os/updates/npm-releases
- Size: 1.12 MB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
fully customizable design systems w/ styled-components and more...
## **Description**
**Design-UI** is a collection of starter templates built on top of `create-react-app v2+` to give you the ability to create a design system from scratch with:
- Different **CSS-in-JS** libraries (_`styled-components`, `emotion` etc._)
- `React v16.8+` ([ 📖 _docs_ ](https://reactjs.org/))
- `Docz` ([ 📖 _docs_ ](https://www.docz.site))
## 🚀 **Getting Started**
### Install the CLI Globally
```bash
npm install -g @design-ui/[library]
```
### Generate Your Design System
```bash
design-ui-[library]
```
### Running Your Project
To get up and running with your design system:
```bash
# Install Your Dependencies
yarn
# Run Your Test Suite
yarn test
# Lint Your Styled Components
yarn lint:css
# Serve Your Documentation
yarn docs
```
## 💁🏾 **Styling Components**
You can use the design system components standalone or as wrappers for your React components that contain additional logic to separate concerns
### Basic Usage w/ Default Styles
```html
// Standalone
// Wrapper
```
### Custom Styling
```html
// Customizable Style Props
```
## 📃 **Documentation**
**Docz** ( _.mdx_ ) documentation files are represented in each component folder but can be rearranged to suit your desired project structure
You can customize documentation styling in the **doczrc.js** file at the root of the default project
## ✏️ **Testing**
The template comes with out-of-the-box testing with `jest` for your React components (_included with `create-react-app`_) and testing compatible with your specific CSS-in-JS library
## **Contributors**
### Built with 💖 by this human:
[
](https:/jazz-lyles.com/)
[✉️](mailto:[email protected])
## **License**
Licensed under MIT
Copyright © 2019 [Jazz Lyles](https://jazz-lyles.com)