Introduction to Pattern Lab

In this episode of front-end tips we are going to look at something called Pattern Lab. It's a way to organise your HTML and CSS components and modules. Pattern Lab (http://patternlab.io/) is a way to organize your front-end modules and components. It uses mustache template language to make it easy for you to create variants of your components. Pattern Lab was primarily built to be used with atomic design (http://bradfrost.com/blog/post/atomic...) system in mind. But you can use it with any web design modular system you want. In this video we are going to take a look at Node/Gulp version of Pattern Lab, and I'm going to show you how to create atoms, make variants, how to use json data to render your components and at the end how to combine atoms into molecules.