Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/aleksip/component-based-theming

Resources for component-based theming with Drupal and Twig
https://github.com/aleksip/component-based-theming
List: component-based-theming
drupal lists pattern-lab resources theming twig
Last synced: 24 days ago
JSON representation
Resources for component-based theming with Drupal and Twig
Host: GitHub
URL: https://github.com/aleksip/component-based-theming
Owner: aleksip
Created: 2018-02-10T12:53:50.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2022-03-22T17:28:04.000Z (over 2 years ago)
Last Synced: 2024-05-21T11:10:08.681Z (6 months ago)
Topics: drupal, lists, pattern-lab, resources, theming, twig
Homepage:
Size: 78.1 KB
Stars: 93
Watchers: 18
Forks: 11
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

ultimate-awesome - component-based-theming - Resources for component-based theming with Drupal and Twig. (Other Lists / PowerShell Lists)
README

        # 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](https://www.drupal.org/project/bear_skin) ([GitHub](https://github.com/zivtech/bear_skin))

- [Bolt](https://boltdesignsystem.com/) ([GitHub](https://github.com/bolt-design-system/bolt))

- [Emulsify](https://www.drupal.org/project/emulsify) ([GitHub](https://github.com/fourkitchens/emulsify)) (Legacy version)

- [Emulsify Drupal](https://github.com/emulsify-ds/emulsify-drupal) (Emulsify Design System)

- [Flexi Pattern Lab](https://www.drupal.org/project/flexi_pattern_lab)

- [Gesso](https://www.drupal.org/project/gesso) ([GitHub](https://github.com/forumone/gesso))

- [Particle](https://github.com/phase2/particle)

- [Radix](https://www.drupal.org/project/radix)

- [Shila theme](https://github.com/aleksip/shila-drupal-theme)

- [Theme Generator](https://github.com/mediacurrent/theme_generator_8)

- [Union](https://github.com/ilrWebServices/union)

- [Wingsuit](https://wingsuit-designsystem.github.io/)

- [Zen](https://www.drupal.org/project/zen)

- [Bootstrap Storybook](https://www.drupal.org/project/bootstrap_storybook)

## Full component-based solutions for Drupal

- [Compony](https://www.compony.io/) ([Theme skeleton](https://gitlab.com/Compony/Compony), [Gulp setup](https://gitlab.com/Compony/compony-theme-gulp), [Components](https://www.compony.io/components))

## Drupal modules

- [Component blocks](https://www.drupal.org/project/component_blocks)

- [Component Libraries](https://www.drupal.org/project/components)

- [Full Reset](https://www.drupal.org/project/full_reset)

- [Layouts from Pattern Lab](https://www.drupal.org/project/layouts_pattern_lab)

- [Multiple Definition Files](https://www.drupal.org/project/multiple_definition_files)

- [Paragraphs](https://www.drupal.org/project/paragraphs)

- [PatternKit](https://www.drupal.org/project/patternkit)

- [Single File Components](https://www.drupal.org/project/sfc)

- [UI Patterns](https://www.drupal.org/project/ui_patterns)

- [UI Patterns From Layouts](https://www.drupal.org/project/ui_patterns_from_layouts)

- [UI Patterns Pattern Lab](https://www.drupal.org/project/ui_patterns_pattern_lab)

- [Unified Twig Extensions](https://github.com/drupal-pattern-lab/unified-twig-extensions)

## Projects using Twig with JavaScript

- [Twig Components](https://github.com/mortenson/twig-components) ([Drupal module](https://www.drupal.org/project/twig_components))

## External tools

### Pattern Lab

- [Main website](https://patternlab.io/)

#### 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](https://github.com/pattern-lab/patternlab-node)

#### Pattern Lab PHP

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

- [Pattern Lab Standard Edition for Twig](https://github.com/pattern-lab/edition-php-twig-standard)

- [Pattern Lab Edition for PHPTemplate](https://github.com/aleksip/edition-php-tpl)

##### Plugins

- [Data Transform Plugin](https://github.com/aleksip/plugin-data-transform)

- [Drupal Definitions Plugin](https://github.com/aleksip/plugin-drupal-definitions)

- [Faker Plugin](https://github.com/pattern-lab/plugin-php-faker)

- [Twig Namespaces Plugin](https://github.com/EvanLovely/plugin-twig-namespaces)

##### Pattern Lab specific Twig extensions

- [add-attributes-twig-extension](https://github.com/drupal-pattern-lab/add-attributes-twig-extension)

- [bem-twig-extension](https://github.com/drupal-pattern-lab/bem-twig-extension)

- [Pattern Twig Extension](https://gitlab.com/gambry/pattern-twig-extension)

### Fractal

- [Main website](https://fractal.build/)

- [GitHub](https://github.com/frctl/fractal)

- [Twig adapter](https://github.com/frctl/twig)

- [Twig adapter with Drupal-specific support](https://github.com/wearewondrous/fractal-twig-drupal-adapter)

### Storybook

- [Main website](https://storybook.js.org/)

- [GitHub](https://github.com/storybookjs/storybook)

- [Storybook for Twig](https://github.com/markhuot/storybook-twig)

## Twig implementations and renderers for JavaScript

- [Twig.js](https://github.com/twigjs/twig.js)

- [Twing](https://github.com/ericmorand/twing)

- [twig-renderer](https://github.com/basaltinc/twig-renderer)

## Blog posts and articles

- [Demystifying components integration with Drupal](https://mariohernandez.io/blog/demystifying-components-integration-with-drupal)

  - by Mario Hernandez, 17 June 2021

- [Pattern Lab and Drupal 9: Prepare your theme for Twig 2](https://www.1xinternet.de/en/blog/patternlab-drupal9)

  - by Adam Juran, 22 July 2020

- [How to integrate your pattern library with Drupal's layout builder using Component Blocks module](https://www.previousnext.com.au/blog/how-integrate-your-pattern-library-drupals-layout-builder-using-component-blocks-module)

  - by Lee Rowlands, 16 July 2020

- [Introducing the New Version of Emulsify: Emulsify Design System](https://www.fourkitchens.com/blog/development/introducing-emulsify-design-system-new-version-emulsify/)

  - by Four Kitchens, 16 April 2020

- [Building a Drupal 8 Theme with Mediacurrent's Theme Generator](https://mariohernandez.io/blog/mediacurrent-theme-generator)

  - by Mario Hernandez, 30 March 2020

- [Building my site with Tome and Single File Components](https://mortenson.coffee/blog/building-my-site-tome-and-single-file-components/)

  - by Samuel Mortenson, 2 February 2020

- [Drupal themes and component libraries](https://www.aleksip.net/drupal-themes-and-component-libraries)

  - by Aleksi Peebles, 17 November 2019

- [Integrating Storybook with Drupal](https://medium.com/@askibinski/integrating-storybook-with-drupal-ddabfc6c2f9d)

  - by Albert Skibinski, 1 November 2019

- [Compony and the climate crisis](https://www.compony.io/blog/compony-and-climate-crisis)

  - by Compony blog / Mathieu Spillebeen, 24 October 2019

- [Decoupling the front-end without APIs and JavaScript](https://www.aleksip.net/decoupling-the-front-end-without-apis-and-javascript)

  - by Aleksi Peebles, 20 October 2019

- [Cross Component Fragility](https://www.compony.io/blog/cross-component-fragility)

  - by Compony blog / Mathieu Spillebeen, 17 October 2019

- [Simplifying Drupal frontend with Single File Components](https://mortenson.coffee/blog/drupal/2019/10/06/simplifying-drupal-frontend-single-file-components.html)

  - by Samuel Mortenson, 6 October 2019

- [Writing View Mode Templates in PatternLab](https://mark.ie/blog/web-development/writing-view-mode-templates-in-patternlab)

  - by Mark Conroy, 13 September 2019

- [Getting started](https://www.compony.io/blog/getting-started)

  - by Compony blog / Mathieu Spillebeen, 12 September 2019

- [Component-based theming with Layout Builder](https://www.aleksip.net/component-based-theming-with-layout-builder)

  - by Aleksi Peebles, 25 August 2019

- [How to update your downloaded components?](https://www.compony.io/blog/how-update-your-downloaded-components)

  - by Compony blog / Mathieu Spillebeen, 26 July 2019

- [How to set up multiple Compony themes in your project](https://www.compony.io/blog/how-set-multiple-compony-themes-your-project)

  - by Compony blog / Mathieu Spillebeen, 19 July 2019

- [A new approach for a new Pattern Lab](https://www.aleksip.net/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](https://www.mediacurrent.com/blog/building-and-integrating-menu-drupal/)

  - by Mario Hernandez, 3 June 2019

- [Using Twig with Storybook and Drupal](https://www.amazeelabs.com/en/journal/using-twig-storybook-and-drupal)

  - by  Jamie Hollern, 6 May 2019

- [Drupal UI Patterns: Component Driven Development in Drupal](https://jigarius.com/blog/drupal-ui-patterns)

  - by Jigar Mehta, 2 May 2019

- [Secure components](https://www.compony.io/blog/secure-components)

  - by Compony blog / Mathieu Spillebeen, 23 April 2019

- [What is Compony?](https://www.compony.io/blog/what-compony)

  - by Compony blog / Mathieu Spillebeen, 19 April 2019

- [Create a Compony-component](https://www.compony.io/blog/create-compony-component)

  - by Compony blog / Mathieu Spillebeen, 18 April 2019

- [Frontend Architecture for Scalable Design Systems](https://medium.com/@salem_ghoweri/frontend-architecture-for-scalable-design-systems-72303bffde4b)

  - by Salem Ghoweri, 15 April 2019

- [Before You Start a Pattern Lab Project with Drupal](https://www.chapterthree.com/blog/pattern-lab)

  - by Zakiya Khabir, 3 April 2019

- [PatternLab: Linking to Patterns](https://mark.ie/blog/web-development/patternlab-linking-to-patterns)

  - by Mark Conroy, 7 March 2019

- [Handling Drupal attributes in components](https://mariohernandez.io/blog/drupal-attributes/)

  - by Mario Hernandez, 10 January 2019

- [Using Drupal’s definition files in component-based theming](https://www.aleksip.net/using-drupals-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](https://medium.com/@philw_/using-join-include-and-attributes-in-yaml-yml-files-with-data-transform-plugin-for-pattern-lab-e4559d158562)

  - by Phil Wolstenholme, 19 November 2018

- [Drupal’s Layout Initiative and component-based theming](https://www.aleksip.net/drupals-layout-initiative-and-component-based-theming)

  - by Aleksi Peebles, 17 November 2018

- [Decoupling Pattern Lab from your theme a City of San Francisco project](https://www.chapterthree.com/blog/decoupling-pattern-lab-from-your-theme-a-city-of-san-francisco-project)

  - by Israel Morales, 6 November 2018

- [Creating Reusable Dynamic Content Components](http://a-fro.com/blog/creating-reusable-dynamic-content-components)

  - by Aaron Froehlich, 6 November 2018

- [Drupal 8 Pattern Lab for Component-Based Theming](https://anyforsoft.com/blog/drupal-8-pattern-lab-component-based-theming/)

  - by AnyforSoft, 5 November 2018

- [Getting the most out of SVGs with Twig templates](https://mosaicwebsites.com/blog/getting-most-out-svgs-twig-templates)

  - by Igor Lakic, 22 October 2018

- [Can I Stop PatternLab Variants from Inheriting Data from their Parent Component](https://mark.ie/blog/web-development/can-i-stop-patternlab-variants-inheriting-data-their-parent-component)

  - by Mark Conroy, 19 October 2018

- [Responsive images in the Emulsify (PL) theme - The easy way](http://mosaicwebsites.com/blog/responsive-images-emulsify-pl-theme-easy-way)

  - by Igor Lakic, 4 October 2018

- [Creating Paragraphs Entities for Dynamic Content](https://a-fro.com/blog/creating-paragraphs-entities-dynamic-content)

  - by Aaron Froehlich, 26 September 2018

- [Responsive Images with PatternLab and Drupal - the easy way](https://mark.ie/blog/web-development/responsive-images-patternlab-and-drupal-easy-way)

  - by Mark Conroy, 20 September 2018

- [10 lessons we learned from our first Drupal 8 + Pattern Lab via Emulsify project](https://www.reallifedigital.com/blog/10-lessons-we-learned-our-first-drupal-8-pattern-lab-emulsify-project)

  - by Darren Fisher, 13 September 2018

- [Creating a Card Component in PatternLab and Mapping to Drupal the "right" way](https://mark.ie/blog/web-development/creating-card-component-patternlab-and-mapping-drupal-right-way)

  - by Mark Conroy, 8 September 2018

- [How to make theme images work in Pattern Lab and Drupal](https://www.fourkitchens.com/blog/development/make-theme-images-work-pattern-lab-drupal/)

  - by Brian Lewis, 11 July 2018

- [My Approach to PatternLab?](https://mark.ie/blog/web-development/my-approach-patternlab)

  - by Mark Conroy, 18 May 2018

- [Adding {{ attributes }} to a Drupal PatternLab Theme](https://mark.ie/blog/web-development/adding-attributes-drupal-patternlab-theme)

  - by Mark Conroy, 16 April 2018

- [Introducing Twig Components](https://mortenson.coffee/blog/drupal/2018/04/09/introducing-twig-components.html)

  - by Samuel Mortenson, 9 April 2018

- [Achieving Clarity in Component-based Best Practices](http://nerdstein.net/blog/achieving-clarity-component-based-best-practices)

  - by Adam Bergstein, 2 April 2018

- [Componentizing Drupal Front End using Pattern Lab](https://valuebound.com/resources/blog/componentizing-drupal-front-end-using-pattern-lab)

  - by Safallia Joseph, 9 March 2018

- [Accommodating Drupal In Your Components](https://www.mediacurrent.com/blog/accommodating-drupal-your-components)

  - by Eric Huffman, 15 February 2018

- [Using Pattern Lab in Drupal 7 theme development](https://www.aleksip.net/using-pattern-lab-in-drupal-7-theme-development)

  - by Aleksi Peebles, 5 February 2018

- [Front end journey into Drupal + Pattern Lab](https://hackernoon.com/front-end-journey-into-drupal-pattern-lab-4db02e617fb4)

  - by Mikhail Romanov, 12 January 2018

- [Integrating a Drupal Text with Image Paragraph Bundle with Patternlab](https://mark.ie/blog/web-development/integrating-drupal-text-image-paragraph-bundle-patternlab)

  - by Mark Conroy, 30 December 2017

- [Field Notes: UI Patterns Module](http://www.hook42.com/blog/field-notes-ui-patterns-module)

  - by Ryan Bateman, 27 December 2017

- [A first taste of Drupal theming using Pattern Lab](https://weknowinc.com/blog/drupal-theming-using-pattern-lab)

  - by Omar Aguirre, 26 December 2017

- [Integrating a Simple Drupal Text Paragraph Bundle with Patternlab](https://mark.ie/blog/web-development/integrating-simple-drupal-text-paragraph-bundle-patternlab)

  - by Mark Conroy, 21 December 2017

- [Emulsify 2: Building a Full Site Header in Drupal](https://www.fourkitchens.com/blog/development/emulsify-2-building-full-site-header-drupal/)

  - by Evan Willhite, 20 December 2017

- [Exploring simplicity in Drupal design components](http://nerdstein.net/blog/exploring-simplicity-drupal-design-components)

  - by Adam Bergstein, 2 October 2017

- [Performance improvements with Drupal 8 Libraries](https://www.previousnext.com.au/blog/performance-improvements-drupal-8-libraries)

  - by Rikki Bochow, 7 August 2017

- [Component Based Theming at DrupalCon Baltimore](https://www.hs2solutions.com/blog/component-based-theming-drupalcon-baltimore)

  - by Brian Perry, 9 May 2017

- [Component Driven Development with Emulsify](https://www.youtube.com/watch?v=mokJpc7J1rM)

  - by Brian Lewis and Evan Willhite, 15 March 2017

- [Using UI Patterns module in a component-based Drupal 8 theme](https://www.aleksip.net/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](http://nuvole.org/blog/2017/jan/23/ui-patterns-module-re-use-ui-components-everywhere-in-drupal-8)

  - by Antonio De Marco, 23 January 2017

- [Drupal 8 Front-End Architecture](http://jordanpagewhite.github.io/drupal-8-front-end-architecture/)

  - by Jordan White, 9 January 2017

- Integrating Components with Drupal 8 ([Part 1](https://www.mediacurrent.com/blog/integrating-components-drupal-8-part-1), [Part 2](https://www.mediacurrent.com/blog/integrating-components-drupal-8-part-2), [Part 3](https://www.mediacurrent.com/blog/integrating-components-drupal-8-part-3))

  - by Mario Hernandez, 11-21 November 2016

- [Anatomy of a (terrific) Drupal 8 theme](https://www.zivtech.com/blog/anatomy-terrific-drupal-8-theme)

  - by Alban Bailly, 7 November 2016

- [Why should we base Drupal's theme system around components?](https://www.marcdrummond.com/posts/2016/09/26/why-base-drupal-theme-system-around-components)

  - by Marc Drummond, 26 September 2016

- [Component-Based Theming in Drupal 8: The Video Series](https://www.fourkitchens.com/blog/article/component-based-theming-drupal-8-video-series)

  - by Evan Willhite, 21 September 2016

- [Component-Based Theming in Drupal 8](http://www.mediacurrent.com/blog/component-based-theming-drupal-8)

  - by Chris Doherty, 1 August 2016

- [Introducing Pattern Lab Starter 8](https://www.phase2technology.com/blog/introducing-pattern-lab-starter-8/)

  - by Evan Lovely, 6 June 2016

- [A New Design System Architecture](https://micahgodbolt.com/blog/a-new-design-system-architecture/)

  - by Micah Godbolt, 6 June 2016

- [Pattern Lab and Drupal 8 theme integration update](https://www.aleksip.net/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](https://www.marcdrummond.com/posts/2016/03/25/drupal-front-end-future)

  - by Marc Drummond, 25 March 2016

- [Pattern Lab: Taking Our Workflow from a Linear to Parallel Process](https://www.phase2technology.com/blog/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](https://www.aleksip.net/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](https://www.aleksip.net/atomic-design-pattern-lab-and-drupal-8-theme-development)

  - by Aleksi Peebles, 29 January 2016

- [Style-Guide-Driven Development: the new web development](https://www.previousnext.com.au/blog/style-guide-driven-development-new-web-development)

  - by John Albin, 26 November 2014

## Presentations and videos

- Florida DrupalCamp 2022

  - [Component theme development with Storybook and Emulsify](https://www.fldrupal.camp/session/component-theme-development-storybook-and-emulsify)

    - by Mark Casias

- BADCamp 2020

  - [After 5 years, my dream Drupal component workflow is finally here](https://2020.badcamp.org/session/after-5-years-my-dream-drupal-component-workflow-finally-here)

    - by Brian Perry

- Drupal GovCon 2020

  - [Component-Driven Theming with Storybook](https://www.drupalgovcon.org/2020/program/sessions/component-driven-theming-storybook)

    - by Aaron Couch, Evan Willhite and Brian Lewis

- SF Drupal Users Group, 10 September 2020

  - [Best practices for Integrating components with Drupal](https://www.youtube.com/watch?v=PMST_gl4C4A)

    - by Mario Hernandez

- [Drupal Single File Components](https://www.youtube.com/watch?v=6ca2o4esi4I)

  - by Samuel Mortenson, 24 July 2020

- CMS Philly 2020

  - [Using a single Frontend Design System for WordPress and Drupal with Emulsify](https://cmsphilly.org/talks/using-single-frontend-design-system-wordpress-and-drupal-emulsify)

    - by Dean Oest

  - [Wait, We Can Re-use this? Design Systems and Component Libraries for Fun and Profit](https://cmsphilly.org/talks/wait-we-can-re-use-design-systems-and-component-libraries-fun-and-profit)

    - by Aaron Couch

- Florida DrupalCamp 2020

  - [An overview of front-end component integration methods in Drupal 8](https://www.fldrupal.camp/sessions/design-theming-front-end-development/overview-front-end-component-integration-methods) ([Slides](https://noti.st/brianperry/qKHUXG/an-overview-of-drupal-8-front-end-component-integration-methods), [YouTube](https://www.youtube.com/watch?v=mQpOIx9ZOpw))

    - by Brian Perry

- DrupalCamp Atlanta 2019

  - [The future of Drupal theming](https://www.drupalcampatlanta.com/2019/sessions/future-drupal-theming) ([Slides](https://slides.com/mathieuspillebeen/deck-6-7-11#/))

    - by Mathieu Spillebeen

- Drupal GovCon 2019

  - [Integrating Pattern Lab with Drupal 8](https://www.drupalgovcon.org/2019/program/sessions/integrating-pattern-lab-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](https://www.drupalasheville.com/2019/session/drag-n-dropmix-n-match-patternkit-layout-builder-next-gen-drupal-page-building) ([YouTube](https://www.youtube.com/watch?v=8Ms4KIV4GP4))

    - by Derek Reese

- Drupal North 2019

  - [Drupal UI Patterns: Component Driven Development in Drupal](https://drupalnorth.org/en/session/drupal-ui-patterns-component-driven-development-drupal) ([YouTube](https://www.youtube.com/watch?v=eeoSZ4ZblQE))

    - by Jigar Mehta

- Drupaldelphia 2019

  - [Twig in Fractal in Drupal: Decoupling UI Components from Drupal Data Structures](https://www.drupaldelphia.org/session/twig-fractal-drupal-decoupling-ui-components-drupal-data-structures) ([YouTube](https://www.youtube.com/watch?v=Bvfymb0HkHg))

    - by Chris Arasin

- Budapest Drupal User Group Meetup April 2019

  - [How we build component-based Drupal themes](https://noti.st/thamas/u1vB20/how-we-build-component-based-drupal-themes)

    - by Tamás Hajas and Gábor Tompa

- DrupalCon Seattle 2019

  - [Frontend Architecture for Scalable Design Systems](https://events.drupal.org/seattle2019/sessions/design-system-architecture-pattern-lab-twig-and-web-components)

    - by Salem Ghoweri

  - [Pattern Lab: The Definitive How-to](https://events.drupal.org/seattle2019/sessions/pattern-lab-definitive-how)

    - by Evan Lovely

  - [An External Design System in Practice](https://events.drupal.org/seattle2019/sessions/external-design-system-practice)

    - by Brian Perry

- MidCamp 2019

  - [An External Design System in Practice](https://www.midcamp.org/2019/topic-proposal/external-design-system-practice)

    - By Brian Perry

- DrupalCampNJ 2019

  - [Getting Atomic with Pattern Lab](https://www.drupalcampnj.org/sessions/getting-atomic-pattern-lab)

    - by Aaron Froehlich

- BADCamp 2018

  - [Demystifying Pattern Libraries and Drupal 8](https://2018.badcamp.org/session/demystifying-pattern-libraries-and-drupal-8)

    - by Zakiya Khabir

- Drupal Developer Days Lisbon 2018

  - [Component-based Theming with Pattern Lab and Twig](https://lisbon2018.drupaldays.org/sessions/component-based-theming-pattern-lab-and-twig) ([Slides](http://Bit.ly/pl-twig-ddd-lisbon))

    - by Adam Juran

- Design 4 Drupal 2018

  - [Next Gen Design Systems with Pattern Lab, Twig, and Web Components](http://design4drupal.org/sessions/theming/next-gen-design-systems-pattern-lab-twig-and-web-components) ([YouTube](https://www.youtube.com/watch?v=NhjEbuuKn1Y))

    - by Salem Ghoweri

- Texas Camp 2018

  - [Component Based Theming With UI Patterns](https://2018.texascamp.org/sessions/component-based-theming-with-ui-patterns) ([Slides](https://www.dropbox.com/s/b6yjxh5cwgbfctq/component_theming_ui_patterns.pdf))

    - by Brian Perry

- Drupaldelphia 2018

  - [Can we figure this Drupal Component thing out already?](https://drupaldelphia.org/session/can-we-figure-drupal-component-thing-out-already) ([YouTube](https://www.youtube.com/watch?v=-XMnGvvPVeg))

    - by Adam Bergstein

- MidCamp 2018

  - [Component-based Drupal](https://www.midcamp.org/topic/component-based-drupal)

    - by Adam Bergstein and Brian Perry

- Florida DrupalCamp 2018

  - [Implementing an Enterprise Design System the Red Hat Way](https://www.fldrupal.camp/sessions/design-theming-front-end-development/implementing-enterprise-design-system-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](https://pnwdrupalsummit.org/2018/sessions/webpack-es6-pattern-lab-and-drupal-8-hands-design-system-first-development)

    - by Christopher Bloom

  - [Component-Based Design: Step aside Drupal, we’ve got this (er, maybe not?)](https://pnwdrupalsummit.org/2018/sessions/component-based-design-step-aside-drupal-we%E2%80%99ve-got-er-maybe-not)

    - by Eric Huffman

- New England DrupalCamp 2017:

  - [Component Based Theming With UI Patterns](https://nedcamp.org/new-england-drupal-camp/sessions/component-based-theming-ui-patterns) ([YouTube](https://www.youtube.com/watch?v=-0m-u_Bmzxg))

    - by Brian Perry

- DrupalCon Vienna 2017:

  - [Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8](https://www.youtube.com/watch?v=6BdyXYkY3Wg)

    - by Antonio De Marco

  - [Decouple your Twig from PHP and make Frontenders happy!](https://events.drupal.org/vienna2017/sessions/decouple-your-twig-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!](https://events.drupal.org/baltimore2017/sessions/atomic-design-drupal-8-isolating-your-frontend-workflow-pattern-lab)

    - by Anthony Simone

  - [Pinterest’s Component Based Design: Breaking down silos, saving time, and empowering content editors](https://events.drupal.org/baltimore2017/sessions/pinterest%E2%80%99s-component-based-design-breaking-down-silos-saving-time-and)

    - by Evan Lovely and Grant Gaudet

- MidCamp 2017:

  - [Component Based Theming in the Real World](https://www.midcamp.org/session/component-based-theming-real-world)

    - by Brian Perry

- Drupal Developer Days Seville 2017:

  - [Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8](http://nuvole.org/blog/2017/mar/30/our-presentations-drupal-dev-days-seville)

    - by Antonio De Marco

- Drupal Mountain Camp 2017:

  - [Drupal 8 Component Based Theming](http://slides.com/lauriii/dmc-2017-component-based-theming)

    - by Lauri Eskola

- DrupalCamp Florida 2017:

  - [Component Libraries in Drupal Contrib, Core, and Beyond](https://www.fldrupal.camp/sessions/approved/florida-drupalcamp-2017/design-theming-front-end-development/component-libraries)

    - by Derek Reese

- DrupalCamp Munich 2016:

  - [Component-driven theming workflow with Pattern Lab and Drupal 8](http://dcmuc16.drupalcamp.de/sessions/component-driven-theming-workflow-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](https://docs.google.com/presentation/d/1Me6YOXpj0DagjoXjTQYLy7Knc8tidmpIVL9-JzJThEo/edit#slide=id.g17a10fc84f_1_12)

    - by Wolfgang Ziegler

- DrupalCamp LA 2016:

  - [Component-driven Drupal theming](https://www.mediacurrent.com/multimedia/video/drupalcamp-la-2016-component-driven-drupal-theming)

    - by Mario Hernandez

- DrupalCamp Asheville 2016

  - [Building Drupal Sites with Components](https://www.drupalasheville.com/2016/session/building-drupal-sites-components) ([Slides](https://www.slideshare.net/DerekReese1/building-drupal-sites-with-components), [YouTube](https://www.youtube.com/watch?v=SJVGNpOovJw))

    - by Derek Reese

- Devsigner 2016:

  - [Integrating Pattern Lab with a CMS Build](http://www.evanlovely.com/notes/pattern-lab/integrating-pattern-lab-into-drupal-workshop.pdf)

    - by Evan Lovely

- DrupalCon New Orleans 2016:

  - [The Big Easy: Streamlined Front-end Development with Pattern Lab and Twig](https://events.drupal.org/neworleans2016/sessions/big-easy-front-end-development-pattern-lab-and-twig)

    - by Adam Juran and Chaz Chumley

- DrupalCon Los Angeles 2015:

  - [The New Design Workflow](https://www.youtube.com/watch?v=PdfxJO81cdA)

    - by Joey Groh, Evan Lovely and Micah Godbolt

## Related Drupal.org issues

- [Decouple and componentize our Twig implementation](https://www.drupal.org/project/drupal/issues/3096483)

- [Add Components Module to Drupal Core](https://www.drupal.org/project/ideas/issues/2875935)

- [Theme system improvements roadmap](https://www.drupal.org/node/2821399)

- [Allow a component library to define asset libraries](https://www.drupal.org/node/2707849)

- [Unify & simplify render & theme system: component-based rendering (enables pattern library, style guides, interface previews, client-side re-rendering)](https://www.drupal.org/node/2702061)

- [Move Attribute classes under Drupal\\Component](https://www.drupal.org/node/2664570)

## Other resources

- [Drupal Pattern Lab working group](https://drupal-pattern-lab.github.io/)

- [Drupaltwig Slack channel](https://drupaltwig-slack.herokuapp.com/)

- [Gitter Pattern Lab chat rooms](https://gitter.im/pattern-lab)

- [Pattern Lab 101](https://patternlab-101.readthedocs.io/en/latest/)

## Component-based theming with Drupal explained for clients

- [What is pattern lab and why should I care about it?](https://www.reallifedigital.com/blog/what-pattern-lab-and-why-should-i-care-about-it)

  - by Darren Fisher, 13 September 2018