PHPackages phase2/particle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. phase2/particle ActiveDrupal-custom-theme phase2/particle =============== A system of tools to build design systems in Pattern Lab for Drupal. v10.7.4(5y ago)310997113[51 issues](https://github.com/phase2/particle/issues)[29 PRs](https://github.com/phase2/particle/pulls)GPL-2.0Twig Since Oct 9Pushed 6d ago33 watchersCompare [ Source](https://github.com/phase2/particle)[ Packagist](https://packagist.org/packages/phase2/particle)[ Docs](https://github.com/phase2/particle)[ RSS](/packages/phase2-particle/feed)WikiDiscussions main Synced 3d ago READMEChangelog (10)DependenciesVersions (63)Used By (0) Particle: A design system integrating to Pattern Lab and a Drupal 8 theme ========================================================================= [](#particle-a-design-system-integrating-to-pattern-lab-and-a-drupal-8-theme) [![GitHub (pre-)release](https://camo.githubusercontent.com/02509c9713908756ca6e1f6f8e31c9de2f5a184e8511a6eaf9f58146eb40d6ec/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f7068617365322f7061727469636c652f616c6c2e737667)](https://github.com/phase2/particle/releases)[![Build Status](https://camo.githubusercontent.com/7d9ec4c2be40bf0cf0946c81d534508f3aeac98af90f5aa1e6006e1faf35173d/68747470733a2f2f7472617669732d63692e6f72672f7068617365322f7061727469636c652e7376673f6272616e63683d6d61696e)](https://travis-ci.org/phase2/particle)[![Greenkeeper badge](https://camo.githubusercontent.com/d3aaf854c13af479c2b2d13599a4bac394cf841ad011a096fdfda4707aed7e57/68747470733a2f2f6261646765732e677265656e6b65657065722e696f2f7068617365322f7061727469636c652e737667)](https://greenkeeper.io/) [![Particle mascot: Astrogoat](apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/astrogoat.png?raw=true "Astrogoat")](apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/astrogoat.png?raw=true) 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](https://phase2.gitbook.io/frontend/) Prerequisites ------------- [](#prerequisites) - [Node `^8`, `^10`, `^12`](https://nodejs.org) - [NPM `^5`, `^6`](https://www.npmjs.com/) - [PHP `^7`](https://php.net) [Step-by-step instructions to install all dependencies for OSX can be found in this Gist.](https://gist.github.com/illepic/efd6ab9f452af2a99b7ade78257e6b96) Provides -------- [](#provides) - Drupal theme, Grav theme, and Pattern Lab app - Strict [Atomic Design](http://atomicdesign.bradfrost.com/) 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](https://github.com/webpack/webpack-dev-server) for local hosting and hot reloading of assets into Pattern Lab - [Twig namespaced paths](https://symfony.com/doc/current/templating/namespaced_paths.html)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](https://github.com/airbnb/javascript) - All Webpack files are fully configurable - Simple [Yeoman](http://yeoman.io/) generator for Design System component creation Quickstart ---------- [](#quickstart) Particle builds design systems in dev mode for local hosting, or production mode for optimized asset generation. ### Quickstart A [](#quickstart-a) 1. Simply run: ``` npm create @phase2/particle particle ``` 2. Then `cd particle/` and run: ``` npm start ``` ### Quickstart B [](#quickstart-b) 1. [Download the latest release](https://github.com/phase2/particle/releases) 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 (or ) and start working. That's it. For **much** greater detail on the frontend approach using this project, check out the [Phase2 Frontend Docs](https://phase2.gitbook.io/frontend/). Design System Naming -------------------- [](#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 `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. ### Health Score 54 — FairBetter than 97% of packages Maintenance61 Regular maintenance activity Popularity36 Limited adoption so far Community34 Small or concentrated contributor base Maturity76 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~28 days Recently: every ~15 days Total 25 Last Release 2086d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/f760c97f03cdb414012201821a9c71f01ed25562af781159671126a306b03c60?d=identicon)[febbraro](/maintainers/febbraro) ![](https://avatars.githubusercontent.com/u/295127?v=4)[Christopher Bloom](/maintainers/illepic)[@illepic](https://github.com/illepic) --- Top Contributors [![illepic](https://avatars.githubusercontent.com/u/295127?v=4)](https://github.com/illepic "illepic (779 commits)")[![EvanLovely](https://avatars.githubusercontent.com/u/569699?v=4)](https://github.com/EvanLovely "EvanLovely (438 commits)")[![jryanconklin](https://avatars.githubusercontent.com/u/18562422?v=4)](https://github.com/jryanconklin "jryanconklin (311 commits)")[![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4)](https://github.com/renovate[bot] "renovate[bot] (88 commits)")[![tjheffner](https://avatars.githubusercontent.com/u/11279744?v=4)](https://github.com/tjheffner "tjheffner (87 commits)")[![entorenee](https://avatars.githubusercontent.com/u/26767995?v=4)](https://github.com/entorenee "entorenee (62 commits)")[![rloos289](https://avatars.githubusercontent.com/u/19877994?v=4)](https://github.com/rloos289 "rloos289 (45 commits)")[![renovate-bot](https://avatars.githubusercontent.com/u/25180681?v=4)](https://github.com/renovate-bot "renovate-bot (43 commits)")[![greenkeeper[bot]](https://avatars.githubusercontent.com/in/505?v=4)](https://github.com/greenkeeper[bot] "greenkeeper[bot] (13 commits)")[![madhaze](https://avatars.githubusercontent.com/u/457172?v=4)](https://github.com/madhaze "madhaze (11 commits)")[![FrederickEngelhardt](https://avatars.githubusercontent.com/u/31741411?v=4)](https://github.com/FrederickEngelhardt "FrederickEngelhardt (11 commits)")[![jengrace](https://avatars.githubusercontent.com/u/12478079?v=4)](https://github.com/jengrace "jengrace (10 commits)")[![Jwaxo](https://avatars.githubusercontent.com/u/3187624?v=4)](https://github.com/Jwaxo "Jwaxo (10 commits)")[![yaazkal](https://avatars.githubusercontent.com/u/5897701?v=4)](https://github.com/yaazkal "yaazkal (5 commits)")[![mike-potter](https://avatars.githubusercontent.com/u/1200563?v=4)](https://github.com/mike-potter "mike-potter (5 commits)")[![yugiio](https://avatars.githubusercontent.com/u/3942302?v=4)](https://github.com/yugiio "yugiio (3 commits)")[![hugonaili](https://avatars.githubusercontent.com/u/3942302?v=4)](https://github.com/hugonaili "hugonaili (3 commits)")[![jhedstrom](https://avatars.githubusercontent.com/u/76833?v=4)](https://github.com/jhedstrom "jhedstrom (3 commits)")[![joannasaerom](https://avatars.githubusercontent.com/u/22183476?v=4)](https://github.com/joannasaerom "joannasaerom (3 commits)")[![danshumaker](https://avatars.githubusercontent.com/u/358833?v=4)](https://github.com/danshumaker "danshumaker (2 commits)") --- Tags drupal-themegulppattern-labwebpack4 ### Embed Badge ![Health badge](/badges/phase2-particle/health.svg) ``` [![Health](https://phpackages.com/badges/phase2-particle/health.svg)](https://phpackages.com/packages/phase2-particle) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)