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

• [x] styled components
• [x] styled system
• [ ] tests (Jest)

Got questions or suggestions?

Simply reach through our website

License

MIT.