Thumbnail

Emulsify - the Drupal Theme style guide

Thumbnail

Feb Dao

|

In the previous articles, I have introduced to you the concept of Style Guide and its importance and meaning for web programming in the current period. In this article, I will introduce a specific application with Drupal, a very popular CSM to create a website from basic to complex

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

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Comments

  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word