External Design Systems in Practice
summary
A rebrand migrates three sites toward Drupal 8 but ends with a partial Drupal 8 plus two WordPress sites, so an external design system repository is used as a Composer dependency (PHP Pattern Lab) to share Twig templates and styles. The team uses Composer installer paths, Webpack, CSS Modules, and the Timber plugin in WordPress to render Twig components; this lets the WordPress training site and a new Canadian site match the Drupal look and meet the Nov 5 launch, though documentation, versioning and local‑dev workflow cause friction.
AI-written summary · about
chapters (30)
- 0:00Intro
- 0:46BRIAN PERRY
- 3:08REBRANDING
- 3:44MIGRATION
- 4:29MEANWHLE.
- 5:01PROTOTYPING
- 8:00LETS KEEP THE MUSTARD SEPARATE
- 9:54REQUIRING THE DESIGN SYSTEM
- 12:12INCORPORATING INTO THEME
- 12:58COMPONENT WORKFLOW
- 14:30LUNAMETRICS TRAINING SITE SCOPE
- 15:32WORDPRESS INTEGRATION
- 16:23TIMBER COMPONENT - TRAINING ITEMS
- 17:52DEMAC MEDIA
- 19:09ONBOARDING
- 22:09LINES BETWEEN CMSES BLUR
- 23:29A PROGRESSIVELY DECOUPLED PROJECT
- 24:15DX - MULTIPLE DEVELOPER CONTEXTS
- 25:20TEMPLATING AND STYLES
- 27:10CSS MODULES
- 29:13SCOPED CLASS NAMES
- 29:49GLOBAL CSS
- 30:39INITIAL APPROACH - SEPARATE REPOS
- 32:17NOT WELL RECEIVED BY TEAM
- 33:12REVISED APPROACH - SINGLE REPO
- 34:08LESSONS LEARNED
- 35:23WHAT WE AREN'T DOING YETI
- 38:17THINGS TO CONSDER
- 39:47ONE MUSTARD DOES NOT FIT ALL
- 40:06AT THE END OF THE DAY
related talks
32mAn External Design System in Practice
01h 00mBuild It Better, Stupid: Using Design Systems for Scalability
57mProgressively Decoupled Drupal, for everyone!
27mDesign Systems, Not Pages
01h 10mJust Right: Goldilocks and CMS theme systems
20mDesign Systems for the Rest of Us
40mHow to optimise the workflow between designers and developers using design..
19mDesign Systems at Scale: Maintaining UI Consistency in Dynamic Plugin Architecture