Particle: A design system integrating to Pattern Lab and a Drupal 8 theme

Particle mascot: Astrogoat

Particle is an opinionated set of tools and examples to:

Build an application-agnostic design system
Apply that design system to a locally-served Pattern Lab for rapid prototyping
Apply that design system to a Drupal theme

In depth documentation about frontend approach using this project at Phase2 Frontend Docs

Prerequisites

Drupal theme, Grav theme, and Pattern Lab app
Strict Atomic Design component structure
Webpack bundling of all CSS, javascript, font, and static image assets for multiple targets (Drupal theme, Grav theme, Pattern Lab)
Webpack Dev Server for local hosting and hot reloading of assets into Pattern Lab
Twig namespaced paths automatically added into Drupal theme and Pattern Lab config. Within any twig file, @atoms/thing.twig means the same thing to Drupal theme and Pattern Lab.
Iconfont auto-generation
Bootstrap 4 integration, used for all starting example components
Auto-linting against the AirBnB JavaScript Style Guide and sane Sass standards
All Webpack files are fully configurable
Simple Yeoman generator for Design System component creation

Particle builds design systems in dev mode for local hosting, or production mode for optimized asset generation.

npm install
npm run setup
npm start

Simply wait until the webpack bundle output appears then visit http://0.0.0.0:8080/app-node-pl/pl/ (or http://localhost:8080/app-node-pl/pl/) and start working.

That's it. For much greater detail on the frontend approach using this project, check out the Phase2 Frontend Docs.