{"id":13851889,"url":"https://github.com/fourkitchens/emulsify","last_synced_at":"2025-10-01T09:31:00.385Z","repository":{"id":37547686,"uuid":"65416944","full_name":"fourkitchens/emulsify","owner":"fourkitchens","description":"DEPRECATED (see README for new version)","archived":true,"fork":false,"pushed_at":"2022-12-03T03:17:53.000Z","size":7708,"stargazers_count":162,"open_issues_count":67,"forks_count":70,"subscribers_count":36,"default_branch":"develop","last_synced_at":"2025-01-19T03:28:42.501Z","etag":null,"topics":["component-driven","drupal","drupal-8","emulsify","pattern-lab","theme"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fourkitchens.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-10T21:14:26.000Z","updated_at":"2024-11-26T13:54:20.000Z","dependencies_parsed_at":"2023-01-23T04:15:37.376Z","dependency_job_id":null,"html_url":"https://github.com/fourkitchens/emulsify","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourkitchens%2Femulsify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourkitchens%2Femulsify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourkitchens%2Femulsify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fourkitchens%2Femulsify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fourkitchens","download_url":"https://codeload.github.com/fourkitchens/emulsify/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234852341,"owners_count":18896854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-driven","drupal","drupal-8","emulsify","pattern-lab","theme"],"created_at":"2024-08-04T22:00:45.309Z","updated_at":"2025-10-01T09:30:54.826Z","avatar_url":"https://github.com/fourkitchens.png","language":"JavaScript","readme":"[![Four Kitchens](https://img.shields.io/badge/4K-Four%20Kitchens-35AA4E.svg)](https://fourkitchens.com/)\n\n:warning: **You are viewing the legacy version of Emulsify** :warning:\n\nYou can find the current version of Emulsify Design System at [github.com/emulsify-ds](https://github.com/emulsify-ds/)\n\nIf you'd like to upgrade your Emulsify project to the new version, [check out this documentation](https://docs.emulsify.info/installation/upgrading). \n\n---\n\n# Emulsify (legacy version)\n### Pattern Lab + Drupal 8\n\nComponent-driven prototyping tool using [Pattern Lab v2](http://patternlab.io/) automated via Gulp/NPM. Also serves as _a starterkit_ Drupal 8 theme.\n\n## Requirements\n\n1.  [PHP 7.1](http://www.php.net/)\n2.  [Node (we recommend NVM)](https://github.com/creationix/nvm)\n3.  [Gulp](http://gulpjs.com/)\n4.  [Composer](https://getcomposer.org/)\n5.  Optional: [Yarn](https://github.com/yarnpkg/yarn)\n\n## Prototyping (separate from Drupal, Wordpress, etc.)\n\nEmulsify supports both NPM and YARN.\n\nInstall with NPM:\n`composer create-project fourkitchens/emulsify:^3.0 --stability dev --no-interaction emulsify \u0026\u0026 cd emulsify \u0026\u0026 npm install`\n\nInstall with Yarn:\n`composer create-project fourkitchens/emulsify:^3.0 --stability dev --no-interaction emulsify \u0026\u0026 cd emulsify \u0026\u0026 yarn install`\n\n## Drupal installation\n\n### In a Composer-based Drupal install (recommended)\n\n1. Require emulsify in your project `composer require fourkitchens/emulsify`\n2. Move into the original emulsify theme `cd web/themes/contrib/emulsify/`\n3. Create your new theme by cloning emulsify `php emulsify.php \"THEME NAME\"` (Run `php emulsify.php -h` for other available options)\n4. Move into your theme directory `cd web/themes/custom/THEME_NAME/`\n5. Install the theme dependencies `npm install` or `yarn install`\n6. Enable your theme and its dependencies `drush then THEME_NAME -y \u0026\u0026 drush en components unified_twig_ext -y`\n7. Proceed to the \"Starting Pattern Lab…\" section below\n\nIf you're not using a Composer-based Drupal install (e.g. tarball download from drupal.org) installation [instructions can be found on the Wiki](https://github.com/fourkitchens/emulsify/wiki/Install-(without-Composer)).\n\nTroubleshooting Installation: See [Drupal Installation FAQ](https://github.com/fourkitchens/emulsify/wiki/Install-(Composer)#drupal-installation-faq).\n\n_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._\n\n## Starting Pattern Lab and watch task\n\nThe `start` command spins up a local server, compiles everything (runs all required gulp tasks), and watches for changes.\n\n1.  `npm start` or `yarn start`\n\n---\n\n## Highlighted Features\n\n\u003ctable\u003e\u003ctbody\u003e\n\u003ctr\u003e\u003ctd\u003eLightweight\u003c/td\u003e\u003ctd\u003e✔\u003c/td\u003e\u003ctd\u003eEmulsify is focused on being as lightweight as possible.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eSVG sprite support \u003c/td\u003e\u003ctd\u003e\u003cstrong\u003e✔\u003c/strong\u003e\u003c/td\u003e\u003ctd\u003eAutomated support for creating SVG sprites.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eStock Drupal templates \u003c/td\u003e\u003ctd\u003e\u003cstrong\u003e✔\u003c/strong\u003e\u003c/td\u003e\u003ctd\u003eTemplates from Stable theme - see /templates directory\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eStock Components \u003c/td\u003e\u003ctd\u003e\u003cstrong\u003e✔\u003c/strong\u003e\u003c/td\u003e\u003ctd\u003ewith Drupal support built-in (https://github.com/fourkitchens/emulsify#emulsifys-built-in-components-with-drupal-support)\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003ePerformance Testing \u003c/td\u003e\u003ctd\u003e\u003cstrong\u003e✔\u003c/strong\u003e\u003c/td\u003e\u003ctd\u003eSupport for testing via Google PageSpeed Insights and WebPageTest.org (https://github.com/fourkitchens/emulsify/wiki/Gulp-Config#performance-testing)\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eAutomated Github Deployment \u003c/td\u003e\u003ctd\u003e\u003cstrong\u003e✔\u003c/strong\u003e\u003c/td\u003e\u003ctd\u003eDeploy your Pattern Lab instance as a Github page (https://github.com/fourkitchens/emulsify/wiki/Gulp-Config#deployment)\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eAutomated Accessibility Testing \u003c/td\u003e\u003ctd\u003e\u003cstrong\u003e✔\u003c/strong\u003e\u003c/td\u003e\u003ctd\u003eAccessibility Testing using pa11y (https://github.com/fourkitchens/emulsify/wiki/Accessibility-Testing)\u003c/td\u003e\u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\n\u003ch3 id=\"components\"\u003eEmulsify's Built in Components with Drupal support\u003c/h3\u003e\nForms, tables, video, accordion, cards, breadcrumbs, tabs, pager, status messages, grid\n\nView a [demo of these default Emulsify components](https://fourkitchens.github.io/emulsify/pattern-lab/public/).\n\n## Documentation\n\nDocumentation is currently provided in [the Wiki](https://github.com/fourkitchens/emulsify/wiki). Here are a few basic links:\n\n#### General Orientation\n\nSee [Orientation](https://github.com/fourkitchens/emulsify/wiki/Orientation)\n\nWe have a [series of videos](https://www.youtube.com/playlist?list=PLO9S6JjNqWsGMQLDfE8Ekt0ryrGa3g4km) for you to learn more about Emulsify.\n\n#### For Designers (Prototyping)\n\nSee [Designers](https://github.com/fourkitchens/emulsify/wiki/For-Designers)\n\n#### For Drupal 8 Developers\n\nSee [Drupal Usage](https://github.com/fourkitchens/emulsify/wiki/Drupal-Usage)\n\n#### Gulp Configuration\n\nSee [Gulp Config](https://github.com/fourkitchens/emulsify/wiki/Gulp-Config)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffourkitchens%2Femulsify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffourkitchens%2Femulsify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffourkitchens%2Femulsify/lists"}