Pattern Lab — RI Gov

This is the decoupled pattern lab library for RI.gov. The foundation for this respository was built using: Pattern Lab Node - Gulp Edition | The Gulp wrapper around Pattern Lab Node Core.

From there we have made a quite a few modifications:

• Converted the engine to use Twig rendering engine
• Pulled in a custom source directory
• Upgraded the gulp file to use Gulp 4
• Added a HJSON file as the source for all colors and themes
• Added custom JS and SASS compiling.

Getting Started

Notice: This repository is stand-alone in the sense that you may develop the RI Gov Pattern Lab with no other dependencies.

To get up and running:

Install Dependencies

Make sure you are running node 12 globally.

Using Node Version Manager (nvm) makes switching node versions easy.

nvm install 12

npm ci

Gulp Commands

gulp

The default gulp command builds the JSON, JS, SCSS, and serves the Pattern Lab server. It also calls gulp watch which will detect any changes and re-build. Any changes to the HJSON file requires the build to be stopped and restarted.

gulp build

Running gulp build builds all JS, SCSS, and patterns once.

gulp build:no-patterns

Running gulp build:no-patterns excludes patterns from being built but will compile JS and SCSS.

Compiled Assets

Assets are compiled to two locations:

/dist - folder contains a JS and CSS folder with compiled assets. This is the directory Drupal will use to pull in assets.

/public/ - Public directory is generated by Pattern Lab. The CSS directory inside of this contains the same assets as /source/css. The JS directory is the same as source/js.