sghoweri/component-based-theming

Resources for component-based theming with Drupal

Resources for component-based theming with Drupal

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

Drupal modules

Pattern Lab and plugins

Twig extensions

Blog posts, articles, webinars

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
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

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
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