Getting Atomic with Pattern Lab

Who am I?

Aaron Froehlich

Technical Lead, ILR School at Cornell
a-fro (d.o)
a-fro.com
@aaronfroehlich
aaronf@cornell.edu
Husband, father, builder

Who am I?

Aaron Froehlich

Technical Lead, ILR School at Cornell
a-fro (d.o)
a-fro.com
@aaronfroehlich
aaronf@cornell.edu
Husband, father, builder

Where are we going?

Just to say a little bit about my experience with Pattern Lab. I had started playing with Pattern Lab in Drupal two years ago, just before Drupalcon Baltimore. While there, I attended the component based training that Forum One put on as well as Evan Lovely's session on their use of PL at Pinterest. I also started talking more with Evan Willhite from Four Kitchens. The enthusiasm I witnessed not only got me really excited about PL, I was also quickly able to leverage Emulsify, which is the Drupal theme that 4K created and probably the most popular theme currently in use by the community. Since then, I've built 4 or 5 Drupal sites with PL, though frankly, my time and energy has been stretched too thin and I feel like I still have a lot to learn. The last time I gave this talk, we were working hard to hire another developer. Thankfully, he joined our team last month, which will give us a lot more time to focus and improve our processes. The last thing I'll mention before diving in is that I feel like best practices are still emerging. With any technology, there are a lot of different ways to solve a given problem, and I still find it hard to figure out when and why to choose "a" over "b", or vice-versa. I'm hoping that the Umami Pattern Lab we'll look at today could become a project that the community of folks who are doing PL might come together to use as a sandbox and explanation of options which could lead to clearer definitions of best practices.

You are here

Search for the Holy Grail

Where have we been?

Cascading styles!

Enter…

PHP… CMS… MVC… Templating… jQuery…

Responsive!

Evolution towards complexity, specialization and efficiency

Where are we now?

From pages..

...to patterns

...to systems

“A set of objects governed by rules.”
who said?

—Aaron Froehlich

How do we solve these problems?

Existing projects - Interface inventory

New projects - Styleguide

Demo Umami Quicktour

Umami

Enter Pattern Lab

patternlab.io

Umami Pattern Lab

Enter Drupal

What gets rendered?

fields
nodes
blocks
views
forms
entities (i.e. paragraph bundles)
layouts
media

Theme Render Pipeline

Theme Render Pipeline with Pattern Lab


  
    
      {{ see next slide}}
    
    
      {{ banner_title }}
      
        {{ banner_summary }}
      
      
        {{ banner_link_text }}


  {% if banner_img_src %}
    {% include "@atoms/04-images/00-image/responsive-image.twig" with {
      "img_src": banner_img_src,
      "img_alt": banner_img_alt,
      "output_image_tag": banner_image_output_image_tag,
      "responsive_image_base_class": 'image',
    } %}
  {% endif %}

{# @see core umami theme template for block--bundle--banner-block.html.twig #}
{% set banner_img_src
   = content.field_banner_image.0['#item'].entity.uri.value %}

{% set link = content.field_content_link|field_value[0] %}

{% include "@molecules/recipe-banner/recipe-banner.twig" with {
  "banner_image_output_image_tag": TRUE,
  "banner_img_src": banner_img_src|image_style('scale_crop_7_3_large'),
  "banner_img_alt": content.field_banner_image.0['#item'].alt,
  "banner_title": content.field_title|field_value,
  "banner_summary": content.field_summary|field_value,
  "banner_link_url": link['#url'],
  "banner_link_text": link['#title']
}%}

Where do I make my pattern again?

fields · nodes · blocks · views · forms · entities · layouts · media ·

Examples

Further Resources and Frontiers

Drupal Twig Slack: https://drupaltwig-slack.herokuapp.com
Emulsify.info
Mark Conroy's blog: https://mark.ie
My blog: a-fro.com
Bolt Design System - PL with webcomponents