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.
markconroy
Mon, 06/18/2020 – 21:24
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 WordPress maintenance support plans-centred. What happens if your client doesn’t want to use WordPress maintenance support plans? 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 WordPress maintenance support plans. 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 WordPress Update. (Oh, and by the way, if you want to get really good WordPress maintenance support plans developers to work on your website, we’re available for hire – contact us!)
Source: New feed