Pattern libraries in Drupal 8


zakiya on drupaltwig.slack.come Drupal since 2007 Chapter Three since 2015

Might not know as much as you – only touched them two months ago

Slides will be posted:

Use cases - company with multiple digital assets, large sites, projects with strong branding guidelines, and any project with the budget

Pattern Builders, older: SassDoc, Fractal, Astrum

Brad Frost

Gatsby style guide - for React

Atomic Design Components


Drupal + Pattern Library projects

but most people are making their own

five pattern lab starter kits.

Zakiya uses drupal pattern lab standard

Editions Starterkits Plugins

Use Pattern Lab’s Drupal Standard Edition

On installation, make sure you merge files

Use plugins as desired.

Whichever approach, more work than standalone theme.

Make sure no other themes/modules use the same namespace as yours

Two approaches: Drupal is the source of Truth. Pattern Lab is the source of Truth- that’s more common, and Drupal consumes the files, using components module,

Only one still standing is UI Patterns module

Agnostic about which library you use

Can turn over some of the pattern work to site builders.


Chapter Three hasn’t found a really good use case

Pattern Lab on its own: config, core, public, source, vendor directories.

Responsive tools

{% include “@atoms/01-global/00-a-menu-demo.twig” with {title: %}

is how you bring specific templates, identical as the pattern library, into Drupal.

Hard (well, tedious) problem #1: creating .json and/or .yml files (Pattern Lab accepts both) with dummy data.

She remains very into the value module.

[proxy_fcgi:error] [pid 25705:tid 139678627911424] [client] AH01071: Got error ‘PHP message: Uncaught PHP Exception Twig_Error_Loader: “Template “modules/contrib/ui_patterns/templates/pattern-tile.html.twig” is not defined.” at /var/www/drutopia/web/modules/contrib/ds/templates/ds-entity-view.html.twig line 10\n’

until i renamed patterns/tile/pattern-tile--node.html.twig (which is a recommended template name) to patterns/tile/pattern-tile.html.twig.