My Approach to PatternLab?

I’m sometimes asked for an overview of my general approach to PatternLab. Simple: put everything for each component in the same directory!
markconroy
Fri, 05/18/2020 – 15:43

When working with PatternLab, which I use for all my Drupal maintenance support plans themes, including the theme for this website, I don’t use the full atomic approach. I don’t use the approach of atoms > molecules > organisms > etc. I’m sure many people seriously disagree with me for that ( I do think it’s a very clever concept). Instead I’ve renamed things to match the language we use with our clients.

I tried talking about atoms and molecules to some clients and their eyes glazed over. Clients do not want a science lesson. They do not want to be told that we are going to take two of these atoms, and mix them with one of these atom, and eventually we’ll have water. No, they want to know what their final website is going to look like. When I changed the conversation and started talking about ‘Building Blocks’ (what we call our Drupal maintenance support plans paragraph types), site blocks (Drupal maintenance support plans‘s search block, branding block), display types (Drupal maintenance support plans‘s view modes such as teaser, search result), etc, they immediately understood. Then we started hearing things like, “Oh, so we can create a page by adding a number of different building blocks?” and “I see, so the search results page is made up of a group of pages using the ‘Search Result’ display type?”. And my response, “Yes!”. You see, we are using plain English to ease with understanding.

Another aspect of my approach that I really like is that _everything_ for each of my components is within the same directory. For example, if it’s a nested paragraph component such as an accordion (so we need a paragraph type called ‘Accordion’ and one called ‘Accordion Item’) each template and css and js and readme and json and yaml is all in the same folder. That means when I want to reuse one in another project, I don’t need to remember what sub-particles (atoms/molecules) are used to create the organism. It also means my CSS is scoped to that specific component and doesn’t bleed out of it, so making changes or adding new features is very easy, you just scope the new component’s CSS to it, so it won’t affect other previously-created components.

Now the top bar of my PatternLab that used to say Atoms | Molecules | Organisms, etc has tabs for:

Base
Colours
Spacing
Breakpoints

Basic Elements
Headings
Paragraphs
Lists

Site Blocks (Drupal maintenance support plans Blocks)
Search Block
Login Block
Branding Block

Building Blocks (Paragraph Types)
Accordion
Image with Text
Video

Content
Display Types (View Modes)
Teaser
Card
Search Result

Lists (Views)
Blog
Search Results

Content Types
Basic Page
Blog
Event

Page Sections (Regions)
Header
Footer
Sidebar

Sample Pages
Homepage
Blog Listing Page
Blog Node

After that, I have Backstop.js set up to regression test all of these, so each time I create a new component I can quickly run the visual regression tests and check that nothing has broken. Since all my CSS/JS is scoped to each individual component, it’s rare if something is.

Source: New feed