ensk/component-based-theming

Resources for component-based theming with Drupal and Twig

Resources for component-based theming with Drupal and Twig

You are welcome to submit a pull request if you know of a good resource not on this list.

Drupal themes and design systems with Drupal integration

Full component-based solutions for Drupal

Compony (Theme skeleton, Gulp setup, Components)

Drupal modules

Twig in JavaScript

Twig Components (Drupal module)

External tools

Pattern Lab

Main website

Pattern Lab Node

Pattern Lab Node has two Twig engines, a PHP based one and a JavaScript based one. The Twig edition uses the PHP engine.

Pattern Lab Node

Pattern Lab PHP

Please note that Pattern Lab PHP is no longer in active development.

Plugins

Pattern Lab specific Twig extensions

Fractal

Storybook

Twig implementations and renderers for JavaScript

Blog posts, articles, webinars

Drupal themes and component libraries
- by Aleksi Peebles, 17 November 2019
Integrating Storybook with Drupal
- by Albert Skibinski, 1 November 2019
Compony and the climate crisis
- by Compony blog / Mathieu Spillebeen, 24 October 2019
Decoupling the front-end without APIs and JavaScript
- by Aleksi Peebles, 20 October 2019
Cross Component Fragility
- by Compony blog / Mathieu Spillebeen, 17 October 2019
Simplifying Drupal frontend with Single File Components
- by Samuel Mortenson, 6 October 2019
Writing View Mode Templates in PatternLab
- by Mark Conroy, 13 September 2019
Getting started
- by Compony blog / Mathieu Spillebeen, 12 September 2019
Component-based theming with Layout Builder
- by Aleksi Peebles, 25 August 2019
How to update your downloaded components?
- by Compony blog / Mathieu Spillebeen, 26 July 2019
How to set up multiple Compony themes in your project
- by Compony blog / Mathieu Spillebeen, 19 July 2019
A new approach for a new Pattern Lab
- by Aleksi Peebles, 12 July 2019
Can I See the Menu, Please? Building and Integrating a Menu in Drupal
- by Mario Hernandez, 3 June 2019
Using Twig with Storybook and Drupal
- by Jamie Hollern, 6 May 2019
Drupal UI Patterns: Component Driven Development in Drupal
- by Jigar Mehta, 2 May 2019
Secure components
- by Compony blog / Mathieu Spillebeen, 23 April 2019
What is Compony?
- by Compony blog / Mathieu Spillebeen, 19 April 2019
Create a Compony-component
- by Compony blog / Mathieu Spillebeen, 18 April 2019
Frontend Architecture for Scalable Design Systems
- by Salem Ghoweri, 15 April 2019
Before You Start a Pattern Lab Project with Drupal
- by Zakiya Khabir, 3 April 2019
PatternLab: Linking to Patterns
- by Mark Conroy, 7 March 2019
Handling Drupal attributes in components
- by Mario Hernandez, 10 January 2019
Using Drupal’s definition files in component-based theming
- by Aleksi Peebles, 21 November 2018
Using join, include, and attributes in YAML (.yml) files with Data Transform Plugin for Pattern Lab
- by Phil Wolstenholme, 19 November 2018
Drupal’s Layout Initiative and component-based theming
- by Aleksi Peebles, 17 November 2018
Decoupling Pattern Lab from your theme a City of San Francisco project
- by Israel Morales, 6 November 2018
Creating Reusable Dynamic Content Components
- by Aaron Froehlich, 6 November 2018
Getting the most out of SVGs with Twig templates
- by Igor Lakic, 22 October 2018
Can I Stop PatternLab Variants from Inheriting Data from their Parent Component
- by Mark Conroy, 19 October 2018
Responsive images in the Emulsify (PL) theme - The easy way
- by Igor Lakic, 4 October 2018
Creating Paragraphs Entities for Dynamic Content
- by Aaron Froehlich, 26 September 2018
Responsive Images with PatternLab and Drupal - the easy way
- by Mark Conroy, 20 September 2018
10 lessons we learned from our first Drupal 8 + Pattern Lab via Emulsify project
- by Darren Fisher, 13 September 2018
Creating a Card Component in PatternLab and Mapping to Drupal the "right" way
- by Mark Conroy, 8 September 2018
How to make theme images work in Pattern Lab and Drupal
- by Brian Lewis, 11 July 2018
My Approach to PatternLab?
- by Mark Conroy, 18 May 2018
Adding {{ attributes }} to a Drupal PatternLab Theme
- by Mark Conroy, 16 April 2018
Introducing Twig Components
- by Samuel Mortenson, 9 April 2018
Achieving Clarity in Component-based Best Practices
- by Adam Bergstein, 2 April 2018
Componentizing Drupal Front End using Pattern Lab
- by Safallia Joseph, 9 March 2018
Accommodating Drupal In Your Components
- by Eric Huffman, 15 February 2018
Using Pattern Lab in Drupal 7 theme development
- by Aleksi Peebles, 5 February 2018
Front end journey into Drupal + Pattern Lab
- by Mikhail Romanov, 12 January 2018
Integrating a Drupal Text with Image Paragraph Bundle with Patternlab
- by Mark Conroy, 30 December 2017
Field Notes: UI Patterns Module
- by Ryan Bateman, 27 December 2017
A first taste of Drupal theming using Pattern Lab
- by Omar Aguirre, 26 December 2017
Integrating a Simple Drupal Text Paragraph Bundle with Patternlab
- by Mark Conroy, 21 December 2017
Emulsify 2: Building a Full Site Header in Drupal
- by Evan Willhite, 20 December 2017
Exploring simplicity in Drupal design components
- by Adam Bergstein, 2 October 2017
Performance improvements with Drupal 8 Libraries
- by Rikki Bochow, 7 August 2017
Component Based Theming at DrupalCon Baltimore
- by Brian Perry, 9 May 2017
Component Driven Development with Emulsify
- by Brian Lewis and Evan Willhite, 15 March 2017
Using UI Patterns module in a component-based Drupal 8 theme
- by Aleksi Peebles, 29 January 2017
Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
- by Antonio De Marco, 23 January 2017
Drupal 8 Front-End Architecture
- by Jordan White, 9 January 2017
Integrating Components with Drupal 8 (Part 1, Part 2, Part 3)
- by Mario Hernandez, 11-21 November 2016
Anatomy of a (terrific) Drupal 8 theme
- by Alban Bailly, 7 November 2016
Why should we base Drupal's theme system around components?
- by Marc Drummond, 26 September 2016
Component-Based Theming in Drupal 8: The Video Series
- by Evan Willhite, 21 September 2016
Component-Based Theming in Drupal 8
- by Chris Doherty, 1 August 2016
Introducing Pattern Lab Starter 8
- by Evan Lovely, 6 June 2016
A New Design System Architecture
- by Micah Godbolt, 6 June 2016
Pattern Lab and Drupal 8 theme integration update
- by Aleksi Peebles, 9 May 2016
Drupal’s front-end future: Component-based theming, OO rendering and targeted JS libraries
- by Marc Drummond, 25 March 2016
Pattern Lab: Taking Our Workflow from a Linear to Parallel Process
- by Evan Lovely, 1 March 2016
Making Pattern Lab work with Drupal 8 Twig theme templates
- by Aleksi Peebles, 29 January 2016
Atomic design, Pattern Lab and Drupal 8 theme development
- by Aleksi Peebles, 29 January 2016
Style-Guide-Driven Development: the new web development
- by John Albin, 26 November 2014

Presentations

DrupalCamp Atlanta 2019
- The future of Drupal theming (Slides)
  - by Mathieu Spillebeen
Drupal GovCon 2019
- Integrating Pattern Lab with Drupal 8
  - by Roshana Devkota and Kevin McCloskey
Drupal Camp Asheville 2019
- Drag n' Drop/Mix n' Match: Patternkit + Layout Builder - The Next Gen of Drupal Page Building (YouTube)
  - by Derek Reese
Drupal North 2019
- Drupal UI Patterns: Component Driven Development in Drupal (YouTube)
  - by Jigar Mehta
Drupaldelphia 2019
- Twig in Fractal in Drupal: Decoupling UI Components from Drupal Data Structures (YouTube)
  - by Chris Arasin
Budapest Drupal User Group Meetup April 2019
- How we build component-based Drupal themes
  - by Tamás Hajas and Gábor Tompa
DrupalCon Seattle 2019
- Frontend Architecture for Scalable Design Systems
  - by Salem Ghoweri
- Pattern Lab: The Definitive How-to
  - by Evan Lovely
- An External Design System in Practice
  - by Brian Perry
MidCamp 2019
- An External Design System in Practice
  - By Brian Perry
DrupalCampNJ 2019
- Getting Atomic with Pattern Lab
  - by Aaron Froehlich
BADCamp 2018
- Demystifying Pattern Libraries and Drupal 8
  - by Zakiya Khabir
Drupal Developer Days Lisbon 2018
- Component-based Theming with Pattern Lab and Twig (Slides)
  - by Adam Juran
Design 4 Drupal 2018
- Next Gen Design Systems with Pattern Lab, Twig, and Web Components (YouTube)
  - by Salem Ghoweri
Texas Camp 2018
- Component Based Theming With UI Patterns (Slides)
  - by Brian Perry
Drupaldelphia 2018
- Can we figure this Drupal Component thing out already? (YouTube)
  - by Adam Bergstein
MidCamp 2018
- Component-based Drupal
  - by Adam Bergstein and Brian Perry
Florida DrupalCamp 2018
- Implementing an Enterprise Design System the Red Hat Way
  - by Derek Reese
Pacific Northwest Drupal Summit 2018
- Webpack, ES6, Pattern Lab, and Drupal 8: Hands-on with Design-System-First Development
  - by Christopher Bloom
- Component-Based Design: Step aside Drupal, we’ve got this (er, maybe not?)
  - by Eric Huffman
New England DrupalCamp 2017:
- Component Based Theming With UI Patterns (YouTube)
  - by Brian Perry
DrupalCon Vienna 2017:
- Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
  - by Antonio De Marco
- Decouple your Twig from PHP and make Frontenders happy!
  - by Anton Staroverov and Tassilo Gröper
DrupalCon Baltimore 2017:
- Atomic Design in Drupal 8: Isolating frontend workflow with Pattern Lab!
  - by Anthony Simone
- Pinterest’s Component Based Design: Breaking down silos, saving time, and empowering content editors
  - by Evan Lovely and Grant Gaudet
MidCamp 2017:
- Component Based Theming in the Real World
  - by Brian Perry
Drupal Developer Days Seville 2017:
- Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8
  - by Antonio De Marco
Drupal Mountain Camp 2017:
- Drupal 8 Component Based Theming
  - by Lauri Eskola
DrupalCamp Florida 2017:
- Component Libraries in Drupal Contrib, Core, and Beyond
  - by Derek Reese
DrupalCamp Munich 2016:
- Component-driven theming workflow with Pattern Lab and Drupal 8
  - by Tom Keitel and Steffen Rühlmann
Drupal-Austria Vienna Meetup October 2016:
- Streamlined Front-End development with Pattern Lab & Twig
  - by Wolfgang Ziegler
DrupalCamp LA 2016:
- Component-driven Drupal theming
  - by Mario Hernandez
DrupalCamp Asheville 2016
- Building Drupal Sites with Components (Slides, YouTube)
  - by Derek Reese
Devsigner 2016:
- Integrating Pattern Lab with a CMS Build
  - by Evan Lovely
DrupalCon New Orleans 2016:
- The Big Easy: Streamlined Front-end Development with Pattern Lab and Twig
  - by Adam Juran and Chaz Chumley
DrupalCon Los Angeles 2015:
- The New Design Workflow
  - by Joey Groh, Evan Lovely and Micah Godbolt

Related Drupal.org issues

Other resources

Component-based theming with Drupal explained for clients

What is pattern lab and why should I care about it?
- by Darren Fisher, 13 September 2018