Getting Atomic with Pattern Lab
summary
Shows how to turn Drupal 8’s Umami demo into a working Pattern Lab-driven workflow, wiring Twig templates to static components so markup lives in the pattern library and Drupal templates act as presenters. Uses Pattern Lab + Twig, Emulsify theme and Twig Tweak to map fields, merge view attachments, and render a live ingredient-list molecule; demonstrates running npm pattern-server, piping rendered output back to Drupal, and confirms the pattern-driven pages build and display correctly.
AI-written summary · about
chapters (22)
- 0:00Introduction
- 1:23Who am I
- 2:57My Pattern Lab Experience
- 5:24Where Have You Been in the Industry
- 5:59Cascading Styles
- 7:52The Web
- 8:59Systems
- 10:41Interface Inventory
- 17:01Pattern Lab Demo
- 25:08Pattern Lab in Drupal
- 25:30Template Presenters
- 33:33Live Demo
- 38:58Background Colors
- 40:58Ingredient List
- 43:58Context
- 44:43Transform
- 45:48Merge
- 48:08Additional Resources
- 50:18Web Components
- 51:53Questions
- 55:13Alternate View Mode
- 56:13Using Pattern Lab with Drupal
related talks
50mComponent Based Theming in the Real World
57mComponent-based Drupal
49mLiving Styleguide in your Drupal projects: Benefit from component driven design.
44mFostering Collaboration: Pattern Libraries / Rapid Prototyping
46mIntroduction to the UI Patterns module
43mPatternfly Passes With Flying Colours
38m"Design Patters for Modern JavaScript"
30mIt's About Systems