Emulsify Design System and Kalaboom

Emulsify is an open-source tool for creating design systems with reusable components and clear guidelines for teams. Emulsify helps organizations scale their design while reducing cost, streamlining workflows, and improving accessibility.

Emulsify Design System contains multiple packages, which can be used individually to solve small problems or together to solve big ones. See below for some of the popular packages.

Learn more about it in the official documentation

You can use Emulsify as a stand-alone starter kit or install it with Kalaboom.

Kalaboom installation

During the kalaboom process select emulsify as part of your installation. Choose the name of the theme.

Behind the scenes Kalaboom will pull emulsify into your Drupal project and initiate the subtheme.

After your Drupal site is installed with Kalaboom and you ran Drupal installation script and have a working Drupal instance, navigate into the new custom theme folder in the command line and run:

npm install

Navigate to Drupal root and run

cp -r themes/contrib/emulsify/vendor/drupal/emulsify_twig/ modules/contrib/emulsify_twig

Then run

drush then THEME_NAME -y && drush en components emulsify_twig -y

Log in and set your custom theme to be the default.

Usage

Build Process

To build your theme navigate into the theme folder and run npm run develop or for production npm run build

Live Reload

Follow these steps from the official documentation.

CI Updates

You will need to update our standard CI.

Add the following snippet under the Composer Installation task

 # Install node modules and build theme.
      - run:
          name: Node Install
          command: cd web/themes/custom/MY_THEME  && npm install && npm install --save-dev browser-sync browser-sync-webpack-plugin && npm run build
      # Cache node_modules so the packages don't need to be redownloaded next time.
      - save_cache:
          name: Save Node Cache
          key: drupal-node-{{ checksum "web/themes/custom/MY_THEME/package-lock.json" }}
          paths:
            - node_modules

Don’t forget to update node caches saving command

- restore_cache:
          name: Restore Node Cache
          keys:
            - drupal-node-{{ checksum "web/themes/custom/MY_THEME/package-lock.json" }}
            # Fallback to most recent build if this exact config hasn't been installed before.
            - drupal-node-

Customizing CKEditor

If you want your theme styles to be reflected inside the ckeditor you will require some updates to be done to the initial theme structure.

Update .info.yml for your theme to include:

# CKEditor stylesheet loads in wysiwyg to give content editors a better experience
ckeditor_stylesheets:
  - dist/ckeditor.css

Add this snippet under the libraries declaration

2. Add ckeditor.scss file in the root of your components folder.

3. In the webpack folder add a file called webpack.ckeditor.js

4. Rename css.js in styles.js

5. Update webpack.common.js

6. Update package.json scripts section

And add ckeditor task as well as add it into the develop task.

When to use

Emulsify is great if you are running a Drupal 8 project with components and pattern lab molecular design paradigm.

If you need Storybook external style guide that may be deployed to gitHub.

It may also be used for building style guide as static Gatsby instance.

When not to use

If your site doesn’t need component based design.

If you need a Bootstrap based solution.

If you don’t need a style guide or StoryBook is an overhead, you don’t have basic knowledge of React.