Using Pattern Lab in Drupal 7 theme development

After working almost exclusively with the latest and greatest version of Drupal since 2015, I am now facing some Drupal 7 projects. I did not want to give up using atomic design and Pattern Lab, so I decided to create a PHPTemplate (.tpl.php) PatternEngine for Pattern Lab.

Creating a PatternEngine

The Pattern Lab ecosystem can be a bit daunting. Although the actual technical implementation of a PHPTemplate PatternEngine was not that difficult, I had to create four different projects to accomplish a fully working Pattern Lab: a PatternEngine, a StyleguideKit, a StarterKit and an Edition that bundles everything together.

Default template rendering works in the same way in both Drupal 7 and 8: a child template is rendered first, and the result is passed as a variable to the parent template. The Data Transform Plugin, which is included in the new PHPTemplate Edition, was written to support this type of rendering in Pattern Lab.

Getting started with the PHPTemplate Edition

If you are still working with Drupal 7 and want to use atomic design and Pattern Lab, setting up a compatible Pattern Lab is as easy as typing:

composer create-project -s beta aleksip/edition-php-tpl

The PHPTemplate Edition is currently a beta release but I am already using it successfully in a Drupal 7 project.

Setting up a Pattern Lab project

Another new project of mine is a Pattern Lab starter project that can be used as a starting point for both Drupal 7 and Drupal 8 themes or modules with templates. I hope to document it better and maybe also write a blog post about it soon.

Update: What about using Twig in Drupal 7?

Since publishing this blog post I have received feedback regarding the possibility of using Twig for Drupal (TFD7) module and the Twig Edition of Pattern Lab with Drupal 7. I have not tried TFD7 myself, but apparently it works very well and can be used together with Pattern Lab.

I think that the TFD7 approach could be a very good or possibly better alternative when creating an entirely new theme. This is especially true if you also want to use or create a general-purpose Twig component library.

However, if you need to work with an existing PHPTemplate theme, or just want to avoid using a non-standard theme engine, using the PHPTemplate Edition of Pattern Lab should be a good option.

Comments

Permalink

Hi,

Interesting solution, we are using twig in drupal 7 together with patternlab, works like a charm. https://tfd7.rocks/

In reply to by Stephan huber

Permalink

Hi Stephan, thanks for your comment! I have updated this blog post to mention your alternative solution. Would be great to learn more about your experience with TFD7 and Pattern Lab. Maybe you could write a blog post? :)

After working almost exclusively with the latest and greatest version of Drupal since 2015, I am now facing some Drupal 7 projects. I did not want to give up using atomic design and Pattern Lab, so I decided to create a PHPTemplate (.tpl.php) PatternEngine for Pattern Lab.