Particle is an opinionated set of tools and examples to:

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

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

• Node ^8, ^10, ^12
• NPM ^5, ^6
• PHP ^7

Step-by-step instructions to install all dependencies for OSX can be found in this Gist.

• 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
• Auto-linting against the AirBnB JavaScript Style Guide
• 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.

1. Simply run:

   npm create @phase2/particle particle

2. Then cd particle/ and run:

   npm start

1. Download the latest release
2. Extract anywhere (i.e. this readme should be at any/where/particle/README.md)
3. Within the extracted folder run:

npm install
npm run setup
npm start

Simply wait until the webpack bundle output appears then visit http://0.0.0.0:8080/app-pl/pl/ (or http://localhost:8080/app-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.

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 apps with 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.