Earlier this week, Brad Frost (@brad_frost) launched a new website for Pattern Lab. It goes into detail regarding what atomic design is and what you'll get out of using Pattern Lab. We've had a few features waiting in the queue for a while so it also seemed like a good idea to put together a new release of the PHP version of Pattern Lab. While all of the changes are listed in the CHANGELOG I'm going to highlight a few of the key features below.
Annotations for Your Patterns
Annotations are a feature that's been promised since the first release so it's great to have them finally out there in the wild. Annotations are related to elements within a pattern rather than being specific to a pattern. This means that annotations work in a very similar way to selectors in CSS or jQuery. Hopefully this leads to power and flexibility. I would expect that annotations will be used to explain to clients how certain parts of the page work.
The best pattern in the demo to try out annotations on would be the header organism. Just click the "eye" icon in the top right, select "Annotations," mouse over the logo, and click. Annotations will work on the list views as well. Also, check out the documentation for adding annotations.
Code View & Pattern Lineages
Code view and pattern lineages are also new features. With code view you can now copy & paste the rendered code for a pattern right from the Pattern Lab site. With pattern lineages you can now get an idea of what patterns make up another pattern. You can also click on them to view those patterns.
One pattern that you can test out code view and pattern lineages on is the block hero molecule. Note: There is currently a small quirk with styling on longer code view blocks. It'll be addressed shortly.
Your Media Query Widths in the UI
Early on in the development of Pattern Lab we got a great suggestion from Ben Edwards called "Phases". This feature has now been released as the "MQs" list in the Pattern Lab toolbar. Essentially, on generate, Pattern Lab scans your CSS for media queries. It then saves them and puts them in the UI. This way you or your clients can review the design at your expected breakpoints.
Because Pattern Lab is pre-processor agnostic we can't get all fancy for naming the breakpoints but maybe, if there's interest, we can look at setting up a syntax that we could use with comments that are saved in CSS similar. This might work in a similar way to KSS.
Node.js Version in the Works
While anyone who uses Pattern Lab shouldn't have to worry about touching the PHP guts of the builder I know their are probably a lot of folks who want to see a Node.js-based builder. Well, Brian Muenzenmeyer (@bmuenzenmeyer) is doing just that. It's still early days but I'm sure he'd welcome help. The PHP version of Pattern Lab will continue to be the reference implementation.
We're Still Not Done
While we've worked through most of the features we initially wanted it seems like the ideas keep coming faster than we can implement. The "open issues" list attests to this. These are the items I want to implement sooner rather than later:
- Re-organization for Easier "Upgrades": With this release of Pattern Lab we realized that upgrading isn't a clean process. We're going to reorganize things to get some of the core Pattern Lab stuff out of
source/. - Support for KSS: In an effort to create a more robust style guide we're exploring implementing KSS. That way you could organize and document your styles in CSS/SCSS/LESS and then have that data show up on the Pattern Lab site. I also think it might make styling patterns more flexible. Read up on it in the open issue.
- More Flexible Pages: Right now we expect that when you create a Page you essentially copy and paste from a Template. Then you add a JSON file to add custom data for the Page. In the future we'd like to see Pages defined almost exclusively from the JSON file. Update the related Template? Shows right away. Want to show different states for one template (e.g what a page would look like with an emergency banner)? Add flags to the JSON. Read up on it in the open issue.
As always, we're striving to make Pattern Lab more powerful and flexible.
We Still Want Your Feedback
We still want to hear from you. What works and what doesn't work for you when using Pattern Lab? Got an idea like Ben's? Share it and we'll see if we can make it work. Run into any problems? Let us know. Use Pattern Lab internally or with client work? We're always curious to hear about real-world use. Just drop an issue for us and we'll respond.