Pulse Boilerplate screenshot

Pulse Boilerplate

Author Avatar Theme by Heartbeatua
Updated: 25 Jul 2021
116 Stars

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

Categories

Overview:

The PulsePulse Boilerplate is a React-based boilerplate that was created during research on the Design System approach. It provides an up-to-date set of tools and a basic Atomic Design structure, making it easy to create a Design System. The boilerplate is highly customizable, with themes, pages, and templates that can be easily modified. It also incorporates styled system, which allows for advanced styling options using styled components.

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

Installation:

To install the PulsePulse Boilerplate, follow these steps:

  1. Install the dependencies:
npm install
  1. Run the development server:
npm run start

The project will be running at http://localhost:3000/

  1. Generate production build:
npm run build

This will create the dist folder.

  1. Style guide and documentation:
npm run styleguide

This will run a development server for the style guide, accessible at http://localhost:6060/

  1. ESLint:
npm run lint

This command will run ESLint and provide code review. You can also pass a --fix setting to automatically fix some problems.

Summary:

The PulsePulse Boilerplate is a React-based boilerplate that simplifies the creation of Design Systems. It provides modern tools and practices, and follows the Atomic Design methodology and naming convention. With a clear and understandable folder structure, customizable themes, and easy styling using styled system, this boilerplate makes it easy to create a well-structured and visually appealing Design System.