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
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.
-
Simply run:
npm create @phase2/particle particle
-
Then
cd particle/
and run:npm start
- Download the latest release
- Extract anywhere (i.e. this readme should be at
any/where/particle/README.md
) - Within the extracted folder run:
npm install
npm run setup
npm start
Simply wait until the webpack bundle output appears then visit http:https://0.0.0.0:8080/app-pl/pl/ (or http:https://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.