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. Node (we recommend NVM)
2. Gulp
3. Composer
4. Optional: Yarn

Quickstart

1. npm install or yarn install

(Drupal-specific installation)

1. Download and enable Components module
2. Enable Emulsify theme

Starting Pattern Lab and watch task

Start up watches and local server after compiling (runs all gulp required tasks):

npm start

---

Highlighted Features

Lightweight	✔	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)

Emulsify's Built in Components with Drupal support

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

Documentation

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

General Orientation

See Orientation

For Designers (Prototyping)

See Designers

For Drupal 8 Developers

See Drupal Components

Gulp Configuration

See Gulp Config