An open API service indexing awesome lists of open source software.

https://github.com/fourkitchens/uxnavigation

Testing ground for exploring the UX of navigation patterns
https://github.com/fourkitchens/uxnavigation

Last synced: 8 days ago
JSON representation

Testing ground for exploring the UX of navigation patterns

Awesome Lists containing this project

README

          

[![Four Kitchens](https://img.shields.io/badge/4K-Four%20Kitchens-35AA4E.svg)](https://fourkitchens.com/)

# Emulsify: Pattern Lab + Drupal 8

Component-driven prototyping tool using [Pattern Lab v2](http://patternlab.io/) automated via Gulp/NPM. Also serves as a starterkit Drupal 8 theme.

## Requirements

1. [Node (we recommend NVM)](https://github.com/creationix/nvm)
2. [Gulp](http://gulpjs.com/)
3. [Composer](https://getcomposer.org/)
4. Optional: [Yarn](https://github.com/yarnpkg/yarn)

## Quickstart

1. `npm install` or `yarn install`

#### (Drupal-specific installation)

1. Download and enable [Components](https://www.drupal.org/project/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):

```bash
npm start
```

---

## Emulsify versus Pattern Lab Starter

[Pattern Lab Starter](https://github.com/phase2/pattern-lab-starter) and Emulsify share a lot in common (see [`Acknowledgements`](https://github.com/fourkitchens/emulsify/wiki/Acknowledgements)). Below is a breakdown of the two to aid in deciding which is best for your project.

EmulsifyPattern 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](https://github.com/fourkitchens/emulsify/wiki). Here are a few basic links:

#### General Orientation

See [Orientation](https://github.com/fourkitchens/emulsify/wiki/Orientation)

#### For Designers (Prototyping)

See [Designers](https://github.com/fourkitchens/emulsify/wiki/For-Designers)

#### For Drupal 8 Developers

See [Drupal Components](https://github.com/fourkitchens/emulsify/wiki/Drupal-Components)

#### Gulp Configuration

See [Gulp Config](https://github.com/fourkitchens/emulsify/wiki/Gulp-Config)