We've created this React based boilerplate during our research on the 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
- Documentation
- Highly customizable: themes, pages, templates
- Easy to work with styles using styled system
- webpack, babel, react, react-router
- hot-reloading
- eslint (airbnb config) — code linter
- prettier — code formatter
- styled-components — css-in-js
- styled-system — stylize your components at an advanced level
npm installnpm run devProject will be running at http://localhost:3000/
npm run buildWill create the dist folder
npm run guideStyle guide will run at http://localhost:6060/
Run and get code review (you can pass a --fix setting that will try to solve a problem automatically)
npm run eslintWe use styled components theming. The styled system provides great theme-based style props for building responsive design systems with React.
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
- tests (Jest)
Simply reach through our website
MIT.