Component Based Theming With UI Patterns

brianperry

Since the release of Drupal 8, great strides have been made to develop a component based theming workflow that takes advantage of the best that Twig has to offer and also plays nice with living style guides and pattern libraries. Gone are the days of redundant styles and markup, making way for the efficiencies found when Drupal and tools like Pattern Lab can share the exact same code. That said, handling the mapping of data between Drupal and your component library can still be quite complicated and difficult to coordinate on larger cross-functional teams.  

The UI Patterns Module offers a number of powerful ways to define and manage components in a way that Drupal understands. By exposing these patterns as Drupal plugins, UI Patterns makes it possible to manage this data mapping process within the Drupal Admin UI and also easily use these patterns from your pattern library with component friendly modules like Paragraphs and and Field Layout.

This session will cover:

  • A brief introduction to component based theming concepts
  • An overview of the common approach to integrating Drupal with pattern library components without the UI Patterns Module.
  • Basic setup and use of the UI Patterns Module to manage mappings between Drupal and your pattern library.
  • The various integration sub-modules included with UI Patterns.
  • Advanced topics like rendering patterns via a Twig function, rendering patterns programmatically, handling sub-patterns, and pattern variants.


This session is for front-end developers who have experimented with component based theming in Drupal 8 and have been looking to streamline the process.  It is also for front-end developers who haven’t yet adopted this emerging component based theming approach and have wondered how it might impact their workflow. And for those who are involved with Drupal 8 projects but are not front-end developers, this session should help you become aware of some of the potential challenges, as well as the advantages to this component based theming approach as it relates to your work.

 

Program tags

front end development, site building

Experience Level

Intermediate

Drupal Version