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

• Bear Skin (GitHub)
• Bolt (GitHub)
• Emulsify (GitHub)
• Gesso (GitHub)
• Particle
• Shila theme
• Zen

Drupal modules

• Component Libraries
• Multiple Definition Files
• Paragraphs
• UI Patterns
• UI Patterns From Layouts
• UI Patterns Pattern Lab
• Unified Twig Extensions

Pattern Lab and plugins

• Pattern Lab Standard Edition for Twig
• Pattern Lab Edition for PHPTemplate
• Data Transform Plugin
• Drupal Definitions Plugin
• Faker Plugin
• Twig Namespaces Plugin

Twig extensions

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

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

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

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