DrupalCon New Orleans 2016: The Big Easy: Streamlined Front-end Development
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!
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!