styled-components
Description
Design-UI is a starter template built on top of create-react-app v2+ to give you the ability to create a design system from scratch with :
🚀 Getting Started
Install the CLI Globally
npm install -g @design-ui/styledGenerate Your Design System
design-ui-styled <project_name>Run 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 styled-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
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 jest-styled-components for your Styled components
🔧 Tooling
Style Linting is included by default and its configuration can be customized in the .stylelintrc file at the root of the project
Contributors
Built with 💖 by this human:
License
Licensed under MIT
Copyright © 2019 Jazz Lyles