Drupal 8 Pattern Lab for Component-Based Theming

4 min

As the web design niche evolves, developers frequently face the necessity of using a more systemized approach to the creation of websites, instead of stamping web pages one after another in a non-specific order. A specific example of such a systematized approach is so-called atomic design, based on the atoms of web development: HTML tags that define input fields, forms, buttons, and other elementary components of the web interface (font types, colors, etc.). Atomic design allows developers to convert abstractions into unique, complex systems that are easily scalable and composed in one consistent style. This method makes the web development process more construction-based (we are building a site brick by brick, like Legos).

To implement features of atomic design, Drupal 8 features Pattern Lab, a static website generator. Let’s talk about it.

Pattern Lab: what is it?

Pattern Lab, as we mentioned above, is a static website generator that employs the atomic design methodology, helps to annotate patterns, and provides a basic set of tools to work with the patterns.

pattern-lab

The Pattern Lab working principle is based on the idea that atoms, which are included in the composition of larger molecules, form larger units, hence creating whole pages. When UI is designed with this principle, developers aren’t obliged to make a multitude of customizations if changes need to be made to some of the patterns (basically, the update takes place automatically in all the places this pattern was used).

Why use Pattern Lab?

Well, to answer that question, let’s take a look at the main advantages of creating component-based themes with Pattern Lab:

  • Pattern Lab helps to fully decouple design from an application on Drupal.

  • Developers and designers save time on making corrections in projects.

  • Despite an ever-increasing number of components (an unavoidable process during scaling), Pattern Lab allows users to adhere to one specific frontend style.

  • The product built with the help of component-based Drupal theming is much more accessible when it comes to testing, as modules comprising the frontend won’t depend in any way on the contents of the connected DBMS.

Which tasks can Pattern Lab solve?

Now we will discuss some particular tasks and cases where Pattern Lab can be exceptionally helpful.

Optimization of dynamic data manipulation

An important attribute of Pattern Lab is its ability to optimize dynamic data manipulation. In order to understand whether the created user interface patterns will fit the dynamically-updated content or not, Pattern Lab uses JSON/YAML/Markdown/etc. data. This alternative allows it to separate the pattern structure from its contents. This, in turn, explicitly demonstrates the DRY principle, according to which developers should focus all their effort on creating universal patterns that fit any content. Moreover, if you need to make corrections within the pattern itself, it won’t require you to update each and every implementation (all this happens automatically). Pattern Lab's capabilities also mean you won’t have to additionally load a separate CMS to simply demonstrate several frontend variations to a client.

The creation of pseudo-templates

The next useful thing Pattern Lab is capable of is the creation of pseudo-templates. If web developers previously had to generate every possible frontend option in a static way (which took a lot of time, i.e. more client money), with Pattern Lab, you can forget about these cumbersome processes. Demonstrate all the possible content variations while saving time and money.

Decoupling

Pattern Lab helps backend developers, too. In particular, the developers get frontend access (without interfering with the designer’s work), through which they can simply define which elements are dynamic (and need to be exported to the server).

In this manner, we can conclude that Pattern Lab separates the structure and data. This allows everyone possessing a sufficient server development competency to manage any module in the system with the content attached without risk, while backend developers can focus on the system’s architecture design.

An ability to ‘jump into’ code

Pattern Lab allows users to view the basic HTML code of the pattern, as well as the pattern code used for the generation of HTML. It also allows users to display the CSS and JavaScript code. This supports the formation of a single coding style during interface creation for all patterns. In order to configure some of the components, you only need code to enable a certain pattern from a library.   

Tools for adaptive web design creation

Pattern Lab has a very interesting tool, Ish., which allows you to view interfaces and their consistent patterns in several different resolutions. This is an irreplaceable assistant for web designers that strive to thoroughly test each created interface on as many gadgets as possible.

Annotations

Last but not least, Pattern Lab helps to describe patterns (in particular, it provides multiple ways to add pattern description and design system annotations). To add a description, you will need a Markdown file with a name corresponding with the name of the pattern.

The role of Twig in working with Drupal 8 and Pattern Lab

Generally speaking, Pattern Lab can’t work with Drupal 8 independently. In order to employ all of the advantages of Drupal Pattern Lab and start theming using the atomic methodology, you’ll also need Twig - a fast and secure solution for the building of templates created by the Sensio Lab team (although we should note that an original version of Twig also required Mustache Templates). With the help of this PHP template creating tool, you get the ability to work with a single project (via Twig instructions) instead of two, as was characteristic in the previous version of Drupal

How to connect Pattern Lab to the project on Drupal 8

As a matter of fact, there are a multitude of ways to connect Pattern Lab to Drupal you can choose from. We prefer the one called Emulsify. Here are several ways you can use it to connect the website generator (particularly, employ Node Version Manager, the streaming build system Gulp, dependency manager Composer and, optionally - the dependency management tool Yarn):

  • Quickstart/Emulsify Standalone:

    • To connect Pattern Lab with the help of NPM, just enter the following command: composer create-project fourkitchens/emulsify:^2.0 --stability dev --no-interaction emulsify && cd emulsify && npm install

    • Similarly, to do this via Yarn, enter another command: composer create-project fourkitchens/emulsify:^2.0 --stability dev --no-interaction emulsify && cd emulsify && yarn install

    • Drupal-specific installation:

      • First, enter the command: composer require fourkitchens/emulsify

      • Then, define dependencies and components with the help of the command: drush en emulsify components unified_twig_ext -y

      • Next, enter the command (optionally): drush emulsify "THEME NAME" (in addition, you may need to enter the command: drush cc drush. In order to clean the cache also, enter the command: drush help emulsify in order to see all other available action options)

      • Finally, enter npm install or yarn install

    Notice: these instructions may be useless if you’re working with something other than a Composer-based Drupal install downloaded from the official Drupal website.

    If you implement all of the above steps correctly, your Pattern Lab installation will be successfully finished!

    Component-based theming with Pattern Lab: summary

    To summarize, the Drupal pattern library is one of the best solutions for the implementation of the atomic design concept on the market. If you want to build a scalable and easy-to-test project that will allow your developers to put it together in the shortest time possible, you should definitely consider Drupal 8 Pattern Lab!

    Don’t have your own dedicated team of developers? Not a big deal, we will help you! We have created several dozen projects based on Drupal 8, and have completed and launched them to the full satisfaction of our clients. We can implement your idea with an high level of professionalism and quality!

Want to work with us?