Integrating Pattern Lab and Drupal, Our Technical Approach

Ralph Otto author photo
Ralph Otto Director of Product

Our team was delighted to host the Drupal Richmond Meet Up yesterday on using Pattern Lab and Drupal. This post is a technical follow up for our event recap post. Check that out if you haven’t yet.

Our Demo

We built our demo using the node version of Pattern Lab 3.0. Pattern Lab is tool-agnostic, so it is fairly minimal out of the box, but there are numerous configurations available through the Pattern Lab website.

To get our demo running, we referenced the good work done by Mario Hernandez in creating a lando-based Drupal environment with frontend integrated tooling as well as Evan Lovely’s presentation at DrupalCon last year. While these had usable code examples, our goal for this project was to use it in production for client sites, so we wanted to start with COLAB build practices and build upon that.

We began with an existing Drupal theme we developed for a client. This already had most of the tooling we needed for basic development and the rest was a matter of connecting Pattern Lab (which wasn’t entirely simple since 3.0 is still in dev).

The existing code was moved from partials to Pattern Lab components in order to have 1:1 parity between Pattern Lab and Drupal. Classes were reworked using ABEM naming conventions to help write self-documenting code. A new content type was created to isolate the work in Pattern Lab from the rest of the site. We used the Paragraphs module to content manage this content type and allow for layout flexibility.

We’re proud of the results and are excited to use this work in production to save our client time and money.

Pattern Lab Setup

Pattern Lab: Components
Pattern Lab: Hero

Drupal CMS

Pattern Lab: Drupal CMS Paragraph


Clients and development teams should consider using Pattern Lab with Drupal to create well documented, consistent, and maintainable websites and web applications. This methodology is reproducible for any website and provides significant value in the long term. 

If you have a Drupal website or web application that you’re maintaining and you need help, please reach out to us via email [email protected] or give us a call at (804) 433-3582. We’re happy to consult on the specifics of your needs.

Further Reading