Introducing Pattern Lab Starter 8

Sara Olson, Marketing Analyst
#Design | Posted

I'm very proud to announce the launch of Pattern Lab Starter 8, Phase2's starter theme with Pattern Lab, which acts as the style guide, component library, and prototyping tool needed for a modern approach to theming. (For more background, take a look at my blog on how Pattern Lab transformed our collaborative design process, or register for Phase2's webinar on June 16th.)Pattern Lab Starter 8 uses Pattern Lab 2 and the same templating engine that powers Drupal 8: Twig. By using the same templating engine, along with the help of the Component Libraries Drupal Module, the tool gives Drupal the ability to directly include, extend, and embed the Twig templates that Pattern Lab uses for its components without any template duplication at all!The implications are huge! This will radically improve our prototyping process and provide massive benefits to our clients. During last month's DrupalCon, Dries's keynote even stated that adding a Theme Component Library was one of his proposed initiatives. Dries included a slide using the Atoms, Molecules, and Organisms from Pattern Lab as a demonstration of what components are!

Fav #driesnote moment: @dries mentioned @brad_frost's Atomic Design to launch #Drupal component theming initiative.

— Marc Drummond (@MarcDrummond) May 10, 2016

I've done everything I can to balance the simplicity and power of these tools to ensure they’re both flexible and approachable. Never before have I worked with such creative and intelligent people; I really hope some more in the community add your own touches to our tools. Contributing is simple: just clone the repo, run the install, then fire up the start script. Change and improve how you see fit, then send up a PR.Check out Pattern Lab Starter on GitHub anduse these simple commands to get started:

  1. git clone
  2. cd pattern-lab-starter
  3. npm install
  4. npm start

There’s several levels of released tools to look at:

  1. The Drupal Edition of Pattern Lab 2 - this is just Pattern Lab using Twig along with some Drupal specific Twig additions like t, trans, link, and more.
  2. Pattern Lab Starter is a Drupal theme starter that uses the above and adds extra functionality for embedding Pattern Lab components in Drupal; along with many convenient Gulp tasks for common front end build tools.
  3. DrupalLab is a Drupal 8 site with dummy generated content that shows how the above theme, along with the new Pattern Lab, can be used to prototype components out, display a library of them, and then integrate them in a full Drupal site. We first debuted DrupalLab at DrupalCon New Orleans, where Chris Bloom and Chris Wright gave an awesome talk on rethinking our design workflows and tools.


A lot of hard work from many people has gone behind the scenes to make this possible. At Phase2, many thanks are owed to Anne Sturdivant, Kellye Rogers, Chris Bloom, Chris Wright, Jeff Crisamore, Annie Stone, and Sara Olson. In addition, this would not have been possible without Dave Olsen, Lead Developer at Pattern Lab; Aleksi Peebles, a freelance Drupal developer; and Brad Frost, the creator of Atomic Design and Pattern Lab. THANK YOU!!

Sara Olson

Marketing Analyst