What is Particle?

Particle is an opinionated toolkit for building application-agnostic design systems built with love by Phase2.

Particle Logo Astrogoat

Particle is an opinionated set of tools and examples to:

  1. Build an application-agnostic design system of asset files like Twig, Sass, javascript, and images
  2. Apply that design system to a locally-served Pattern Lab for rapid prototyping
  3. Apply that design system to a Drupal or Grav theme

Provides

  • 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 and Gulp files are fully configurable