We've created this React based boilerplate during our research on Design System approach. It consists of modern tools and basic Atomic Design structure.
- Up to date tools and practices for Design System creation
- Focused on Atomic Design methodology and naming convention
- Clear and understandable structure of folders
- With online documentation of components.
- Highlt customizable: themes, pages, templates
- Handy components import (see below)
- Easy work with styles
- webpack@4
- react@16, react-router@4
- hot-reloading
- eslint (airbnb config) — code linter
- prettier — code formatter
- x0 — style guide
- styled-components — css-in-js
- styled-system — style your components at the advanced level
yarnNote: we recommend to use yarn package manager, but npm is OK
yarn devProject will be running at http://localhost:8080/
yarn buildWill create the dist folder
yarn guideStyle guide will run at http://localhost:6060/
yarn guide:builddocs folder will be created
Run and get code review (you can pass a --fix setting that will try to solve a problem automatically)
yarn lintWe use styled system theming. Styled system is great theme-based style props for building responsive design systems with React. More data here.
Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are: atoms, molecules, organisms, templates, pages. To get more info about methodology, check out the original article.
- Styled components
- styled-system
- x0
- Redux
- Tests (Jest)
- Utils and Build tools (like favicon generator, etc)
- Awesome-XXX links
- Generact (for copy components)
Simply reach through our website
MIT.