Integrating Pattern Lab with Drupal 8

  • Basic to intermediate competency with Drupal 8 theming layer that will include HTML & CSS, TWIG, templating.
  • Familiarity with the concepts of JSON will be helpful.
  • Node, gulp, composer, npm installed.
Workshop Details

Working with Pattern Lab will teach you how the Atomic Design methodology helps teams create successful user interface (UI) design systems and to create reusable UI components in HTML and CSS.


We'll go through Pattern Lab installation and setup process followed by building & using UI components inside Pattern Lab,manipulating data to create page prototypes and integrating these patterns in our Drupal website.


  1. Introduction: We'll understand component based theming and look at how Pattern Lab fits into the context of the web design and development workflow.
  2. Setting Up Pattern Lab: We'll learn how to download and install patternlab . Pattern Lab is a static site generator; we'll walk through what that means, understanding directory structure and the process by which Pattern Lab compiles files that can be viewed on web browser.
  3. Working with patterns: We'll look at a custom design and understand how to break a design into patterns. Later, we'll design those patterns using pattern-lab.
  4. Integrating pattern-lab with Drupal: We'll create a custom theme in Drupal using the patterns that we've created in patternlab.
Experience Level