Published: June 18, 2018
PatternLab: Your Clients Don't Need a Science Lesson
Let's revisit my recent post and see if we can come up with more user-friendly names for PatternLab items.
My Approach to PatternLab recently got quite an amount of discussion on Slack and other places about PatternLab and naming conventions, especially the line "Clients do not want a science lesson". In that I set out my current naming convention like so:
- Basic Elements
- Site Blocks
- Building Blocks
- Content
- Sample Pages
While generally appreciated, some people criticised it for being too Drupal-centred. What happens if your client doesn't want to use Drupal? What happens if you want to use the same PatternLab instance for an app on Android or iOS? Good questions, and they got me thinking more. A number of people on Slack recently have been asking about what naming conventions besides the atoms > molecules > organisms one people have been using.
I had a verrrrry long chat (over 3 hours) with some developers from outside of my work place to see what what naming convention(s) might make sense, be easy for clients to understand, and allow enough scale to be used outside of Drupal. Here's what we came up with:
- Utilities
- Items such as utility classes like .visually-hidden or .padding-top
- Base
- Items such as colours and fonts
- Elements
- Low level elements such as headings, paragraphs, basic lists
- Components
- High definition components such as a teaser view mode, an embedded video component, a list of teasers
- Layouts
- General layout classes for the different page designs - with sidebar, without sidebar, etc
- Mock-ups
- Rendered 'pages' or other UI interfaces
- We shied away from 'Pages' here because not everything might be a page, such as a login screen on an iPhone app
I'm quite happy with those naming conventions and think I might start porting some of them to my work at Annertech. (Oh, and by the way, if you want to get really good Drupal developers to work on your website, we're available for hire - contact us!)