Skip to content

CSS-in-JS (styled-components, emotion and more...) starter design systems with react and docz

Notifications You must be signed in to change notification settings

designsystems-os/design-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 

Repository files navigation


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 )
  • Docz ( 📖 docs )

🚀 Getting Started

Install the CLI Globally

npm install -g @design-ui/[library]

Generate Your Design System

design-ui-[library] <project_name>

Running Your Project

To get up and running with your design system:

# 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

// Standalone
<DesignButton />

// Wrapper
<DesignButton>
  <ReactComponent />
</DesignButton>

Custom Styling

// Customizable Style Props
<DesignButton
  bg="rebeccapurple"
  bgActive="#6b41d2"
  color="#444"
  colorActive="#fff"
  br="5px"
/>

📃 Documentation

Docz ( .mdx ) documentation files are represented in each component folder but can be rearranged to suit your desired project structure

Screen-Shot-2019-02-23-at-2-37-23-PM

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:

Jazz Lyles
✉️

License

Licensed under MIT

Copyright © 2019 Jazz Lyles