Emulsify Core

An open-source toolset for creating and implementing design systems.

Emulsify Core provides a Storybook component library and a Webpack development environment. It is meant to make project setup and ongoing development easier by bundling all necessary configuration and providing it as an extendable package for your theme or standalone project.

Installation and usage

Installation and configuration is setup by the provided base theme project(s). As of this writing, Emulsify Drupal is the only base theme project with this integration.

Manual installation

• npm install @emulsify/core within your repository or project theme.
• Copy the provided npm run scripts from Emulsify Drupal's package.json
• Copy the contents of whisk/config/emulsify-core/ from Emulsify Drupal into your project so config/ exists at the root of your repository or project theme. The files within config/ allow you to extend or overwrite configuration provided by Emulsify Core.

Common Scripts

Run nvm use prior to running any of the following commands to verify you are using Node 20. (Each is prefixed with npm run )

develop Starts and instance of storybook, watches for any files changes, recompiles CSS/JS, and live reloads storybook assets.

lint Lints all JS/SCSS within your components and reports any violations.

lint-fix Automatically fixes any simple violations.

prettier Outputs any code formatting violations.

prettier-fix Automatically fixes any simple code formatting violations.

storybook-build Builds a static output of the storybook instance.

Quick Links

• Emulsify Homepage

Demo

1. Storybook

Contributing

Code of Conduct

The project maintainers have adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contribution Guide

Please also follow the issue template and pull request templates provided. See below for the correct places to post issues:

1. Emulsify Drupal
2. Emulsify Twig Extensions
3. Emulsify Tools (Drupal module)

Committing Changes

To facilitate automatic semantic release versioning, we utilize the Conventional Changelog standard through Commitizen. Follow these steps when commiting your work to ensure semantic release can version correctly.

1. Stage your changes, ensuring they encompass exactly what you wish to change, no more.
2. Run the commit script via yarn commit or npm run commit and follow the prompts to craft the perfect commit message.
3. Your commit message will be used to create the changelog for the next version that includes that commit.

Author

Emulsify® is a product of Four Kitchens.

Contributors