• Stars
    star
    115
  • Rank 305,916 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React based boilerplate for creating scalable and well documented Design Systems. Live demo https://pulse.heartbeat.ua

Pulse

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:

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.