Particle: A design system integrating to Pattern Lab and a Drupal 8 theme
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
- Drupal theme, Grav theme, and Pattern Lab app
- Strict Atomic Design component structure
- 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
@atoms/thing.twigmeans the same thing to Drupal theme and Pattern Lab.
- Iconfont auto-generation
- 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 create @phase2/particle particle
cd particle/and run:
- Download the latest release
- Extract anywhere (i.e. this readme should be at
- Within the extracted folder run:
npm install npm run setup npm start
That's it. For much greater detail on the frontend approach using this project, check out the Phase2 Frontend Docs.
Design System Naming
The Design System Source folder is named default
./source/default. It's handy
in multi-design setups to name this per design system and post-fix
that design system name. For example,
apps/drupal-default/ contains the
implementation of the
default source directory. These are intended to be
updated by the needs of your project.