Create a Style Guide with Pattern Lab.

Pattern Lab is a great tool for creating Style Guides, you can easily set up and get started on creating your own style guides with just a few simple commands. Lets take a look at the image below to see how the Pattern Lab is structured

Pretty easy to understand, right?

Let's get more specific on this demo: Patternlab demo, pay attention to the top navigation section you will see on the right are the features:

Change the width of the display - emulator to test the interface on different devices, from mobile to desktop

The rightmost pinion is where you can choose from more options such as:

• Displays detailed information of each component
• Opens the current page in a new browser window
• Link to the instruction page for Pattern Lab
• Search for certain ingredients

While, on the left of the top navigation are all the elements listed in the Style Guide, sorted and sorted into separate sections based on the atomic design concept

(You can take a closer look at the concept. This concept is in the link: http://atomicdesign.bradfrost.com/ ).