Frontend Architecture for Design Systems

Chapter 16. Pattern Libraries

In case you haven’t come across Brad Frost’s Atomic Design principles, let me give you a quick introduction. They will without doubt change the way that you look at a website design, so you should take a much deeper dive into them when you get a chance.

Atomic Design is a methodology used to construct web design systems. Instead of designing entire pages one at a time, Atomic Design starts by breaking down commonly used elements into different sized patterns, and describes a process for combining these building blocks back together until we form an entire page. The smallest of these patterns, the element that cannot be broken down any further, is called the atom.

Atoms are the basic building blocks of our websites, composed of headings, list styles, images and videos, and form elements.

Just like atoms in nature combine to create things more complex, Atomic Design combines multiple atoms into molecules. A molecule might represent a search form, a media block, or a navigation system.

In the same way that molecules are created from combinations of multiple atoms, an organism comprises multiple molecules in order to create a “distinct section of an interface” like a blog article or comment.

Lastly, we create templates, which represent the combination and layout of multiple interface elements on a single page, including navigation, content, and footer elements.

What Is Pattern Lab?

Now that Atomic Design has equipped us with a methodology for creating ...