We've been bustling away on some fantastic updates and extras that we believe will make Emulsify an even more handy tool for you.

Let's walk together through the enhancements we've implemented and get excited about our upcoming plans to boost collaboration and streamline workflow for all our teams using the Emulsify Design System.

Getting a quick start with Emulsify and Drupal

In case you didn’t know, we have a quick way of getting started with Emulsify and Drupal! We have built a Drupal starter kit called Sous.

Running this command will kick-off a new Drupal install with an Emulsify theme that is ready for building:

composer create-project fourkitchens/sous-drupal-project YOUR-PROJECT --no-interaction

Here is what you get with this starter kit:

• Drupal install—Installs the latest stable version of Drupal
• Minimal assumptions pre-configured—We have made some minor assumptions that are pre-configured in this install. Like minor systems configuration tweaks, two content types (frontpage & page), some default entities like media components, paragraphs and a bit more…
• Contrib modules
  • We have some Contrib modules installed and configured. Most of these are for supporting UI admin improvements, common development tooling, etc…
  • We have these feature and configuration documented in our Sous Drupal Project on Github
• New theme generated by Emulsify—A fresh theme named after your project ready for you
• Local environment ready
  • This spins up a Lando environment to preview and start building!
  • Great way to start prototyping if needed.

A few more things to mention about Sous…

• The Sous project is built with Drupal Recipes
• The Recipes concept we had in mind and we were thinking of building composer packages for “recipes” but now that Drupal is doing something similar we now started building recipe packages to make Sous more customizable and a quicker head start.
• We were glad to see the concept has taken hold is now apart of Drupal Core!

New Emulsify Core—now upgradable and scalable

We’re refactoring Emulsify to make it upgradable and scalable!

We are excited to share our recent releases and future plans. These include an updated architecture, new tools, and a future-proof concept we're eager to unveil. We are also exploring ways to speed up development and enhance collaboration with our design team.

We are adapting to how people want to support Emulsify projects long-term.

Our old philosophy was to quickly get frontend engineers up and running with more modern tooling that allows for all future decisions to be handled by the project’s development team.

What we found:

• It wasn’t very common for projects to stray from the sensible defaults Emulsify established when it comes to how it’s tooling is configured.

• Upgrading was difficult due to engineers needing to manually keep track of changes to Emulsify and dependency versions.

• Emulsify is platform agnostic so there was no space to add useful features like better template suggestions or auto-generated library definitions that are platform specific.

  Our new philosophy is to focus on making Emulsify upgradable and extensible for long-term support while still quickly getting frontend engineers up and running with more modern tooling.

More Scalable

• Easily spin up multiple Emulsify-based themes within a single Drupal installation
• Each Emulsify theme can install components from separate component libraries
• UI Kit allows you to build complex components with overrides that will not compromise simple component customizations

Upgradable

• Single package requirement
• Emulsify Core manages all dependency versions to ensure compatibility
• Emulsify Core is versioned to make it more clear when breaking changes take place

Extendable

Current Emulsify Core supports extending or overriding configuration for the items listed:

• A11y
• Babel
• Eslint
• Jest
• postCSS
• Prettier
• Stylelint
• Storybook’s theme
• And more…

Upgrading to Emulsify Core

If you have using the older version of Emulsify…what does it look like to upgrade to this new version of Emulsify?

This code diff gives a little glimpse for you to the see that we have just included many of the dependencies into one package. This will help with maintaining and upgrading.

Here are of some of the things you would need to adjust to make your project ready for Emulsify core:

Most changes will happen in your package.json file.

• Remove all dependencies except packages unique to your project
• Replace with Emulsify Core

Add new directory (config/emulsify-core) to support overriding/extending core defaults.

• Technologies used in Emulsify Core can ONLY be overridden or extended. Not swapped out.

You would then delete /node_modules/ folder and regenerate

Important note! Emulsify Core uses the same commands as previous versions of Emulsify. Your project documentation and CI tasks will not need updating.

We have documented a guide to help you get your current Emulsify installs. You can get more information for this at: https://emulsify.info /

Single Directory Components are on the way

Single Directory Components will be a Drupal standard. Historically, Emulsify has been doing something similar already. We have identified most of the adjustments we need to make to support SDC and make it seamless. We are in the process of addressing those key issues that will allow Emulsify to take advantage of SDC.

Streamlining the future

We are looking to accelerate front-end development and collaboration with design teams!

We are prototyping a seamless integration with Figma, Emulsify UI Kit, An Emulsify Theme into Drupal Templates. We will be talking more about this in the future as we learn more but we see great potential with making. Here are some thoughts on the future of Emulsify:

• UI Kit will have a full library of components ready for customization in Figma
• Figma and the Tokens Studio plugin export (and import) design tokens as JSON
• Style dictionary converts design tokens to CSS custom properties
• Exporting tokens can generate a pull request as part of your pipeline
• Global styles and base components with templates can be committed to the code base with little to no development

Thank you Contributors!

Big thank you to all who have contributed to this project. Many whom are current and former Web Chefs!

Interested in contributing? Join us!

• Emulsify.info
• Join us on Slack
• Monthly community meetups the first Thursday of every month!
  • Identify high-priority issues
  • Update on Emulsify's roadmap
  • Provide help with anyone's specific issues
  • Discuss other Emulsify-related topics