└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Resources for component-based theming with Drupal and Twig 2 | 3 | You are welcome to submit a pull request if you know of a good resource not on this list. 4 | 5 | 6 | ## Drupal themes and design systems with Drupal integration 7 | 8 | - [Bear Skin](https://www.drupal.org/project/bear_skin) ([GitHub](https://github.com/zivtech/bear_skin)) 9 | - [Bolt](https://boltdesignsystem.com/) ([GitHub](https://github.com/bolt-design-system/bolt)) 10 | - [Emulsify](https://www.drupal.org/project/emulsify) ([GitHub](https://github.com/fourkitchens/emulsify)) (Legacy version) 11 | - [Emulsify Drupal](https://github.com/emulsify-ds/emulsify-drupal) (Emulsify Design System) 12 | - [Flexi Pattern Lab](https://www.drupal.org/project/flexi_pattern_lab) 13 | - [Gesso](https://www.drupal.org/project/gesso) ([GitHub](https://github.com/forumone/gesso)) 14 | - [Particle](https://github.com/phase2/particle) 15 | - [Radix](https://www.drupal.org/project/radix) 16 | - [Shila theme](https://github.com/aleksip/shila-drupal-theme) 17 | - [Theme Generator](https://github.com/mediacurrent/theme_generator_8) 18 | - [Union](https://github.com/ilrWebServices/union) 19 | - [Wingsuit](https://wingsuit-designsystem.github.io/) 20 | - [Zen](https://www.drupal.org/project/zen) 21 | - [Bootstrap Storybook](https://www.drupal.org/project/bootstrap_storybook) 22 | 23 | 24 | ## Full component-based solutions for Drupal 25 | 26 | - [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)) 27 | 28 | 29 | ## Drupal modules 30 | 31 | - [Component blocks](https://www.drupal.org/project/component_blocks) 32 | - [Component Libraries](https://www.drupal.org/project/components) 33 | - [Full Reset](https://www.drupal.org/project/full_reset) 34 | - [Layouts from Pattern Lab](https://www.drupal.org/project/layouts_pattern_lab) 35 | - [Multiple Definition Files](https://www.drupal.org/project/multiple_definition_files) 36 | - [Paragraphs](https://www.drupal.org/project/paragraphs) 37 | - [PatternKit](https://www.drupal.org/project/patternkit) 38 | - [Single File Components](https://www.drupal.org/project/sfc) 39 | - [UI Patterns](https://www.drupal.org/project/ui_patterns) 40 | - [UI Patterns From Layouts](https://www.drupal.org/project/ui_patterns_from_layouts) 41 | - [UI Patterns Pattern Lab](https://www.drupal.org/project/ui_patterns_pattern_lab) 42 | - [Unified Twig Extensions](https://github.com/drupal-pattern-lab/unified-twig-extensions) 43 | 44 | 45 | ## Projects using Twig with JavaScript 46 | 47 | - [Twig Components](https://github.com/mortenson/twig-components) ([Drupal module](https://www.drupal.org/project/twig_components)) 48 | 49 | 50 | ## External tools 51 | 52 | ### Pattern Lab 53 | 54 | - [Main website](https://patternlab.io/) 55 | 56 | 57 | #### Pattern Lab Node 58 | 59 | Pattern Lab Node has two Twig engines, a PHP based one and a JavaScript based one. The Twig edition uses the PHP engine. 60 | 61 | - [Pattern Lab Node](https://github.com/pattern-lab/patternlab-node) 62 | 63 | 64 | #### Pattern Lab PHP 65 | 66 | Please note that Pattern Lab PHP is no longer in active development. 67 | 68 | - [Pattern Lab Standard Edition for Twig](https://github.com/pattern-lab/edition-php-twig-standard) 69 | - [Pattern Lab Edition for PHPTemplate](https://github.com/aleksip/edition-php-tpl) 70 | 71 | 72 | ##### Plugins 73 | 74 | - [Data Transform Plugin](https://github.com/aleksip/plugin-data-transform) 75 | - [Drupal Definitions Plugin](https://github.com/aleksip/plugin-drupal-definitions) 76 | - [Faker Plugin](https://github.com/pattern-lab/plugin-php-faker) 77 | - [Twig Namespaces Plugin](https://github.com/EvanLovely/plugin-twig-namespaces) 78 | 79 | 80 | ##### Pattern Lab specific Twig extensions 81 | 82 | - [add-attributes-twig-extension](https://github.com/drupal-pattern-lab/add-attributes-twig-extension) 83 | - [bem-twig-extension](https://github.com/drupal-pattern-lab/bem-twig-extension) 84 | - [Pattern Twig Extension](https://gitlab.com/gambry/pattern-twig-extension) 85 | 86 | 87 | ### Fractal 88 | 89 | - [Main website](https://fractal.build/) 90 | - [GitHub](https://github.com/frctl/fractal) 91 | - [Twig adapter](https://github.com/frctl/twig) 92 | - [Twig adapter with Drupal-specific support](https://github.com/wearewondrous/fractal-twig-drupal-adapter) 93 | 94 | 95 | ### Storybook 96 | 97 | - [Main website](https://storybook.js.org/) 98 | - [GitHub](https://github.com/storybookjs/storybook) 99 | - [Storybook for Twig](https://github.com/markhuot/storybook-twig) 100 | 101 | 102 | ## Twig implementations and renderers for JavaScript 103 | 104 | - [Twig.js](https://github.com/twigjs/twig.js) 105 | - [Twing](https://github.com/ericmorand/twing) 106 | - [twig-renderer](https://github.com/basaltinc/twig-renderer) 107 | 108 | 109 | ## Blog posts and articles 110 | 111 | - [Demystifying components integration with Drupal](https://mariohernandez.io/blog/demystifying-components-integration-with-drupal) 112 | - by Mario Hernandez, 17 June 2021 113 | - [Pattern Lab and Drupal 9: Prepare your theme for Twig 2](https://www.1xinternet.de/en/blog/patternlab-drupal9) 114 | - by Adam Juran, 22 July 2020 115 | - [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) 116 | - by Lee Rowlands, 16 July 2020 117 | - [Introducing the New Version of Emulsify: Emulsify Design System](https://www.fourkitchens.com/blog/development/introducing-emulsify-design-system-new-version-emulsify/) 118 | - by Four Kitchens, 16 April 2020 119 | - [Building a Drupal 8 Theme with Mediacurrent's Theme Generator](https://mariohernandez.io/blog/mediacurrent-theme-generator) 120 | - by Mario Hernandez, 30 March 2020 121 | - [Building my site with Tome and Single File Components](https://mortenson.coffee/blog/building-my-site-tome-and-single-file-components/) 122 | - by Samuel Mortenson, 2 February 2020 123 | - [Drupal themes and component libraries](https://www.aleksip.net/drupal-themes-and-component-libraries) 124 | - by Aleksi Peebles, 17 November 2019 125 | - [Integrating Storybook with Drupal](https://medium.com/@askibinski/integrating-storybook-with-drupal-ddabfc6c2f9d) 126 | - by Albert Skibinski, 1 November 2019 127 | - [Compony and the climate crisis](https://www.compony.io/blog/compony-and-climate-crisis) 128 | - by Compony blog / Mathieu Spillebeen, 24 October 2019 129 | - [Decoupling the front-end without APIs and JavaScript](https://www.aleksip.net/decoupling-the-front-end-without-apis-and-javascript) 130 | - by Aleksi Peebles, 20 October 2019 131 | - [Cross Component Fragility](https://www.compony.io/blog/cross-component-fragility) 132 | - by Compony blog / Mathieu Spillebeen, 17 October 2019 133 | - [Simplifying Drupal frontend with Single File Components](https://mortenson.coffee/blog/drupal/2019/10/06/simplifying-drupal-frontend-single-file-components.html) 134 | - by Samuel Mortenson, 6 October 2019 135 | - [Writing View Mode Templates in PatternLab](https://mark.ie/blog/web-development/writing-view-mode-templates-in-patternlab) 136 | - by Mark Conroy, 13 September 2019 137 | - [Getting started](https://www.compony.io/blog/getting-started) 138 | - by Compony blog / Mathieu Spillebeen, 12 September 2019 139 | - [Component-based theming with Layout Builder](https://www.aleksip.net/component-based-theming-with-layout-builder) 140 | - by Aleksi Peebles, 25 August 2019 141 | - [How to update your downloaded components?](https://www.compony.io/blog/how-update-your-downloaded-components) 142 | - by Compony blog / Mathieu Spillebeen, 26 July 2019 143 | - [How to set up multiple Compony themes in your project](https://www.compony.io/blog/how-set-multiple-compony-themes-your-project) 144 | - by Compony blog / Mathieu Spillebeen, 19 July 2019 145 | - [A new approach for a new Pattern Lab](https://www.aleksip.net/a-new-approach-for-a-new-pattern-lab) 146 | - by Aleksi Peebles, 12 July 2019 147 | - [Can I See the Menu, Please? Building and Integrating a Menu in Drupal](https://www.mediacurrent.com/blog/building-and-integrating-menu-drupal/) 148 | - by Mario Hernandez, 3 June 2019 149 | - [Using Twig with Storybook and Drupal](https://www.amazeelabs.com/en/journal/using-twig-storybook-and-drupal) 150 | - by Jamie Hollern, 6 May 2019 151 | - [Drupal UI Patterns: Component Driven Development in Drupal](https://jigarius.com/blog/drupal-ui-patterns) 152 | - by Jigar Mehta, 2 May 2019 153 | - [Secure components](https://www.compony.io/blog/secure-components) 154 | - by Compony blog / Mathieu Spillebeen, 23 April 2019 155 | - [What is Compony?](https://www.compony.io/blog/what-compony) 156 | - by Compony blog / Mathieu Spillebeen, 19 April 2019 157 | - [Create a Compony-component](https://www.compony.io/blog/create-compony-component) 158 | - by Compony blog / Mathieu Spillebeen, 18 April 2019 159 | - [Frontend Architecture for Scalable Design Systems](https://medium.com/@salem_ghoweri/frontend-architecture-for-scalable-design-systems-72303bffde4b) 160 | - by Salem Ghoweri, 15 April 2019 161 | - [Before You Start a Pattern Lab Project with Drupal](https://www.chapterthree.com/blog/pattern-lab) 162 | - by Zakiya Khabir, 3 April 2019 163 | - [PatternLab: Linking to Patterns](https://mark.ie/blog/web-development/patternlab-linking-to-patterns) 164 | - by Mark Conroy, 7 March 2019 165 | - [Handling Drupal attributes in components](https://mariohernandez.io/blog/drupal-attributes/) 166 | - by Mario Hernandez, 10 January 2019 167 | - [Using Drupal’s definition files in component-based theming](https://www.aleksip.net/using-drupals-definition-files-in-component-based-theming) 168 | - by Aleksi Peebles, 21 November 2018 169 | - [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) 170 | - by Phil Wolstenholme, 19 November 2018 171 | - [Drupal’s Layout Initiative and component-based theming](https://www.aleksip.net/drupals-layout-initiative-and-component-based-theming) 172 | - by Aleksi Peebles, 17 November 2018 173 | - [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) 174 | - by Israel Morales, 6 November 2018 175 | - [Creating Reusable Dynamic Content Components](http://a-fro.com/blog/creating-reusable-dynamic-content-components) 176 | - by Aaron Froehlich, 6 November 2018 177 | - [Drupal 8 Pattern Lab for Component-Based Theming](https://anyforsoft.com/blog/drupal-8-pattern-lab-component-based-theming/) 178 | - by AnyforSoft, 5 November 2018 179 | - [Getting the most out of SVGs with Twig templates](https://mosaicwebsites.com/blog/getting-most-out-svgs-twig-templates) 180 | - by Igor Lakic, 22 October 2018 181 | - [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) 182 | - by Mark Conroy, 19 October 2018 183 | - [Responsive images in the Emulsify (PL) theme - The easy way](http://mosaicwebsites.com/blog/responsive-images-emulsify-pl-theme-easy-way) 184 | - by Igor Lakic, 4 October 2018 185 | - [Creating Paragraphs Entities for Dynamic Content](https://a-fro.com/blog/creating-paragraphs-entities-dynamic-content) 186 | - by Aaron Froehlich, 26 September 2018 187 | - [Responsive Images with PatternLab and Drupal - the easy way](https://mark.ie/blog/web-development/responsive-images-patternlab-and-drupal-easy-way) 188 | - by Mark Conroy, 20 September 2018 189 | - [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) 190 | - by Darren Fisher, 13 September 2018 191 | - [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) 192 | - by Mark Conroy, 8 September 2018 193 | - [How to make theme images work in Pattern Lab and Drupal](https://www.fourkitchens.com/blog/development/make-theme-images-work-pattern-lab-drupal/) 194 | - by Brian Lewis, 11 July 2018 195 | - [My Approach to PatternLab?](https://mark.ie/blog/web-development/my-approach-patternlab) 196 | - by Mark Conroy, 18 May 2018 197 | - [Adding {{ attributes }} to a Drupal PatternLab Theme](https://mark.ie/blog/web-development/adding-attributes-drupal-patternlab-theme) 198 | - by Mark Conroy, 16 April 2018 199 | - [Introducing Twig Components](https://mortenson.coffee/blog/drupal/2018/04/09/introducing-twig-components.html) 200 | - by Samuel Mortenson, 9 April 2018 201 | - [Achieving Clarity in Component-based Best Practices](http://nerdstein.net/blog/achieving-clarity-component-based-best-practices) 202 | - by Adam Bergstein, 2 April 2018 203 | - [Componentizing Drupal Front End using Pattern Lab](https://valuebound.com/resources/blog/componentizing-drupal-front-end-using-pattern-lab) 204 | - by Safallia Joseph, 9 March 2018 205 | - [Accommodating Drupal In Your Components](https://www.mediacurrent.com/blog/accommodating-drupal-your-components) 206 | - by Eric Huffman, 15 February 2018 207 | - [Using Pattern Lab in Drupal 7 theme development](https://www.aleksip.net/using-pattern-lab-in-drupal-7-theme-development) 208 | - by Aleksi Peebles, 5 February 2018 209 | - [Front end journey into Drupal + Pattern Lab](https://hackernoon.com/front-end-journey-into-drupal-pattern-lab-4db02e617fb4) 210 | - by Mikhail Romanov, 12 January 2018 211 | - [Integrating a Drupal Text with Image Paragraph Bundle with Patternlab](https://mark.ie/blog/web-development/integrating-drupal-text-image-paragraph-bundle-patternlab) 212 | - by Mark Conroy, 30 December 2017 213 | - [Field Notes: UI Patterns Module](http://www.hook42.com/blog/field-notes-ui-patterns-module) 214 | - by Ryan Bateman, 27 December 2017 215 | - [A first taste of Drupal theming using Pattern Lab](https://weknowinc.com/blog/drupal-theming-using-pattern-lab) 216 | - by Omar Aguirre, 26 December 2017 217 | - [Integrating a Simple Drupal Text Paragraph Bundle with Patternlab](https://mark.ie/blog/web-development/integrating-simple-drupal-text-paragraph-bundle-patternlab) 218 | - by Mark Conroy, 21 December 2017 219 | - [Emulsify 2: Building a Full Site Header in Drupal](https://www.fourkitchens.com/blog/development/emulsify-2-building-full-site-header-drupal/) 220 | - by Evan Willhite, 20 December 2017 221 | - [Exploring simplicity in Drupal design components](http://nerdstein.net/blog/exploring-simplicity-drupal-design-components) 222 | - by Adam Bergstein, 2 October 2017 223 | - [Performance improvements with Drupal 8 Libraries](https://www.previousnext.com.au/blog/performance-improvements-drupal-8-libraries) 224 | - by Rikki Bochow, 7 August 2017 225 | - [Component Based Theming at DrupalCon Baltimore](https://www.hs2solutions.com/blog/component-based-theming-drupalcon-baltimore) 226 | - by Brian Perry, 9 May 2017 227 | - [Component Driven Development with Emulsify](https://www.youtube.com/watch?v=mokJpc7J1rM) 228 | - by Brian Lewis and Evan Willhite, 15 March 2017 229 | - [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) 230 | - by Aleksi Peebles, 29 January 2017 231 | - [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) 232 | - by Antonio De Marco, 23 January 2017 233 | - [Drupal 8 Front-End Architecture](http://jordanpagewhite.github.io/drupal-8-front-end-architecture/) 234 | - by Jordan White, 9 January 2017 235 | - 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)) 236 | - by Mario Hernandez, 11-21 November 2016 237 | - [Anatomy of a (terrific) Drupal 8 theme](https://www.zivtech.com/blog/anatomy-terrific-drupal-8-theme) 238 | - by Alban Bailly, 7 November 2016 239 | - [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) 240 | - by Marc Drummond, 26 September 2016 241 | - [Component-Based Theming in Drupal 8: The Video Series](https://www.fourkitchens.com/blog/article/component-based-theming-drupal-8-video-series) 242 | - by Evan Willhite, 21 September 2016 243 | - [Component-Based Theming in Drupal 8](http://www.mediacurrent.com/blog/component-based-theming-drupal-8) 244 | - by Chris Doherty, 1 August 2016 245 | - [Introducing Pattern Lab Starter 8](https://www.phase2technology.com/blog/introducing-pattern-lab-starter-8/) 246 | - by Evan Lovely, 6 June 2016 247 | - [A New Design System Architecture](https://micahgodbolt.com/blog/a-new-design-system-architecture/) 248 | - by Micah Godbolt, 6 June 2016 249 | - [Pattern Lab and Drupal 8 theme integration update](https://www.aleksip.net/pattern-lab-and-drupal-8-theme-integration-update) 250 | - by Aleksi Peebles, 9 May 2016 251 | - [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) 252 | - by Marc Drummond, 25 March 2016 253 | - [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/) 254 | - by Evan Lovely, 1 March 2016 255 | - [Making Pattern Lab work with Drupal 8 Twig theme templates](https://www.aleksip.net/making-pattern-lab-work-with-drupal-8-twig-theme-templates) 256 | - by Aleksi Peebles, 29 January 2016 257 | - [Atomic design, Pattern Lab and Drupal 8 theme development](https://www.aleksip.net/atomic-design-pattern-lab-and-drupal-8-theme-development) 258 | - by Aleksi Peebles, 29 January 2016 259 | - [Style-Guide-Driven Development: the new web development](https://www.previousnext.com.au/blog/style-guide-driven-development-new-web-development) 260 | - by John Albin, 26 November 2014 261 | 262 | 263 | ## Presentations and videos 264 | 265 | - Florida DrupalCamp 2022 266 | - [Component theme development with Storybook and Emulsify](https://www.fldrupal.camp/session/component-theme-development-storybook-and-emulsify) 267 | - by Mark Casias 268 | - BADCamp 2020 269 | - [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) 270 | - by Brian Perry 271 | - Drupal GovCon 2020 272 | - [Component-Driven Theming with Storybook](https://www.drupalgovcon.org/2020/program/sessions/component-driven-theming-storybook) 273 | - by Aaron Couch, Evan Willhite and Brian Lewis 274 | - SF Drupal Users Group, 10 September 2020 275 | - [Best practices for Integrating components with Drupal](https://www.youtube.com/watch?v=PMST_gl4C4A) 276 | - by Mario Hernandez 277 | - [Drupal Single File Components](https://www.youtube.com/watch?v=6ca2o4esi4I) 278 | - by Samuel Mortenson, 24 July 2020 279 | - CMS Philly 2020 280 | - [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) 281 | - by Dean Oest 282 | - [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) 283 | - by Aaron Couch 284 | - Florida DrupalCamp 2020 285 | - [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)) 286 | - by Brian Perry 287 | - DrupalCamp Atlanta 2019 288 | - [The future of Drupal theming](https://www.drupalcampatlanta.com/2019/sessions/future-drupal-theming) ([Slides](https://slides.com/mathieuspillebeen/deck-6-7-11#/)) 289 | - by Mathieu Spillebeen 290 | - Drupal GovCon 2019 291 | - [Integrating Pattern Lab with Drupal 8](https://www.drupalgovcon.org/2019/program/sessions/integrating-pattern-lab-drupal-8) 292 | - by Roshana Devkota and Kevin McCloskey 293 | - Drupal Camp Asheville 2019 294 | - [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)) 295 | - by Derek Reese 296 | - Drupal North 2019 297 | - [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)) 298 | - by Jigar Mehta 299 | - Drupaldelphia 2019 300 | - [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)) 301 | - by Chris Arasin 302 | - Budapest Drupal User Group Meetup April 2019 303 | - [How we build component-based Drupal themes](https://noti.st/thamas/u1vB20/how-we-build-component-based-drupal-themes) 304 | - by Tamás Hajas and Gábor Tompa 305 | - DrupalCon Seattle 2019 306 | - [Frontend Architecture for Scalable Design Systems](https://events.drupal.org/seattle2019/sessions/design-system-architecture-pattern-lab-twig-and-web-components) 307 | - by Salem Ghoweri 308 | - [Pattern Lab: The Definitive How-to](https://events.drupal.org/seattle2019/sessions/pattern-lab-definitive-how) 309 | - by Evan Lovely 310 | - [An External Design System in Practice](https://events.drupal.org/seattle2019/sessions/external-design-system-practice) 311 | - by Brian Perry 312 | - MidCamp 2019 313 | - [An External Design System in Practice](https://www.midcamp.org/2019/topic-proposal/external-design-system-practice) 314 | - By Brian Perry 315 | - DrupalCampNJ 2019 316 | - [Getting Atomic with Pattern Lab](https://www.drupalcampnj.org/sessions/getting-atomic-pattern-lab) 317 | - by Aaron Froehlich 318 | - BADCamp 2018 319 | - [Demystifying Pattern Libraries and Drupal 8](https://2018.badcamp.org/session/demystifying-pattern-libraries-and-drupal-8) 320 | - by Zakiya Khabir 321 | - Drupal Developer Days Lisbon 2018 322 | - [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)) 323 | - by Adam Juran 324 | - Design 4 Drupal 2018 325 | - [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)) 326 | - by Salem Ghoweri 327 | - Texas Camp 2018 328 | - [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)) 329 | - by Brian Perry 330 | - Drupaldelphia 2018 331 | - [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)) 332 | - by Adam Bergstein 333 | - MidCamp 2018 334 | - [Component-based Drupal](https://www.midcamp.org/topic/component-based-drupal) 335 | - by Adam Bergstein and Brian Perry 336 | - Florida DrupalCamp 2018 337 | - [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) 338 | - by Derek Reese 339 | - Pacific Northwest Drupal Summit 2018 340 | - [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) 341 | - by Christopher Bloom 342 | - [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) 343 | - by Eric Huffman 344 | - New England DrupalCamp 2017: 345 | - [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)) 346 | - by Brian Perry 347 | - DrupalCon Vienna 2017: 348 | - [Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8](https://www.youtube.com/watch?v=6BdyXYkY3Wg) 349 | - by Antonio De Marco 350 | - [Decouple your Twig from PHP and make Frontenders happy!](https://events.drupal.org/vienna2017/sessions/decouple-your-twig-php-and-make-frontenders-happy) 351 | - by Anton Staroverov and Tassilo Gröper 352 | - DrupalCon Baltimore 2017: 353 | - [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) 354 | - by Anthony Simone 355 | - [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) 356 | - by Evan Lovely and Grant Gaudet 357 | - MidCamp 2017: 358 | - [Component Based Theming in the Real World](https://www.midcamp.org/session/component-based-theming-real-world) 359 | - by Brian Perry 360 | - Drupal Developer Days Seville 2017: 361 | - [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) 362 | - by Antonio De Marco 363 | - Drupal Mountain Camp 2017: 364 | - [Drupal 8 Component Based Theming](http://slides.com/lauriii/dmc-2017-component-based-theming) 365 | - by Lauri Eskola 366 | - DrupalCamp Florida 2017: 367 | - [Component Libraries in Drupal Contrib, Core, and Beyond](https://www.fldrupal.camp/sessions/approved/florida-drupalcamp-2017/design-theming-front-end-development/component-libraries) 368 | - by Derek Reese 369 | - DrupalCamp Munich 2016: 370 | - [Component-driven theming workflow with Pattern Lab and Drupal 8](http://dcmuc16.drupalcamp.de/sessions/component-driven-theming-workflow-pattern-lab-and-drupal-8) 371 | - by Tom Keitel and Steffen Rühlmann 372 | - Drupal-Austria Vienna Meetup October 2016: 373 | - [Streamlined Front-End development with Pattern Lab & Twig](https://docs.google.com/presentation/d/1Me6YOXpj0DagjoXjTQYLy7Knc8tidmpIVL9-JzJThEo/edit#slide=id.g17a10fc84f_1_12) 374 | - by Wolfgang Ziegler 375 | - DrupalCamp LA 2016: 376 | - [Component-driven Drupal theming](https://www.mediacurrent.com/multimedia/video/drupalcamp-la-2016-component-driven-drupal-theming) 377 | - by Mario Hernandez 378 | - DrupalCamp Asheville 2016 379 | - [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)) 380 | - by Derek Reese 381 | - Devsigner 2016: 382 | - [Integrating Pattern Lab with a CMS Build](http://www.evanlovely.com/notes/pattern-lab/integrating-pattern-lab-into-drupal-workshop.pdf) 383 | - by Evan Lovely 384 | - DrupalCon New Orleans 2016: 385 | - [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) 386 | - by Adam Juran and Chaz Chumley 387 | - DrupalCon Los Angeles 2015: 388 | - [The New Design Workflow](https://www.youtube.com/watch?v=PdfxJO81cdA) 389 | - by Joey Groh, Evan Lovely and Micah Godbolt 390 | 391 | 392 | ## Related Drupal.org issues 393 | 394 | - [Decouple and componentize our Twig implementation](https://www.drupal.org/project/drupal/issues/3096483) 395 | - [Add Components Module to Drupal Core](https://www.drupal.org/project/ideas/issues/2875935) 396 | - [Theme system improvements roadmap](https://www.drupal.org/node/2821399) 397 | - [Allow a component library to define asset libraries](https://www.drupal.org/node/2707849) 398 | - [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) 399 | - [Move Attribute classes under Drupal\\Component](https://www.drupal.org/node/2664570) 400 | 401 | 402 | ## Other resources 403 | 404 | - [Drupal Pattern Lab working group](https://drupal-pattern-lab.github.io/) 405 | - [Drupaltwig Slack channel](https://drupaltwig-slack.herokuapp.com/) 406 | - [Gitter Pattern Lab chat rooms](https://gitter.im/pattern-lab) 407 | - [Pattern Lab 101](https://patternlab-101.readthedocs.io/en/latest/) 408 | 409 | 410 | ## Component-based theming with Drupal explained for clients 411 | 412 | - [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) 413 | - by Darren Fisher, 13 September 2018 414 | --------------------------------------------------------------------------------