Pattern Lab

This monorepo contains the core of Pattern Lab / Node and all related engines, UI kits, plugins and utilities. Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.

View demo Download Source

Installation

As of Pattern Lab Node 3.0.0, installation of Editions is accomplished via the command line interface.

0 to 60mph

The below assume a new directory and project is required.

  1. Open a terminal window and following along below:
    mkdir new-project
cd new-project
npm init -y && npx @pattern-lab/cli -c patternlab init

    If you get an error stating that npx is not installed, ensure you are on npm 5.2.0 or later by running npm -v or install it globally with npm install -g npx. Learn more about npx.

  2. Follow the on-screen prompts to choose your Edition and a Starterkit should you want one.
  3. Run npm install one last time to ensure any transient packages from the CLI are installed.
  4. Open package.json and add the following to your scripts object
    "scripts": {
+ "patternlab": "patternlab"
},
    This tells npm to look in the local node_modules/.bin directory for the patternlab CLI.
  5. In your terminal, run npm run patternlab <command>, where <command> is a documented method on the CLI, such as build, serve, or help.

Established npm projects

  1. Run the following command from a terminal:
    npm install @pattern-lab/cli --save-dev
  2. Open package.json and add the following to your scripts object
    "scripts": {
+ "patternlab": "patternlab"
},
    This tells npm to look in the local node_modules/.bin directory for the patternlab CLI.
  3. In your terminal, run npm run patternlab init. Follow the on-screen prompts to choose your Edition and a Starterkit should you want one.

Ecosystem

Pattern Lab Ecosystem

Core, and Editions, are part of the Pattern Lab Ecosystem. With this architecture, we encourage people to write and maintain their own Editions, Starterkits, and even PatternEngines.

GitHub