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.