Create atomic design systems
What It Is
Pattern Lab is a collection of tools to help you create atomic design systems.
Static site generator
At its core, Pattern Lab is a custom static site generator that constructs an interface by stitching atoms, molecules, and organisms together to form templates and pages.
Pattern Lab serves as your project's pattern library and frontend style guide, but you're simultaneously able to see components abstractly and in context.
Pattern starter kit
Pattern Lab provides a whole slew of patterns just to get you started. Don't use them all. You should use Pattern Lab to create your own atoms, molecules, organisms, templates, and pages.
It's our job to make sure our designs look and function beautifully across a whole slew of Web-enabled devices. Pattern Lab provides a robust viewport resizing tool to help you create great designs across all screens.
Pattern Lab provides a way to annotate your interface to better communicate design and development decisions to clients and team members.
Auto Refresh Tool
Pattern Lab can reload your browser automatically whenever you save changes to patterns, images, CSS or anything in your project. Make a change and see the results instantly.
Page Follow Tool
Testing across multiple browsers and devices is tedious. Page Follow streamlines the development process by syncing navigation from one browser with any other browser connected to the same Pattern Lab site.
What It Ain't
Pattern Lab doesn't give you all the answers.
A UI framework
Pattern Lab isn't Bootstrap. It's not Foundation. It's not flat. It's not skeuomorphic. We've got nothing against UI frameworks, but that's not what Pattern Lab does. How it looks and how it's coded is entirely up to you.
Pattern Lab is designed to be flexible with regards to naming and structure. There's really no One Right Way to do this, and we think that's just fine. Name things as you please, and we'll leave the hair-splitting out of things.
Build systems, not pages.
The need for modularity
Component-driven design has been around for a long while now, but it's become imperative to think now that the Web landscape is so much more complex. It's essential to consider how every thing you include in an interface looks and functions across a whole slew of browsers, devices, and environments.
A better workflow
Anna Debenham explains how pattern libraries create a shared vocabulary between disciplines, make testing easier, and builds a canonical reference to keep coming back to.
Tiny Bootstraps, for Every Client
In this responsive age, our responsive deliverables need to be more than an ad hoc collection of pages. Give clients a custom design system with which they can modify, extend, and grow with into the future.
Get up and running with Pattern Lab and see how things are organized.
Working with Patterns
Learn how to create and include atoms, molecules, organisms, templates, and pages.
Working with Data
Learn how to replace default placeholder content with real representative content and data.
Learn how to set up page follow and auto-refresh to streamline your workflow.
Pattern Lab serves as a hub for your web project.
Pattern Lab helps integrate modular thinking into the design process right out of the gate, and helps demonstrate responsive patterns to create.
Visual designers can use Pattern Lab as a way to see how each module works in a responsive environment and also to keep track of all the design's raw materials.
Pattern Lab provides developers with an efficient system for quickly developing prototypes and production-ready front-end code.
Clients and managers
Everyone, not just designers and developers, needs to understand the benefits of crafting a design system. Clients and managers can view the project in the browser, as a review, and as a reference.
One URL to Rule Them All
Pattern Lab should live in an environment accessible via a URL where everyone involved with your project can view the design system. Pattern Lab can serve as a hub for your project, so make sure it's accessible.
Share Your Results
Optionally (and ideally) your Pattern Lab can be published publicly like other style guides created by Starbucks, The BBC, and The Guardian. This project wouldn't exist if these organizations didn't share their knowledge and approach. Help makes things better by sharing your Pattern Lab.