Originally termed and explained in a book by Brad Frost, Atomic Design is a process of designing using smaller pieces called “Atoms”. Then taking those building blocks and creating, “Molecules,” “Organisms,” “Templates” and “Pages” which are ever increasingly larger collages of their smaller components. By creating modular pieces of code containing HTML, Cascading Style Sheets (CSS) and Javascript you are able to efficiently build larger, more complex arrangements.

Patternlab is a system that helps you build user interfaces based on the principles of Atomic Design. Once set up you get a real picture of how your site will look and feel. You can use a starter kit loaded with your favorite framework like Bootstrap or you can start from scratch and build your own. Patternlab is great for prototyping or developing front-end code. Works with Twig, Drupal, Sass, etc., but you really can choose which set of tools you want to use.

Patternlab helps you to see how the design will interact with the content in a real world setting. You are able to see how a menu will work on a mobile phone in a specific browser. This also allows you to get a working template up and running fast by giving you reusable pieces of code. So, say you heed a slideshow for my home page. You can include a image, a paragraph and  a link as the basic components and then add some Javascript to have them interact. If later on you need another slideshow in a sidebar you are able to take those same pieces of code and reuse them, change the way they are styled and maybe tweak the Javascipt and you are done.

Atomic Design is a great way to go from template to launch. It speeds things up by working on the design and code at the same time. Testing is a breeze and if something breaks you only need to fix that one part. Focusing on small reusable parts makes sense, it speeds development as well as helps to maintain consistency within a Web design project.