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

Node (we recommend NVM)
Gulp
Composer
Optional: Yarn

Installation

npm installor yarn install

(Drupal-specific installation)
  1. Download and enable Components module
  2. Download and enable this fork of the Unified Twig Extensions module
  3. Enable Emulsify theme

Starting Pattern Lab and watch task

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

npm start or yarn 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
View a demo of these default Emulsify components.

Documentation

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

General Orientation

See /docs/orientation.md

For Designers (Prototyping)

See /docs/designers.md

For Drupal 8 Developers

See /docs/drupal-components.md

Gulp Configuration

See /docs/gulp-config.md

Supporting organizations: 

Project information

Downloads