In this article, we see about how to create a custom style guide easily using pattern lab.
What is Styleguide?
Styleguide is a communication medium and common pattern/method between designers and developers. In other words said, design and development must be developed on a common framework/design systems has been followed. These common systems are colors, fonts, layouts, etc.
Styleguide Website
In Design has provided the inbuilt option to add a style guide in Zeplin/Figma. But developers needs to create a website for a style guide. This takes time, but some of the time not able to do. Pattern Lab provides a style guide website creation using handlebars js and JSON.
Pattern Lab
Pattern Lab provides ready-made basic templates to implement our own style guide easily. They provide an atomic design system and common predefined patterns to add new patterns easily using handlebars and JSON.
Installation Steps
- Step 1 : Install requirements
Make sure you have Node.js installed before setting up Pattern Lab, e.g. by checking for the node version: node -v
Please make sure to have at minimum version node 7 installed, but even better at least the node version that’s being mentioned in .nvmrc; Node version manager might be a good option if you can’t update.
- Step 2 :Run a command to create Pattern lab in your machine
npm create pattern-lab- Step 3:This will create pattern setup easily, It asks the folder to install, by defaults it chooses default folder, next press enter if you want u can choose your folder also
- Step 4: Then, it asks Templating Language, I Choose handlebars, for PHP you can choose TWIG also.
- Step 5: Then it will show the list of the options to choose, I choose Handlebars base patterns (some basic patterns to get started with). This is your choice based on the requirement.
- Step 6:Then ask are you happy, I Enter, That’s all installation, you refer to the below video link for installation add my own pattern
