A Practical Approach to Drupal Theming with a Pattern Library

trevorkjorlien

For front-end developers and themers, using a Pattern Library (or ’living style guide’) is a wise choice. They help designers to easily see elements and styles used in a project, document the visual language of a site, provide consistency, and speed up front-end development.

If you want to learn more about the benefits of using a Pattern Library, you should really read this: http://alistapart.com/article/creating-style-guides.

One of the more popular Pattern Libraries is a static site generator called Pattern Lab (http://patternlab.io), based on Brad Frost’s Atomic Design concept (http://atomicdesign.bradfrost.com/table-of-contents/). There are many others to choose from, but this presentation will use Pattern Lab as an example.

However, there are several issues using a Pattern Library, such as Pattern Lab, with Drupal, such as:

  • The markup in Pattern Lab represents an ideal scenario. But Drupal sometimes requires specific markup for things like Views Exposed Filters, Blocks, Menus, Entity Fields, etc...
  • How can we integrate our Pattern Lab within a Drupal theme, but still have it live on it’s own as a separate project for prototyping and delivering to a client?
  • We can’t directly import our Mustache/Twig files from Pattern Lab directly into Drupal theme templates.

This session will provide some insight into our experiences as we faced these issues. We also reserve the right to be wrong: we are still learning how to do this in the most efficient way and are open to comments from the audience with their experiences doing this during the question period.

After this session, you should be able to:

  • Know how to add a Pattern Lab project as a dependency of a Drupal project
  • Configure a Grunt/Gulp file to add needed files (CSS, JS) from your Pattern Library to your Drupal theme
  • Understand the limits of how automated we can take our Pattern Library to a Drupal theme (and what things we’ll need to do manually)
  • Understand in which cases you should modify the markup in your Drupal project or in your Pattern Library

There are two audiences for this session:

  • People who are interested in front-end Pattern Libraries in general and want to learn what they do and how to integrate them with Drupal. This group will also become aware of the issues that they will face in the future if they decide to integrate a Pattern Library within a Drupal project.
  • People who have tried Pattern Libraries, but are confused on how to integrate them with their Drupal projects.

About the Presenter:

Trevor Kjorlien has been using Drupal since 2008, first as a site builder, and then as a formal front-end developer since 2013. 

In this time, he has, presented at DrupalCamp Montréal (2013, 2014, 2015), Drupal North (2015), and several Drupal-related meet up events. Trevor now works as a Front-End Web Developer at Floe design + technologies in Montréal, Canada.

In his spare time, he creates elaborate cardboard Halloween costumes and enjoys watching the moon rise over the horizon. You can follow him on Twitter at @trevorkjorlien.

Register NOW

Session Track

Front End

Experience Level

Intermediate

Drupal Version