You are here

Component Based Theming With UI Patterns

This site is for archival purposes only. 

Find out what is happening with the Twin Cities Drupal User Group at https://tcdrupal.org/

Track: 
Design & Theming
Experience Level: 
Intermediate
Session Length: 
60 minutes

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 and KSS 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 make Drupal more aware of the components in your pattern library. By exposing these patterns as Drupal plugins, UI Patterns Module makes it possible to manage this data mapping process within the Drupal Admin UI and also easily use these patterns with component friendly modules like Paragraphs, Panels and Field Layout.

Learning Objectives & Outcomes: 

* Basic setup and use of the UI Patterns Module.
* Integrating UI Patterns into a typical workflow and theme structure using Drupal and Pattern Lab.
* Using UI Patterns functionality to manage complicated mappings between Drupal and your component library.
* Overcoming challenges with onboarding new developers who may not be familiar with this approach to theming.
* Creating a component-friendly content editing experience.