Installing Pattern Lab

Step 1: Install requirementspermalink

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 the create Pattern Lab commandpermalink

Open the command line and run the following command:

npm create pattern-lab

This will bring up an installation menu that presents the following steps:

Step 3: Choose a directorypermalink

Please specify a directory for your Pattern Lab project. Choose the directory where you want to install Pattern Lab. The default location is the current directory.

Step 4: Choose templating languagepermalink

What templating language do you want to use with Pattern Lab? This determines what templating engine you'll use to author components. The options are:

  • Handlebars - uses the Handlebars templating engine
  • Twig (PHP)* - uses the Twig templating engine

*A note on Twig: while Pattern Lab is powered by Node, behind the scenes Twig files are compiled by Twig PHP, not by twig.js (which isn't fully on par with Twig PHP).

Step 5: Choose initial patternspermalink

What initial patterns do you want included in your project? - Choose the Starterkit you want to begin your project with. The options are:

  • Handlebars base patterns (some basic patterns to get started with)
  • Handlebars demo patterns (full demo website and patterns)
  • Twig (PHP) demo patterns (full demo website and patterns)
  • Custom starterkit - point to a custom Pattern Lab starterkit TODO: include instructions on including custom starterkits
  • Blank project (no patterns) - This won't include any initial patterns in your project so you can start completely from scratch

You can find all starter kits on our demos page

Step 6: Confirm your choicespermalink

Are you happy with your choices? (Hit enter for YES)? - Confirm your choices, and when done the Pattern Lab installation will begin.