Pattern Lab in Drupal 8: Lessons learned

There has a been a movement within the front end development community to improve process and move away from “flat design”, where stakeholders are shown PSDs or JPGs for design sign off.   One of the tools that has come out of this movement is Pattern Lab, which moves that process 'in browser'.

Pattern Lab helps themers/designers build user interfaces with reusable and nestable components with a quick prototyping turn around. All of this happens in the browser so it’s easy to see how components react at different screen sizes. Developers can then take the TWIG templates used by Pattern Lab and apply those directly to Drupal components. Those components automatically inherit the Pattern Lab design and can be considered themed.  Any further changes in the Pattern Lab design are then directly updated in the website wherever those Pattern Lab components are used.

Kanopi Studios has taken the plunge and used Pattern Lab on a recent Drupal 8 project. We will walk through some of the tools available for integrating Pattern Lab and discuss the impact to our project development process.

After attending this session, you’ll be able to:

  • Know how to choose a Pattern Lab Starter theme
  • Learn how to relate Pattern Lab patterns to blocks and views
  • Understand the tradeoffs between Pattern Lab and traditional Drupal theming.
Speaker(s): 
Session Track: 
Design, Theme + UX
Experience level: 
Intermediate