One of the more challenging aspects of being a front-end developer is knowing how to split up a design into reusable components. Too often you end up writing redundant code because you did not realise that a similar component had already been made within the project, or because you failed to realise that two components could be built upon the same foundation.

 

Creating a front-end pattern library (commonly also referred to as style guide, UI library, component library, design system etc.) is one measure we can take to organise the implementation of a design, and help keep our code as DRY as possible by embracing a more modular way to interpret a design.

 

Pattern Lab (http://patternlab.io/) is a framework for creating pattern libraries built upon the concept of atomic design methodology (http://atomicdesign.bradfrost.com/). This (relatively) technology-agnostic framework allows you to quickly set up a system to easily organise, edit, document and share your project’s design patterns. Pattern Lab has also become quite extensible, allowing developers to create plugins, theming and setups to customise the look and functionality of the existing framework.

 

This workshop will cover the following topics:

• Quick introduction to the concepts behind atomic design in relation to the Pattern Lab framework
• Setting up and configuring Pattern Lab using Node and Gulp.
• Going through a couple of exercises showing how to define, use and modify patterns (design components) to mock up finished page templates for a website.