A Modern Workflow is Component-driven

What is Component-driven Development?

The familiar metaphor of thinking about the web as "pages" is inaccurate. The web is better thought of as a collection of components that are assembled together: headers, footers, navigation items, and so on. For instance, a site has a header that gets applied to every page, and if you update the header that change shows up throughout the site. This approach to building sites is called component-driven development.

Components are the reusable chunks of web sites. They can be small (inputs, labels, buttons), medium (header, footer, cards), or large (landing page template, photo gallery). Emulsify adopts the method of Atomic Design, where the smallest components are atoms, which are assembled into molecules, organisms, templates, and finally pages. (Yes, we still call them "pages"; it makes it easier to talk with clients.)

Add Component-Driven Development to Your Drupal Workflow

Emulsify, Drupal 8, and Pattern Lab

With the move for templating in Drupal 8 to Twig, a whole world of tools has opened up for theming. One of those tools is Pattern Lab, a dynamic prototyping and organization tool popularized by Brad Frost..

By integrating with Pattern Lab, Emulsify allows you to build and manage components in a way that makes sense for your workflow. So instead of having to use Drupal's template names, your Emulsify-based project can work with custom template names that make sense for the project, developers, and clients.

Once the templates are ready for production, Emulsify makes connecting them to Drupal as easy as using a simple Twig function (include, extends, or embed) from the Drupal templates to the component files.

Living Style Guide

Maintain a Style Guide that is Never Out of Date

Everyone loves a style guide, but few projects are able to maintain them. Emulsify takes a "living style guide" approach where the style guide components are the same ones in use on the live site. No more worries about components going out of date or looking different than the style guide.

Going Beyond Drupal

Any Project Can Use Emulsify

The components built with Emulsify can be used on any project—with or without Drupal. Emulsify can be used with any CMS that renders content with Twig, which includes WordPress. This allows a development team to work with any frontend expert as they will be only working with technologies that they already know. For projects that don't use Twig, Emulsify can be used by designers and frontend developers to build a style guide to pass along to backend developers.