Back to top

Component-based Theming with Pattern Lab and Twig

Speakers
Session type
Session
Level
Intermediate
Track
Frontend
Description

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 session 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, and finally leverage UI Patterns to allow developers to select templates via the UI.

In this session we'll cover:

  • Gesso theme and Tools
    A brief overview of the Gesso 2.0 theme and tools (Composer, PatternLab, NPM and Grunt) to create a streamlined workflow.
  • Individual components and component architecture
    Defining individual components and then creating whole component systems in Pattern Lab by grouping and nesting them into larger structures with YAML.
  • Pattern Lab to Drupal
    Making PatternLab our canonical source using the Component Libraries module and Twig namespacing.
  • Drupal to Pattern Lab
    Examine the UI Pattern Library module and how it integrates with Field Formatters, Display suite and Panels.

*This session will draw heavily from the training "Component based theming with Twig" (https://events.drupal.org/baltimore2017/training/component-based-theming-twig) which I co-lead at DrupalCon Baltimore.