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

• Bear Skin (GitHub)
• Bolt (GitHub)
• Emulsify (GitHub) (Legacy version)
• Emulsify Drupal (Emulsify Design System)
• Flexi Pattern Lab
• Gesso (GitHub)
• Particle
• Radix
• Shila theme
• Theme Generator
• Union
• Wingsuit
• Zen
• Bootstrap Storybook

Full component-based solutions for Drupal

• Compony (Theme skeleton, Gulp setup, Components)

Drupal modules

• Component blocks
• Component Libraries
• Full Reset
• Layouts from Pattern Lab
• Multiple Definition Files
• Paragraphs
• PatternKit
• Single File Components
• UI Patterns
• UI Patterns From Layouts
• UI Patterns Pattern Lab
• Unified Twig Extensions

Projects using Twig with 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.

• Pattern Lab Standard Edition for Twig
• Pattern Lab Edition for PHPTemplate

Plugins

• Data Transform Plugin
• Drupal Definitions Plugin
• Faker Plugin
• Twig Namespaces Plugin

Pattern Lab specific Twig extensions

• add-attributes-twig-extension
• bem-twig-extension
• Pattern Twig Extension

Fractal

• Main website
• GitHub
• Twig adapter
• Twig adapter with Drupal-specific support

Storybook

• Main website
• GitHub
• Storybook for Twig

Twig implementations and renderers for JavaScript

• Twig.js
• Twing
• twig-renderer

Blog posts and articles

• Demystifying components integration with Drupal
  • by Mario Hernandez, 17 June 2021
• Pattern Lab and Drupal 9: Prepare your theme for Twig 2
  • by Adam Juran, 22 July 2020
• How to integrate your pattern library with Drupal's layout builder using Component Blocks module
  • by Lee Rowlands, 16 July 2020
• Introducing the New Version of Emulsify: Emulsify Design System
  • by Four Kitchens, 16 April 2020
• Building a Drupal 8 Theme with Mediacurrent's Theme Generator
  • by Mario Hernandez, 30 March 2020
• Building my site with Tome and Single File Components
  • by Samuel Mortenson, 2 February 2020
• 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
• Drupal 8 Pattern Lab for Component-Based Theming
  • by AnyforSoft, 5 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 and videos

• Florida DrupalCamp 2022
  • Component theme development with Storybook and Emulsify
    • by Mark Casias
• BADCamp 2020
  • After 5 years, my dream Drupal component workflow is finally here
    • by Brian Perry
• Drupal GovCon 2020
  • Component-Driven Theming with Storybook
    • by Aaron Couch, Evan Willhite and Brian Lewis
• SF Drupal Users Group, 10 September 2020
  • Best practices for Integrating components with Drupal
    • by Mario Hernandez
• Drupal Single File Components
  • by Samuel Mortenson, 24 July 2020
• CMS Philly 2020
  • Using a single Frontend Design System for WordPress and Drupal with Emulsify
    • by Dean Oest
  • Wait, We Can Re-use this? Design Systems and Component Libraries for Fun and Profit
    • by Aaron Couch
• Florida DrupalCamp 2020
  • An overview of front-end component integration methods in Drupal 8 (Slides, YouTube)
    • by Brian Perry
• 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

• Decouple and componentize our Twig implementation
• Add Components Module to Drupal Core
• Theme system improvements roadmap
• Allow a component library to define asset libraries
• Unify & simplify render & theme system: component-based rendering (enables pattern library, style guides, interface previews, client-side re-rendering)
• Move Attribute classes under Drupal\Component

Other resources

• Drupal Pattern Lab working group
• Drupaltwig Slack channel
• Gitter Pattern Lab chat rooms
• Pattern Lab 101

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