Particle

Overview

Particle is a design system that integrates with Pattern Lab and Drupal 8 theme. It provides an opinionated set of tools and examples to build an application-agnostic design system and apply it to Pattern Lab for rapid prototyping, as well as apply it to a Drupal theme. It comes with in-depth documentation about the frontend approach using this project.

Features

• Application-agnostic design system
• Integration with Pattern Lab for rapid prototyping
• Integration with Drupal theme
• Strict Atomic Design component structure
• Webpack bundling of CSS, JavaScript, font, and static image assets for multiple targets
• Webpack Dev Server for localhosting and hot reloading of assets into Pattern Lab
• Twig namespaced paths automatically added into Drupal theme and Pattern Lab config
• Iconfont auto-generation
• Auto-linting against the AirBnB JavaScript Style Guide
• Fully configurable Webpack files
• Simple Yeoman generator for Design System component creation

Installation

To install Particle, follow these steps:

1. Make sure you have Node ^8, ^10, ^12, NPM ^5, ^6, and PHP ^7 installed.
2. Download the latest release of Particle.
3. Extract the downloaded file to any location.
4. Open a terminal and navigate to the extracted folder.
5. Run the following command to install all dependencies:

npm install

6. Wait until the webpack bundle output appears.
7. Visit http://0.0.0.0:8080/app-pl/pl/ (or http://localhost:8080/app-pl/pl/) to start working.

For more detailed instructions on how to install all dependencies on OSX, refer to this Gist.

Summary

Particle is a powerful design system that integrates with Pattern Lab and Drupal theme. It provides a comprehensive set of tools and examples to build and apply an application-agnostic design system. With features like strict Atomic Design component structure, auto-linting against the AirBnB JavaScript Style Guide, and fully configurable Webpack files, Particle offers a robust solution for frontend development.