DrupalCon Vienna 2017: Introducing the UI Patterns module: use atomic UI components
Channel: Drupal Association
Date: 26/09/2017

In this session we will show how the UI Patterns module allows you to define and expose self-contained UI patterns as Drupal 8 plugins and to use them as drop-in templates for panels, field groups, views, Display Suite view modes, field templates, etc.

Over the past years projects like PatternLab or the Component Libraries module aimed at lowering the cost of maintaining and re-using UI patterns in your projects. But, as we all know, when it comes to presenting content the Drupal 8 landscape is quite diverse: you can layout your pages using Panels or Views, style your entities using Display Suite view modes, group your fields with Field group, etc. Such a diversification can surely present some challenges when it comes at reusing a well-designed and consistent UI library. The UI Patterns module makes it possible to seamlessly use UI patterns with views, layouts, field formatters, etc.

The session will also feature a brief live-demo of the following functionalities:

Define and preview patterns using YAML via the built-in Pattern Library module
Organise patterns into self-contained bundles of JavaScript, CSS and TWIG templates
Expose PatternLab and Fractal patterns to Drupal
Use patterns as layouts with Paragraphs, Panels and Display Suite
Use patterns as field group templates with the Fieldgroup module
Use patterns as Views row templates
Use patterns as entity field templates
Use patterns with the Bricks module
Advanced topic: a closer look to UI Patterns internals