April 16, 2020
Four Kitchens is thrilled to announce the official release of the new version of Emulsify®: Emulsify Design System! Emulsify is a free, open-source website design system that combines a robust build system, component library, and style guide. Emulsify helps organizations scale their designs across multiple properties while reducing cost, streamlining workflows, and improving accessibility.
The Emulsify build system — a development environment and component library powered by Storybook and Webpack — enables design and development teams to save time by creating reusable, customizable components and automating accessibility testing. Organizations can also use the new Emulsify to create a Gatsby-powered style guide that documents best practices for component usage, branding guidelines, and more. Emulsify supports projects in multiple development languages.
Emulsify Drupal
Emulsify Drupal is a component library, build system, and Drupal 8 theme powered by Storybook and Webpack. This is the replacement for the original Emulsify, maintaining all the same benefits like component-driven development, atomic design organization, and Twig functions for easily applying BEM styles (and more!), while benefitting from the new features of Storybook and Webpack. We recently released the beta version of Emulsify Drupal, and it is ready to be actively used in projects. We’re also actively working on similar starter projects for other environments like WordPress and React.
Emulsify Gatsby theme
The Emulsify Gatsby theme is a new addition to the Emulsify ecosystem that can generate a fully customizable style guide powered by Gatsby, Markdown/MDX, and Theme UI. Create documentation pages using Markdown or MDX, including pages for your components. You can easily showcase your project’s components using built-in Storybook support and syntax highlighting for code documentation. With the power of Gatsby themes and Theme UI, you can customize anywhere — from simple CSS changes to full template overrides for a custom style guide.
We recently released a working alpha version of this project, and aim to have a beta within the next couple of months. We’re also aiming to support other content sources besides Markdown — like Drupal, WordPress, and Contentful — in future updates.
See Emulsify in action
The new version of Emulsify was presented at MidCamp in March 2020. Web Chefs Evan and Brian walked attendees through the new features using our fictional “Western Pennsylvania University” example to show how higher ed institutions can benefit from a design system. Watch the video below to see whole presentation:
Or use the links below to jump to a specific section of the video:
Get started
Ready to build a design system for your organization? Check out the links below to get started with Emulsify:
- Documentation
- Emulsify Drupal on Github
- Emulsify Gatsby theme on Gatsby Library
- Emulsify Design System ecosystem on Github
Sign up for the Emulsify newsletter at Emulsify.info to stay up to date with development news.
Looking for help building a design system or want to learn if Emulsify is right for your organization or university? Contact the Web Chefs.
Making the web a better place to teach, learn, and advocate starts here...
When you subscribe to our newsletter!