React based boilerplate for creating scalable and well documented Design Systems. Live demo https://pulse.heartbeat.ua
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
styleguide
tmp
.babelrc
.editorconfig
.eslintrc
.gitignore
.huskyrc.json
.lintstagedrc
LICENSE
README.md
package.json
webpack.config.js
yarn.lock

README.md

Pulse

Pulse Boilerplate

We've created this React based boilerplate during our research on 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
  • With online documentation of components.
  • Highlt customizable: themes, pages, templates
  • Handy components import (see below)
  • Easy work with styles

What's included

Setup

Install dependencies

yarn

Note: we recommend to use yarn package manager, but npm is OK

Run development server

yarn dev

Project will be running at http://localhost:8080/

Generate production build

yarn build

Will create the dist folder

Style guide and documentation

Run a development server

yarn guide

Style guide will run at http://localhost:6060/

Generate production build

yarn guide:build

docs folder will be created

ESLint

Run and get code review (you can pass a --fix setting that will try to solve a problem automatically)

yarn lint

Theming

We use styled system theming. Styled system is great theme-based style props for building responsive design systems with React. More data here.

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
  • x0
  • Redux
  • Tests (Jest)
  • Utils and Build tools (like favicon generator, etc)
  • Awesome-XXX links
  • Generact (for copy components)

Got questions or suggestions?

Simply reach through our website

License

MIT.