Emulsify
Emulsify is a base theme that facilitates the creation of design systems for Drupal websites. It provides a Storybook component library and a Webpack development environment, along with optional pre-built components, to help designers and developers build beautiful and accessible design systems efficiently.
Build Beautiful Design Systems with Ease
Emulsify is a base theme that helps designers and developers create design systems for your Drupal website.
Each sub theme relies on Emulsify Core for development which provides a Storybook component library and a Webpack development environment. It bundles all the necessary tooling you'll need to get up and running!
By default Emulsify assumes you will create your own components from scratch but if you want a starting point (solid markup that is tested for accessibility and minimal styling) you can use the Emulsify CLI to install components from our Emulsify UI Kit component library.
Installation
-
composer require 'drupal/emulsify:^6.1'
Composer-based Drupal install (recommended) -
drush theme:enable emulsify && drush emulsify [sub_theme_name]
Generate your sub theme via drush! -
cd themes/custom/[sub_theme_name] && npm install
Install the sub theme's development dependencies. -
npm run develop
Start Storybook and begin watching yourcomponents/directory for file changes. WebPack will automatically compile/minify your SCSS and JS changes into thedist/directory for use with Drupal.
Prebaked components!
The Emulsify CLI provides a way to install some default components from our provided component libraries. See the project's documentation for further details.