Awesome
Pulse Boilerplate
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.
Features
- 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
What's included
The actual versions of:
- 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
Setup
Install dependencies
npm install
Run development server
npm run dev
Project will be running at http://localhost:3000/
Generate production build
npm run build
Will create the dist folder
Style guide and documentation
Run a development server
npm run guide
Style guide will run at http://localhost:6060/
ESLint
Run and get code review (you can pass a --fix setting that will try to solve a problem automatically)
npm run eslint
Theming
We use styled components theming. The styled system provides great theme-based style props for building responsive design systems with React.
A few words about Atomic Design
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.
TODO
- styled components
- styled system
- tests (Jest)
Got questions or suggestions?
Simply reach through our website
License
MIT.