Pattern libraries in Drupal 8
zakiyadesigns
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:
designsystem.digital.gov ux.mailchimp.com/patterns/typography
starbucks.com/static/reference/styleguide
Use cases - company with multiple digital assets, large sites, projects with strong branding guidelines, and any project with the budget
- Kind of fun
- More moving parts, more points of failure
- Drupal devs need to be more accessibility-minded than usual (?) - Drupal takes care of a lot, which you lose using
- If used properly, better brand control
- More hours, more $$
- Designers encouraged to think in components
- Less chance a one-off element has to be specially developed.
Pattern Builders, older: SassDoc, Fractal, Astrum
Brad Frost
Gatsby style guide - for React
Atomic Design Components
atoms
Drupal + Pattern Library projects
- Bear Skin
- emulsify
- Gesso
- KSS Bootstrap
- Particle
- etc
but most people are making their own
five pattern lab starter kits.
Zakiya uses drupal pattern lab standard
- Opinionated
- Daunting if you don’t understand underlying technologies
- Lots of moving parts like npm, yarn, yeoman, composer, gulp, webpack
- All have a learning curve
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.
(Yay!)
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: menu.name %}
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 192.168.42.1:60982] 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.