You can download and use Emulsify here: https://github.com/fourkitchens/emulsify

Emulsify = Pattern Lab + Drupal 8 theme

The above formula partly demonstrates what it is. It is a Drupal theme with Pattern Lab built-in, we can easily create a live style guide for a website built by Drupal 8. With the specific features as below:

Calling a Component in Drupal

From Drupal Twig template files from templates directory, you can use the function {% include ... %}, {% extend ... %} and {% embed %} of Twig to call a Twig template file from the Pattern Lab, for example:

{% include "@organisms/path/to/file.twig" %}

Atomic Design structure

This is really useful when one can use atomic design structure (re-read my previous article on this concept): atoms, molecules and organisms... In general, field is equivalent to atoms, nodes. Parasites are equivalent to molecules and views, paragraphs is equivalent to organisms.

Variable transmission

One of the biggest values of using Emulsify is that it is possible to reuse the template from the Pattern Lab in conjunction with the variable transmission - data retrieved from Drupal's database for easy visualization on the website, for example:

{% include "@atoms/02-text/00-headings/_heading.twig" with {
    "heading_level": 1,
    "heading": title,
} %}

or more complicated like:

{% include "@molecules/info-box/info-box.twig"
  with {
    "infobox_title": content.field_paragraph_info_box_label,
    "infobox_text": content.field_paragraph_info_box_text,
    "infobox_link": content.field_paragraph_info_box_link.0['#url']
  }
%}

Or

{% embed "@molecules/card/01-card.twig"
  with {
    "card_title": label,
    "card_body": body,
    "card_link_text": content.field_link.0['#title'],
    "card_link_url": content.field_link.0['#url'],
  }
%}
  {% block card_img %}
    {{ content.field_image }}
  {% endblock %}
{% endembed %}

The special functions are exclusively used in Drupal, filter and tags

Drupal has special functions, filters and tags... Pattern Lab has an easy way to add these inside the components/_twig-components/ directory. There are few filters and functions already added inside it, for example t(), without(), kint()... We can learn how to add special functions and filters to the Pattern Lab at the following link: https://github.com/pattern-lab/patternengine-php-twig#extending-twig-further

In conclusion

Emulsify is the easiest, simplest and fastest way for us to use Pattern Lab with Drupal 8, which provides maximum support and minimal time for a Front-end developer to embark on creating themes and Style Guide