Evan Willhite
Web Chef Emeritus
Evan Willhite is a former frontend engineer at Four Kitchens who thrives on creating delightful digital experiences for users, clients, and fellow engineers. He enjoys running, hot chicken, playing music, and being a homebody with his family.
October 14, 2020
The new Emulsify Design System is capable of solving large organizational problems, but it is also more useful than ever at simply building individual projects. In this article, I’ll introduce how to theme an individual Drupal 8+ project using Emulsify.
Emulsify Design System contains a variety of packages that are useful for solving specific problems. The new package, Emulsify Drupal, is the replacement package for the original Emulsify, which means it is a prototyping tool and/or Drupal 8+ theme built around component-driven development and atomic design organization. The new version uses Webpack for a build system and Storybook as the component library. Let’s walk through setting this up.
Installation overview
We have a new documentation site for the new upgrade. For details on how to install Emulsify within a Drupal project, whether you’re using Composer or not, see our Drupal Installation section. If you are upgrading from an older version of Emulsify, we have also added docs for that. Also, our new documentation is built using Gitbook, so if you find errors or want to make additions, please head over to the repo to make a PR.
Usage
Once you have installed the project successfully, developing locally is as simple as running yarn develop or npm run develop. This command will run the build for both Drupal and Storybook, including Sass compiling/minification, JS ES6 transpiling/minification, SVG sprite generation, and more. When the command is completed, you will have an instance of Storybook that can be used to view the components you are developing. And since Emulsify is a starter kit, you can configure your Storybook instance to match the needs of your project, including tapping into the rich add-on ecosystem available.
For further details on how to develop components within Emulsify, see our series on building using Emulsify:
Making the web a better place to teach, learn, and advocate starts here...
When you subscribe to our newsletter!