Pattern Lab

Pattern Lab
Pattern Lab

Pattern Lab is a refreshing way of approaching webpages through atoms, molecules, organisms, templates and pages.

In his presentation at Beyond Tellerand, Brad looked in detail at the elements that make up a typical website. A website is made up of pages, those of elements, those element of items, and those items of atomic parts.

For example a blog post page contains a search box, navigation (both primary and secondary), page content, listing of related articles. Within that there are input boxes, and buttons, list elements and links, blockquotes, and paragraphs. Within those there is also






, font-size etc etc.

This Pattern Lab can be downloaded from GitHub and used as part of your existing or new projects.  Better yet it also offers you the ability to resize the viewport the elements are contain in to see how the items behave across defined breakpoints.

Breakpoints & Viewports

Speaking of breakpoints the Pattern Lab helps us focus on viewport widths rather than specific device widths. We’re not looking at iPad, iPhone, Galaxy Tab type widths, but instead XS, S, M, L as well as a “Random” button that might help with those inbetween bits.

  • Resource Name

    Pattern Lab

  • Resource Creator

    Brad Frost


Pattern Lab, a collection of tools for creating design systems.

View on Github Download Resource

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.