Skip to content
Vanilla Pattern Lab Handlebars Starter Kit
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
scripts Initial commit Aug 17, 2018
source
.gitignore
LICENSE Initial commit Aug 17, 2018
README.md Initial commit Aug 17, 2018
gulpfile.js
package-lock.json Dynamically load SCSS partials Apr 11, 2019
package.json Dynamically load SCSS partials Apr 11, 2019
patternlab-config.json Switch clean public to true for async rendering Apr 8, 2019
yarn.lock Yarn lock Apr 8, 2019

README.md

Pattern Lab Node

This project is built with Pattern Lab Node.

Installing

In order to get Pattern Lab up and running in your local environment.

  1. Download or clone this repository to your local machine.
  2. If gulp is not installed on your computer, install it using npm install gulp-cli -g in the command line. If that doesn't work, try the sudo npm install gulp-cli -g command.
  3. In the command line, navigate to the root of the project, then run npm install to download the project's dependencies.
  4. Run gulp patternlab:serve to build Pattern Lab and watch for changes.
  5. Visit 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:

  1. Make sure the Pattern Lab and style guide repositories are sitting adjacent to each other, like so:
pattern-lab/
style-guide/
  1. Navigate to the root of the Pattern Lab in the command line:
cd /path/to/pattern-lab
  1. Run the style-guide-export command:
gulp style-guide-export

This command will copy the following files and directories into the style guide project file structure:

  • public/patterns/ => includes/patterns
  • public/patterns/ => patterns
  • public/icons.svg => icons.svg
  • public/css/ => css/
  • public/js/ => js/
  • public/images => images/

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.

Helpful Commands

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:

gulp patternlab:help

Generate Pattern Lab

To generate the front-end for Pattern Lab type:

gulp patternlab:build

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:

gulp patternlab:serve

BrowserSync should open http://localhost:3000

You can’t perform that action at this time.