NYPL Emulsify: Pattern Lab + Drupal 8

Component-driven prototyping tool using Pattern Lab v2 automated via Gulp/NPM. Also serves as a starterkit Drupal 8 theme.

Requirements

1. PHP 7.1
2. Node (we recommend NVM)
3. Gulp
4. Composer
5. Optional: Yarn

Prototyping (separate from Drupal, Wordpress, etc.)

NYPL Emulsify supports both NPM and YARN for installing and maintaining Pattern Lab.

Drupal installation

In a Composer-based Drupal install (recommended)

6. Enable your theme and its dependencies drush then nypl_emulsify -y && drush en components unified_twig_ext -y
7. Proceed to the "Starting Pattern Lab…" section below

Starting Pattern Lab and watch task

The start command spins up a local server, compiles everything (runs all required gulp tasks), and watches for changes.

1. npm start or yarn start

---

Emulsify's Highlighted Features

Lightweight	✔	nypl_emulsify is focused on being as lightweight as possible.
SVG sprite support	✔	Automated support for creating SVG sprites mixins/classes.
Stock Drupal templates	✔	Templates from Stable theme - see /templates directory
Stock Components	✔	with Drupal support built-in (https://github.com/fourkitchens/emulsify#emulsifys-built-in-components-with-drupal-support)
Performance Testing	✔	Support for testing via Google PageSpeed Insights and WebPageTest.org (https://github.com/fourkitchens/emulsify/wiki/Gulp-Config#performance-testing)
Automated Github Deployment	✔	Deploy your Pattern Lab instance as a Github page (https://github.com/fourkitchens/emulsify/wiki/Gulp-Config#deployment)

NYPL Emulsify's Built in Components with Drupal support

Forms, tables, video, accordion, cards, breadcrumbs, tabs, pager, status messages, grid

View a demo of these default nypl_emulsify components.

Four Kitchens Documentation

Documentation is currently provided in the Wiki. Here are a few basic links:

General Orientation

See Orientation

We have a series of videos for you to learn more about Emulsify.

For Designers (Prototyping)

See Designers

For Drupal 8 Developers

See Drupal Usage

Gulp Configuration

See Gulp Config