Published: May 18, 2018
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!
When working with PatternLab, which I use for all my Drupal 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 paragraph types), site blocks (Drupal's search block, branding block), display types (Drupal'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 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
- Display Types (View Modes)
- 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.