This workshop will demonstrate the value of integrating Pattern Lab into a Drupal theme, and will give practical experience configuring Pattern Lab into your theme architecture, building components in Pattern Lab, mapping Drupal templates to our Pattern Lab templates, and mapping Pattern Lab patterns to Drupal layouts, field groups, or views.
Each iteration of Drupal introduces new and innovative ways to manage content. CCK and Views transformed how we could display teasers in lists. Display Suite granted us granular control of display modes, and more recently Paragraphs shifted the content management paradigm, simultaneously giving Content Managers greater control of content flow while also encouraging theming with components.
The evolution of theming techniques has paralleled these advances: page-centric design has given way to component-based design. This workshop will demonstrate the power and beauty of recent developments in component-based theming. We'll quickly review the necessary array of tools, and then discuss components both individually and as part of larger system. Then you'll learn how unify Pattern Lab's and Drupal's template markup, creating a one-to-one mapping of Pattern Lab templates to Drupal templates. Thus we prevent duplication of markup while also encouraging a truly component based approach to theming. Lastly, we will leverage UI Patterns to allow developers to assign Pattern Lab patterns to layouts, field groups, and views via the UI.
In this workshop we'll review:
- How to integrate Pattern Lab into your theme
A brief overview of the Gesso 2.0 theme and tools (Composer, PatternLab, NPM and Grunt) to create a streamlined workflow. - How to create components and build component systems
How to define individual components and then create systems of components in Pattern Lab by grouping and nesting them into larger structures with YAML.
Then you'll get to try your hand at:
- Pattern Lab to Drupal
Make Pattern Lab our canonical source using the Component Libraries module and Twig namespacing, and then map Drupal templates to Pattern Lab templates. - Drupal to Pattern Lab
Leverage UI Patterns module to assign Pattern Lab patterns to layouts, field groups, and views.
*This workshop is the evolution of the training "Component based theming with Twig" (https://events.drupal.org/baltimore2017/training/component-based-theming-twig) which I co-lead at DrupalCon Baltimore.
