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 file,
@atoms/thing.twigmeans the same thing to Drupal theme and Pattern Lab.
- Iconfont auto-generation
- Bootstrap 4 integration, used for all starting example components
- All Webpack and Gulp 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.