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

---

Emulsify versus Pattern Lab Starter

Pattern Lab Starter and Emulsify share a lot in common (see Acknowledgements). Below is a breakdown of the two to aid in deciding which is best for your project.

	Emulsify	Pattern Lab Starter
Lightweight	✔		Emulsify is about 1/2 the size of PLS
SVG sprite support	✔		PLS uses icon fonts.
Stock Drupal templates	✔		see /templates directory
Stock Components (see below)	✔		with Drupal support built-in
Yeoman generator		✔	Adds functionality to generate a new component using `yo component`
Faker support		✔	PHP "dummy" content generator

Emulsify's Built in Components (all responsive)

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