Craft + Patternlab = Buzzwords!

Pattern Lab provides an organizational structure to a design system that powers HTML. Following the “atomic” design pattern; it allows designers and developers to collaborate using a shared vocabulary. It uses the Mustache template system and allows you to hand off abstracted HTML to the implementation team. Pattern Lab is great for front-end developers.

We love our tools at Happy Cog. We hop from tool to tool depending on the client and the job. What works best today may not work tomorrow. We try to remain technology agnostic. Recently, I suddenly found myself trying to manage back-end templates in Twig with changes coming from front-end templates in Mustache. If a change was made in one it had to be made in the other. If logic was added to one it had to be re-implemented in another. This was not an ideal scenario so I set out to fix it.

Pattern Lab breaks its templates down into a Russian nesting doll of templates. Each template builds on a smaller template until a full page is populated with content and imagery provided by a data.json file. This pattern provides a perfect place to separate my tools by what they do best.. What we settled on is that Pattern Lab would create atoms, molecules, organisms, and templates. Pages, being the fully realized templates with content and imagery, would fall squarely in Craft’s domain. Importantly, I didn’t want to do any translating so Pattern Lab templates need to remain native Mustache templates while Craft templates need to remain native Twig templates. Writing a Mustache to Twig compiler would not only be difficult but also a fragile bridge prone to errors and bugs.

To get this all working we settled on a Twig Extension that provides a Mustache tag. With this, Pattern Lab templates can be called directly from Craft/Twig. When Implemented it looked something like this in our Twig templates,

 {% extends “_layout” %}

 {% block content %}
 	{% set set json = {
 		“posts”: craft.entries.section(‘news’).limit(10),
 		“pageTitle”: “News”
 	} %}
 	{% mustache “atoms-landscape-4×3” with json }{ endmustache %}
 {% endblock %}

The power here is we’re not asking any one system to do more than it has to. Craft is responsible for generating JSON by querying the database, which is what Craft does best. Pattern Lab is responsible for arranging the HTML into digestible chunks, which is what Pattern Lab does best. And best of all there’s not translation since we’re pulling Mustache templates directly into Twig from the Pattern Lab directory. No copying or moving at all.

This project isn’t finished and the build still has a few months to go but early indications are favorable. Regardless of the outcome, this experiment provided a great test for tying the strongest part of two technologies together to make our lives easier.

Back to Top