Pattern Lab Node
This project is built with Pattern Lab Node.
In order to get Pattern Lab up and running in your local environment.
- Download or clone this repository to your local machine.
- If gulp is not installed on your computer, install it using
npm install gulp-cli -gin the command line. If that doesn't work, try the
sudo npm install gulp-cli -gcommand.
- In the command line, navigate to the root of the project, then run
npm installto download the project's dependencies.
gulp patternlab:serveto build Pattern Lab and watch for changes.
http://localhost:3000/in your browser to view Pattern Lab.
Exporting to the Style Guide
Pattern Lab serves as the workshop where the design system design and development is done. The style guide serves as the storefront where the patterns and documentation are presented. Here's how to export patterns and other assets from Pattern Lab into the style guide:
- Make sure the Pattern Lab and style guide repositories are sitting adjacent to each other, like so:
- Navigate to the root of the Pattern Lab in the command line:
- Run the
This command will copy the following files and directories into the style guide project file structure:
Once those assets are imported into this repository, the style guide is ready to build.
Pattern Lab Documentation
Please view Pattern Lab's documentation for info on how to use the tool.
These are some helpful commands you can use on the command line for working with Pattern Lab.
Reminder: These commands assume a global installation of gulp 4.X, instead of a local installation.
List all of the available commands
To list all available commands type:
Generate Pattern Lab
To generate the front-end for Pattern Lab type:
Watch for changes and re-generate Pattern Lab
To watch for changes, re-generate the front-end, and server it via a BrowserSync server, type:
BrowserSync should open http://localhost:3000