Atomic Design in Drupal 8: Isolating frontend workflow with Pattern Lab!

Drupal 8 has allowed for the integration of modern workflows into the Drupal community. The transition to Twig as the templating engine specifically provides the space to integrate new patterns and tools into your frontend workflow. Pattern Lab is a static site generator that provides a structure for developing a templating and theming framework based on atomic design. The Twig version of Pattern Lab, along with the Data Transform plugin written by Aleksi Peebles, creates the possibility to integrate Pattern Lab directly into your Drupal project.

This session will review the basic principles of Pattern Lab and atmomic design, but will focus on the practical implementation of Pattern Lab in YOUR next Drupal project. We will work toward the following goals:

  • Review the basic principles of Pattern Lab and how it can integrate directly with a Drupal 8 project, including specific issues that make Pattern Lab in Drupal different from a standalone Pattern Lab project
  • Discuss some challenges that you might encounter if you want to add Pattern Lab to your project and an example of one specific implementation
  • Consider a functioning example of a Drupal 8 site that has a well developed Pattern Lab backbone and discuss some potential benefits of this type of workflow

Comfortable working knowledge of Drupal 8 and Twig/templating within a Drupal 8 project is highly recommended for this session. Familiarity with atomic design and/or component based design, Pattern Lab, php/Composer, and front-end workflows within a Drupal 8 project will be helpful, but not totally necessary.

Our main objective will be to demonstrate how to use these tools together and provide an implementation path so you can walk away from this session and include Pattern Lab in your next Drupal project today if you decide it's the tool for you!


Session Track

Front End

Experience level


Drupal Version

Drupal 8 (current)

Session Time Slot(s)

04/26/2017 - 10:45 to 04/26/2017 - 11:45
309 - FFW