Introducing the UI Patterns module: use atomic UI components everywhere in Drupal 8

Session
Intermediate
Frontend
Room
Victoria

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 patterns using YAML
  • Visualize patterns on a pattern library page
  • Organize patterns into self-contained bundles of JavaScript, CSS and TWIG template
  • Integrate patterns with tools like PatternLab
  • Use patterns as paragraphs or nodes layouts
  • Use patterns as field group templates
  • Use patterns as views row templates
  • Use patterns as field templates
  • Advanced topic: a closer look to UI Patterns internals

Platinum sponsors

  • ibuildings

Gold sponsors

  • comvive
  • Platform.sh
  • Cocomore
  • Drupalera

Silver sponsors

Bronze sponsors