Streamlined Front-end Development with Pattern Lab and Twig
Pattern Lab and Twig, the perfect duo to streamline your front-end development process.
Pattern Lab (patternlab.io) is “a custom static site generator that constructs an interface by stitching atoms, molecules, and organisms together to form templates and pages.” The philosophy of Pattern Lab parallels several core tenets of OOP: Don’t Repeat Yourself and Keep It Simple, Stupid.
Twig (twig.sensiolabs.org) is a fast, secure, and flexible templating engine from Sensio Labs, the people who brought us Symfony.
In our session we will demonstrate how to combine the power of these two technologies to streamline your front-end development workflow for Drupal 8.
The original version of Pattern Lab uses Mustache templates, but there's been a Twig version for over a year. Using the Pattern Lab starterkit for Twig (https://github.com/pattern-lab/edition-php-twig-standard), we can create patterns that map to Drupal’s Twig templates. Atoms are fields, molecules are view modes, organisms are views themselves! Eureka!!
Questions that may be teeming in your brain:
- What is this Pattern Lab you speak of and what can it do for me?
- What directory structure or naming conventions are required?
- How can I affect the Drupal markup (custom classes) to match my pattern markup?
Relax, it’s not magic. We’ll answer these questions and more.
In our session, we will:
- Give you a brief overview of Pattern Lab
- Walk you through integrating Pattern Lab with your theme
- Demonstrate proof-of-concept: we'll modify some Pattern Lab templates and see those changes immediately on the Drupal site!
"Why go to all this trouble?", you might be asking yourself. We believe the strength in this approach is threefold:
- All the markup is belong to us: once again we can write the markup as we want it; no more divitis (you're welcome, Morten)!
- Two birds, one stone: the Pattern Lab version is visually identical to the Drupal version, and therefore can be used for client approval prior to site development
- Theme it once and done: no "negotiating" Pattern Lab's markup with Drupal's
This session will be fast paced and fun, and we guarantee you'll leave with a new sense of what's possible in Drupal 8 front-end development and beyond!