⚠️ You are viewing the legacy version of Emulsify ⚠️
You can find the current version of Emulsify Design System at github.com/emulsify-ds
If you'd like to upgrade your Emulsify project to the new version, check out this documentation.
Component-driven prototyping tool using Pattern Lab v2 automated via Gulp/NPM. Also serves as a starterkit Drupal 8 theme.
Emulsify supports both NPM and YARN.
Install with NPM:
composer create-project fourkitchens/emulsify:^3.0 --stability dev --no-interaction emulsify && cd emulsify && npm install
Install with Yarn:
composer create-project fourkitchens/emulsify:^3.0 --stability dev --no-interaction emulsify && cd emulsify && yarn install
composer require fourkitchens/emulsify
php emulsify.php "THEME NAME"(Run
php emulsify.php -hfor other available options)
drush then THEME_NAME -y && drush en components unified_twig_ext -y
If you're not using a Composer-based Drupal install (e.g. tarball download from drupal.org) installation instructions can be found on the Wiki.
Troubleshooting Installation: See Drupal Installation FAQ.
Note: Once you've created your custom theme, you can remove Emulsify as a dependency of your project. If you'd like to get updates as we push them, solely for educational/best-practice information, feel free to leave it in and receive the updates. Updating Emulsify will not affect your custom theme in any way.
start command spins up a local server, compiles everything (runs all required gulp tasks), and watches for changes.
|Lightweight||✔||Emulsify is focused on being as lightweight as possible.|
|SVG sprite support||✔||Automated support for creating SVG sprites.|
|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)|
|Automated Accessibility Testing||✔||Accessibility Testing using pa11y (https://github.com/fourkitchens/emulsify/wiki/Accessibility-Testing)|
Documentation is currently provided in the Wiki. Here are a few basic links:
We have a series of videos for you to learn more about Emulsify.
See Drupal Usage
See Gulp Config