Spread the word! Pattern Lab 2 has finally been released after 2 and a half years of progress. While working for Brad Frost I have had the privilege of working on parts of this project for a little less than a year, including building out a few of the starterkits, assisting with the patternlab.io website redesign, and the PL2 demo. I’d first like thank Brad, Dave Olsen (the PHP PL man), and Brian Muenzenmeyer (the Node PL man) for allowing me to work with them on this. Without further adieu, here is what is so hip about Pattern Lab.
What is Pattern Lab?
Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles. It was originally created by Brad and Dave for PHP, but has since been transformed into Node thanks to Brian. From personal experience, it is a tool that really makes you think about what you are putting into your website instead of adding a random component or pattern here and there and really losing consistency throughout a site. Reusability is one of the great things with this system.
View All section of Pattern Lab
Dashboard Page built with compnents from above in Pattern Lab
What is new with Pattern Lab 2?
Lots of stuff, really. I’d say one of my favorite parts to Pattern Lab 2 is the ability to add documentation, something which has really increased in importance over the past couple years. You simply add a markdown file with the same name as the component and feel free to write whatever you want about the pattern, but I suggest the description of the pattern, explaining why you use it, and why it is important to the site/pattern library you’re creating or the client.
Annotations also add a great way to document each pattern.
Annotations and code displayed on Dashboard Hacked page
Other features include plugins that extend the ability of Pattern Lab, support of YAML in addition to the original JSON, and the power to use pseudo-patterns, pattern parameters, pattern states, and styleModifiers. Starter kits of tools also allow for a more comfortable experience while building your pattern library and/or website.
Finally, you can customize the skin of the actual pattern library as well as change the names of the atomic elements (i.e. atoms) to whatever works best for your company, client, or workflow.
Why use Pattern Lab?
- It’s FREE (Hooray!)
- It is a quick and thorough organizational tool that can help you not only build websites, but a pattern library itself.
- You can have components living and breathing in code within minutes rather than strictly writing comps over and over.
- It keeps your website consistent and decreases the amount of code you use with a reusability factor.
- PL2 is more than just a pattern library, but a great starting point to creating a style guide.
- It is customizable so one PL2 user’s site and pattern library can look totally different than another user’s site. Flexibility is key and can allow for a unique design instead of the same old website you see everyday.
- You can contribute as you find new ways to improve Pattern Lab from your personal experience.
- I’ve only been doing web design for about a year and I can use it efficiently. That is saying something.
Where to Download PL2?
You can download PL2 for free from the Downloads page on Pattern Lab’s website.