README

Share Pattern Lab's custom twigs functions, filters and tags with Drupal 8. Huzzah!

Getting Started

Simply add to Drupal and enable the Unified Twig Extensions module on the admin/modules page to get started.

Note on Paths

Note: currently looks for compatible extensions in your current active D8 theme path + either the 'pattern-lab/source/_twig-components' or 'source/_twig-components' folders. @TODO: allow users to customized / override this!

Included Examples

I'm including a couple example twig extensions to add to your existing Pattern Lab-enabled theme to get started:

1. example/_twig-components/functions/link.function.php --> example of having Drupal ignore a PL Twig extension given the link function already exists in Drupal.

2. example/_twig-components/tags/grid.tag.php and example/_twig-components/tags/cell.tag.php --> example of a custom Twig tag that abstracts away some of the markup involved in an ITCSS-based grid system.

To test this out, try adding these two custom Twig tags to your theme's existing _twig-components folder and try adding the following HTML (to both PL's twig templates and/or a Drupal template):

{% grid 'o-grid--large' %} {% cell 'u-1/1 u-1/2@small u-2/3@medium' %} Grid cell {% endcell %} {% cell 'u-1/1 u-1/2@small u-1/3@medium' %} Grid cell {% endcell %} {% endgrid %}

Everything should be working as expected if you don't encounter any errors and the following HTML gets output (rendered of course):

<div class="o-grid o-grid--large"> <div class="o-grid__item u-1/1 u-1/2@small u-2/3@medium"> Grid cell </div> <div class="o-grid__item u-1/1 u-1/2@small u-1/3@medium"> Grid cell </div> </div>