Emulsify

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

1. composer require 'drupal/emulsify:^6.1'
   Composer-based Drupal install (recommended)

2. drush theme:enable emulsify && drush emulsify [sub_theme_name]
   Generate your sub theme via drush!

3. cd themes/custom/[sub_theme_name] && npm install
   Install the sub theme's development dependencies.

4. npm run develop
   Start Storybook and begin watching your components/ directory for file changes. WebPack will automatically compile/minify your SCSS and JS changes into the dist/ 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.

Requirements

Emulsify Tools
Components! (module)