The Big Easy: 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 nearly 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:
- How do I install Pattern Lab?
- What sort of pattern directory structure is required to match Drupal’s?
- Are there naming conventions that facilitate the process?
- How can I affect the Drupal markup (custom classes) to match my pattern markup?
Relax, it’s not voodoo magic. We’ll answer these questions and more.
In our session, we will:
- Show you how to install Pattern Lab
- Let Pattern Lab share your theme's CSS
- Create some patterns based on a PSD mockup and theme them
- Build out the mockup in Drupal
- Add the custom (using BEM/SMACSS of course!) classes we used in creating our patterns via the Drupal UI
- Preview our completed site!
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!
- 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: minimal or 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!