What is Patternlab? Patternlab is a UI design system that helps to build and maintain websites. The biggest advantage of using such system is that it fills the gap between developers and creates a universal library of components that everyone uses. In other words, instead of every developer builds their pages the way they like there is a centralized library where they either take elements or contribute to it and then use them. Patternlab provides a framework for building components. They are: Atoms (example: lists, form elements, tables) Molecules (example: cards, menus) Organisms (example: card grids, accordion) Templates (example: two-column layout, full-width layout) Pages (example: homepage, blog listing page) Drupal integrations Because both Patternlab and Drupal 8 can use twig as a rendering engine it is possible to build a theme to be based on Patternlab’s components. Most notable projects in Drupal are Emulsify ( ) by Four Kitchens and Bear Skin by Zivtech ( ). https://github.com/fourkitchens/emulsify https://github.com/zivtech/bear_skin/tree/8.x-2.x The way integration works is that in Drupal templates there are includes of Patternlab’s templates. This makes all development happen in Patternlab’s library and then the theme simply includes proper templates in proper places. Example . https://github.com/fourkitchens/emulsify/blob/develop/templates/navigation/breadcrumb.html.twig { {% %} # /**
 * * Theme override for a breadcrumb trail.
 *
 * Available variables:
 * - breadcrumb: Breadcrumb trail items.
 */ @file #} include "@molecules/menus/breadcrumbs/breadcrumbs.twig" Visual Regression Testing It makes very easy to apply visual regression testing to Patternlab’s demo site. For example, you can do it with BackstopJS and commit screenshots to the repository itself. Also, we made it easy to be done with Diffy -- you simply need to provide a URL of the static site and Diffy’s crawler will get pages based on the JSON available to the static site’s generator. We pull: Page with all atoms Pages with all molecules, organisms, templates, and pages In this way, in just a few minutes you will have a full visual snapshot of your components. So whenever you make any changes it is easy to see if any regressions were introduced.

Visual Testing of Patternlab and Drupal

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

7 Tips to Fortify Your Drupal 7 Website’s Security

Contributing to Drupal Codebase; A practical guide for Drupal Babies.

Is Drupal the David that brings down the Goliath of WordPress?

Drupal vs. WordPress: Which CMS Platform is Better?

Front end journey into Drupal + Pattern Lab

Guide to 24 PHP Frameworks [Part 2]

7 Tips to Fortify Your Drupal 7 Website’s Security

Contributing to Drupal Codebase; A practical guide for Drupal Babies.

Is Drupal the David that brings down the Goliath of WordPress?

Drupal vs. WordPress: Which CMS Platform is Better?

Front end journey into Drupal + Pattern Lab

Guide to 24 PHP Frameworks [Part 2]

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps