---
title: "Pattern Lab with Drupal"
date: "2019-04-10T06:23:38+00:00"
summary:
image:
type: "article"
url: "/acquia-cloud-platform/help/89301-pattern-lab-drupal"
id: "d34b30b6-4123-468f-9c8e-2beacf12a0ad"
---

Table of contents will be added

### Pattern Lab with Drupal CMS

#### What is Pattern Lab?

As we encounter many frameworks and languages around us, we observe some of the basic "object oriented" and "design patterns" principles and rules being implemented.

For example, there's inheritance, which is inheriting the property of one component or module and extending it, making it reusable across our application. "Decoupled" architecture is another principle, where in each component is independent of other components and can be used individually, with its specific set of features. Decoupled follows a [component based architecture](https://medium.com/@dan.shapiro1210/understanding-component-based-architecture-3ff48ec0c238) like [React](https://reactjs.org/) does.

Taking these principles and architecture into account, many of our front end engineers see a rising need to follow an [atomic design](http://atomicdesign.bradfrost.com/chapter-2/) approach for a well-structured definition for each component.

![Abstract diagram showing a progression from a circle with a dot, to interconnected circles, then a dotted square, and finally overlapping squares.](https://acquia.widen.net/content/a505c7bf-f076-4b04-91ce-47ee3c011561/web/url_0b2961008d40cc9ba8d9c7da5083340e.png)

_Pattern Lab Structure_

Why use Pattern Lab with Drupal?
--------------------------------

The [Drupal CMS](https://www.drupal.org/) is often used to build across websites with complex architectures. When it comes to front end architecture, the [Twig](https://twig.symfony.com/) template engine is used, which makes it easy to manipulate the variables and the Drupal HTML DOM structure as such.

Though we are using the Twig templating engine, along with JS and css being created for each of them, there is one thing that a developer from another a component platform will definitely need to consider: Although we are using each of them differently, are we categorizing each of them differently on the basis of component-based architecture?

For example, if we are creating an accordion, we will use the variables in the appropriate Twig template and pass the javascript and css in the appropriate folder with appropriate filenames, like the ones shown below.

Drupal without Pattern Lab Architecture
---------------------------------------

In the below diagram we see a simple frontend architecture with simple Twig, css, and javascript. This does not follow the modular approach of having small reusable components within the application.

![Flowchart showing a hierarchical file structure with one main folder, three subfolders, and three documents connected by arrows.](https://acquia.widen.net/content/a17d0192-77cc-4150-8460-dfdcd40a08e5/web/url_118ab91d1637ea1789437b701af83afa.png)

Drupal with Pattern Lab Architecture
------------------------------------

In the case below we have a patterns folder with "atoms," "molecules," and "organism," where the atom folder has an "arrow" component which will be called inside the "accordion" component which is a molecule, and in turn the whole accordion is inherited inside an organism.

![Flowchart illustrating a hierarchical folder structure with documents branching from three main folders, showing file organization.](https://acquia.widen.net/content/2e8d642a-7009-49a1-a54d-4db132fb9ad4/web/url_82c6dca13cd687ba57eb2481cc429eae.png)

Pattern Lab Structural Format.
------------------------------

Taking into consideration that we are designing a search bar with breadcrumb, let's see how we can accomplish this with our atomic design approach, where we will be taking a look at the detailed level for each component.

### Atoms

![Webpage interface with navigation bar, search box, and placeholder text under "Brevitus Incassum Quadrum." Includes options for content management and user account actions.](https://acquia.widen.net/content/507c55f8-72f5-438a-b5d4-30d27b35ceb3/web/url_fafd01aac799e6355dfb28b045fce72c.png)

### Definition

Atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include [basic HTML elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) like form labels, inputs, buttons, and others that can't be broken down any further without ceasing to be functional. - Brad Frost

In our case there are three atoms -- namely input element, search button, and breadcrumb -- which we will be making.

1) Input element

*   Input atom consists of input.json.yml , input.scss, input.twig file.
    

![File list showing three files: input.json, input.scss, and input.twig, with icons indicating different file types.](https://acquia.widen.net/content/773109b8-9fc5-493a-a801-3df8c56662ba/web/url_3aeb658c923763075e453e16f7e01fbd.png)

*   input.json contains the attributes object which is called in our Twig file, this attribute comprises the list of attributes available.
    

![Screenshot of a webpage with a blue header, search bar, and article titled "My snazzy and snappy new article."](https://acquia.widen.net/content/b07ec7ce-eef6-4a9d-9484-8cc790214349/web/url_3581079411d70cfd95b918ba98ce1cf5.png)

input.json  
  

![Administration page of Acquia Site Factory, highlighting "Update code" option under "Code management and deployment" for initiating a site update.](https://acquia.widen.net/content/61c7438b-abcb-4793-a567-04c72231ecbe/web/url_6d977c6cc2885e481cd0b5b1da3a11eb.png)

Input.twig

*   Input element Output inside atoms section-
    

![Admin panel screenshot showing Shield settings with enabled toggle, authentication message, and user credentials (admin/pass123) highlighted.](https://acquia.widen.net/content/cef9a064-810c-4892-beeb-05a60d3760a1/web/url_1a8f685c15feef92820538fea13ff231.png)

2) Search button

*   Search atom Comprises of button.sccs, button.json, button.twig
    

![Postman interface showing a response with status 204 No Content. Headers, status, time, and size details are displayed.](https://acquia.widen.net/content/9ee3c71e-e799-4175-b051-a203cf0f7ac9/web/url_13f7730993133e2e8bc6a2152e6e1707.png)

Button.json contains the button text value. which will be called inside the button.twig

![Website interface showing "Core REST" with an article titled "My snazzy new article" submitted by Anonymous. Options include search, read more, and add comment.](https://acquia.widen.net/content/99063361-5b8b-4fa3-8203-01d245174c5e/web/url_316a76dd607f18f9361ef29bc395b2bb.png)

button.json  
  

![Event webpage showing details for a presentation titled "Welcome" by Lynne Capozzi in the Rose Kennedy Ballroom, with start and end times.](https://acquia.widen.net/content/9bbe58ea-f5cb-4fcb-9b78-ad873ec6fecc/web/url_715e45bfa498ec4248d34f466a366e39.png)

  
  
button.twig

Button output inside atom section.

![Geometric logo with stacked blue hexagons inside a black outline, above the word "reservoir" in lowercase black letters.](https://acquia.widen.net/content/1bc8cf68-3b94-41a8-b620-5a4deafe6b9a/web/url_8d1e713769d527db2e65870145893168.png)

3) Breadcrumb

*   Breadcrumb component comprises of breadcrumb.json, breadcrumb.twig as such
    

![API tool interface showing a DELETE request with X-CSRF-Token in headers, including key-value pairs for authorization.](https://acquia.widen.net/content/677288b2-2ebd-43dd-9d6d-6db6682e9d34/web/url_576ecca397c25da99dcc09229979b5be.png)

Breadcrumb.json contains the list in array of "url" and "text"

Breadcrumb.twig contains the li tag list.

Breadcrumb output will be something like:

![Drupal 10.0.7 installation screen showing a six-step process. "Choose language" is selected, with "English" in a dropdown menu.](https://acquia.widen.net/content/d7a5a1db-d6b9-415d-b7f4-d0f8ed842678/web/url_5fb6b9fb09f1795dc718ea6dcb234c98.png)

  
  
These three will act as our basic atoms which will be further injected into our molecule

### Molecule

![Terminal screenshot showing installation logs and commands for Drupal and Drush tasks, including configuration imports and status messages.](https://acquia.widen.net/content/0b857210-71e1-4cef-8641-2dd6bc94251a/web/url_81103dc2d6b7abe45dfc151226db065c.png)

**Definition**

Molecules are groups of individual atom components and elements functioning together to achieve a components which will further be injected into a component which is organism.

For instance in our case if we need to merge two atoms which is a search button and form input field, then we will write a molecule so that we can reuse it in various templates, pages and other components.

  
In this case the code will be something similar to this:

![Confirmation screen for site creation on Acquia Site Factory, with a button labeled "Go to Site."](https://acquia.widen.net/content/5d289384-8b33-4141-acaf-b5a39d42be35/web/url_1b65d98f3c4a2af27230ed9dbb91419e.png)

From the code above we see we have a molecule having two atoms: one for button and another for the input text field. For the button atom we are passing a parameter named button\_search which is indirectly passing the text to the button atom.

The output will be something similar to this:

![Screenshot of a PATCH request in Postman, showing JSON data for updating an article with the title "My snazzy and snappy new article."](https://acquia.widen.net/content/da0a88fd-6a14-4383-948d-5c16b8434dc7/web/url_90d6889dffcc389de93185b50f54c3cc.png)

**Organism**

![Screenshot of a Postman interface showing a GET request with JSON response data, including links and a "value" key.](https://acquia.widen.net/content/9f6c1813-239a-4d56-ae37-7ada48005a58/web/url_f508b5059efcee6e9724be365a2a9c7f.png)

  

**Definition**

Organisms are defined with UI components combined with molecules or atoms or embedding other organisms into other organisms etc. We can have multiple organisms placed inside out templates or regions.

As we saw above, we are now creating some basic atoms and a molecule so if together want to combine those in general, we will achieve our organism composed of both molecule and atoms.

The above template denotes an organism with one molecule and one atom called in combined. That is a search-button molecule with a breadcrumb atom called in a single template, which further can be reused in other components as well.

The final output including a combination of atoms, molecules and organism will be something like this:

![Terminal window displaying commands and outputs related to file copying and site configuration in a Drupal project.](https://acquia.widen.net/content/dae829cb-d51b-45a7-9f55-ae20ede69784/web/url_242df3ca48f8b7b270e2fde2eada7a09.png)

Upon having these components ready, we can now use our organism, molecule and atoms into our "template.twig" files, as per the requirement.

Pattern Lab with composer in Drupal
-----------------------------------

The installation process with Drupal is pretty simple. In order to install the patternlab raw in Drupal, you need to clone the repo - [https://github.com/pattern-lab/patternlab-node#installation](https://github.com/pattern-lab/patternlab-node#installation)

In the main project folder Run

npm init -y && npx @pattern-lab/cli -c patternlab init

This will initialize a bare raw format of patternlab structure in your themes folder.

For more info -  [https://patternlab.io/docs/installation.html](https://patternlab.io/docs/installation.html)

Conclusion
----------

In general atomic design allows us to see our basic components broken down into various elements, and also by doing this it allows us to simultaneously step through how those elements join together to form our final full fledged usable component. The tight bond between the atoms, molecules and organism allows us to achieve component-based architecture in general.

### References

[https://patternlab.io](https://patternlab.io)