Randy Oest, the Creative Director at Four Kitchens, recently gave a lightning talk at DrupalCon Pittsburgh 2023, introducing the beta version of Emulsify UI kit. In this talk, he provided an overview of Emulsify and how it can be used to create design systems for Drupal and other websites.

{% youtube url="https://www.youtube.com/embed/Lcv6FYSt2ew" /%}

Emulsify is an open source tool set that combines storybook, configuration, and other resources to make it easy to create design systems. It was created by Four Kitchens to meet the need for an open sourced component library that could be used to display and interact with components.

The Emulsify UI kit beta includes a [Figma file](https://www.figma.com/community/file/1141071510618977331) and an [open source code repository](https://github.com/emulsify-ds/emulsify-ui-kit). The Figma component includes example pages and a robust collection of tokens for sizing, spacing, typography, and more. These design tokens are created using the Figma plugin Token Studio, and pushed to your repository as JSON.

When the design tokens are received by the UI kit repository, we run a series of actions that convert the tokens from JSON into a collection of CSS custom properties. (Alternatively, we could us Sass variables, Less variables, or even JavaScript.) The components take these design token variables and apply them to the CSS.

Overall, the Emulsify UI kit beta is a powerful tool set that makes it easy to create custom design systems for Drupal and other websites. It allows designers and front-end engineers to collaborate closely, making sure that the final product is tailored to the client's needs and purpose.

The Emulsify UI Kit beta is an open source tool set that combines storybook, configuration, and other resources to make it easy to create design systems. It includes a Figma file and an open source code repository, and allows designers and front-end engineers to collaborate closely to create custom design systems for Drupal and other websites.

uikit

Introducing the Emulsify UI Kit Beta: The Open Source Tool Set for Design Systems

{% lead %}
Yale University (Yale) is a leading academic institution globally, with over a decade of experience using Drupal to support its broader campus community. But with the fast-changing needs of its students and faculty, Yale needed to evolve its digital infrastructure. In partnership with Emulsify and agency partner Four Kitchens, Yale embarked on building its next-generation platform based on Drupal 10, called YaleSites.

{% /lead %}

{% section %}

## Challenges faced by Yale

Yale's existing Drupal platform is a comprehensive digital solution for the hundreds of sites that make up Yale's digital footprint. However, the team was often mandated to create custom, one-off projects, and making exceptions became the rule. The university was looking to shift to a product-centric approach, focusing on developing a roadmap and features to benefit all of Yale rather than just the loudest voices. Additionally, Yale was looking for sustainability and the thoughtful use of resources while accelerating delivery and providing accountability to stakeholders.

### As part of this initiative, Yale wanted to create a design system to serve as the foundation of their digital brand. 

The system needed to be flexible and robust enough for everyone from small departments to outside vendors, so they could create interactive experiences while adhering to Yale's high standards. Using a design system, the university could ensure its digital presence was consistent and on-brand across all platforms.

Additionally, the design system allows anyone at Yale to create a branded and vetted digital experience, empowering the Yale community by providing self-service content.

### To address these challenges, Yale adopted a service-oriented model for the underlying architecture of the new YaleSites. 

They structured the project around developing version-controlled independent services, allowing for customizable features and services while addressing 95% of use cases. This gives them a dedicated group to discuss and plan for those digital experiences and services, such as a design system.

Yale’s design system has a challenge that faces all higher education institutions—it must maintain a strong brand while providing flexibility for its many schools, centers, and departments.

{% /section %}

## Creating Yale's design system in Emulsify

One of the YaleSites project's most essential services is creating a design system to serve as the foundation of Yale's digital brand. This design system includes a visual design that complements the exceptional brand and print work of Yale's world-famous designers.

### Design tokens at the heart of the system

At the core of the Yale design system are design tokens, which are atomic elements of design within a brand, representing agreed-upon visual and code details that designers and developers can use to create consistent brand experiences. They are a common language across platforms, enabling teams to maintain brand consistency, avoid communication siloes, and streamline the design and development process.

Design tokens encapsulate the fundamental elements of a brand, such as colors, typography, dimensions, spacing, animation times, and interaction rules, and they serve as the building blocks for creating consistent designs across various platforms. Without design tokens, the risk of inconsistencies and fragmented user experiences increases. Therefore, design tokens are vital in streamlining the design process, fostering collaboration, and reinforcing brand integrity.

Using design tokens also strengthens the brand identity by giving it more flexibility in expression. This enables the many schools, centers, and departments to create their own unique forms of self-expression using the Yale brand.

[Yale design tokens interactive example]

### Choosing which components to kickoff with

Deciding what components to include in the Yale design system required careful consideration and collaboration among the teams involved.

User research helped us understand the existing user base's needs, behaviors, and preferences. As a team, we analyzed their current products and applications for recurring design patterns.

Once the team identified reusable components and elements, we involved designers, developers, product managers, and other stakeholders in the decision-making process. Gathering insights from different perspectives provides a comprehensive understanding of the components needed.

The team then prioritized components based on their importance and frequency of use. They focused on core and foundational components that will have a broad impact on the user experience, while also anticipating future needs and scalability.

### Component creation process

{% imageMarkdown type="expanded" url="//images.ctfassets.net/il3zdpvri0hi/xpkNCva2LAcjsKl1PlA5P/f933da71a84b263d8859516b6f237792/component-creation-process.svg" %}
{% /imageMarkdown %}

1. **Information architecture and use analysis.** We start by thoroughly analyzing the users' needs and requirements to ensure we create a component that meets their needs, including the authoring experience and how to use it.
2. **Visual design.** Once we clearly understand the user's needs, we move on to the visual design stage. We create wireframes and design mockups to ensure the component is visually pleasing, easy to use, and aligns with users' needs.
3. **Accessibility testing, both automated and manual.** We test the component for accessibility to ensure that everyone can use it. We use automated tools to identify potential issues and manually test the component to ensure it meets the latest accessibility guidelines.
4. **Frontend development.** Once the visual design is approved, we move on to the front-end development stage. Our front-end developers build responsive and user-friendly components.
5. **Quality assurance testing, both automated and manual.** We rigorously test the component at this stage to ensure it meets the highest quality standards. We use automated tools inside of Emulsify to identify potential issues, and the Yale user experience team manually reviews and tests the components to ensure that they are error-free and meets our users' needs.
6. **Approval.** Once the component is developed and tested, we seek support from key stakeholders to ensure they are satisfied with the final component. We also conduct a last review to ensure all requirements are met, and the component is ready to be added to the YaleSites design system.

### Accessibility

Accessibility is a fundamental part of the design process for YaleSites, with every component and element within the design system undergoing multiple levels of accessibility reviews, including manual accessibility reviews. The user experience team at Yale reviews every component for accessibility, including manually testing complex components to ensure accessibility. This ensures that the final product is inclusive and accessible to as many users as possible, including those with disabilities.

## Yale's design system is an ongoing effort, but you get a sneak peek

The design system created with Emulsify for Yale has allowed for a consistent and branded digital experience, while accessibility has ensured that the platform is inclusive for all users. The updated YaleSites project is an ongoing effort, but Yale has been kind enough to share a snapshot of the design system as a work-in-progress.

[Demo of Yale Emulsify]

placeholder

Case study: building a design system for Yale University with Emulsify

We are thrilled to announce that the Wu Tsai Institute website, which is built with Emulsify, has been nominated for a Webby Award in two categories! The Webby Awards are the leading international awards honoring excellence on the Internet, and we are honored to have an Emulsify site among the nominees.

The [Wu Tsai Institute website](https://wti.yale.edu/) was built using Drupal, a powerful content management system, and we used Emulsify for theming, which helped us create a beautiful and user-friendly design. The team at [Four Kitchens](https://www.fourkitchens.com/) worked hard to create a website that reflects their mission and values, and we are proud of what we have accomplished.

But we need your help to win! The Webby Awards are determined by a panel of judges as well as by popular vote, so we need our community to come out and support us. Please take a moment to visit the Webby Awards website and cast your vote for the Wu Tsai Institute website in the following categories:
* [School/University](https://vote.webbyawards.com/PublicVoting?#/2023/websites-and-mobile-sites/general-websites-and-mobile-sites/schooluniversity)
* [Best mobile visual design aesthetic](https://vote.webbyawards.com/PublicVoting#/2023/websites-and-mobile-sites/mobile-specific-features-design/best-mobile-visual-design-aesthetic)

Thank you for your support, and let's bring home the trophy for Emulsify!

The Wu Tsai Institute website, built with Emulsify, has been nominated for a Webby Award in the School/University and Best Mobile Visual Design Aesthetic categories! The website was built using Drupal and uses Emulsify for theming. The Webby Awards are determined by a panel of judges and popular vote, so everyone is encouraged to vote for the website on the Webby Awards website.

Wu Tsai Institute

Webby

An Emulsify Drupal site is up for a Webby! Go vote!

Adding a JavaScript library to an Emulsify component may seem daunting if you're new to the process, but it's not as complicated as it may seem. In this guide, we'll show you how to add a JavaScript library to an Emulsify component step-by-step, using the Swiper library as an example.

## Step 1: Find the Library You Want to Use

Before you can add a library to your Emulsify component, you need to know which library you want to use. For this example, we'll use the Swiper library for a carousel component.

## Step 2: Install the Library

Once you've identified the library you want to use, you'll need to install it using npm. From your theme directory, run the following command:

```
npm install swiper --save
```

The `--save` flag will add the library to your `package.json file`, so it isn't just installed on your local setup.

## Step 3: Create a New JavaScript File

Next, move into your component folder and create a new JavaScript file. For our example, we'll call the file `carousel.js`. This is where you will include the library and use it on your component.

## Step 4: Include the Custom JS File in Your Stories File

Include the custom JS file you just created in your `carousel.stories.js` file using the following import statement:

```
import './carousel';
```

## Step 5: Import the JS Library

Next, you need to import the JS library you just installed into `carousel.stories.js`. In our example, we'll import the Swiper library files using the following statement:

```
// Import Swiper library files
import 'swiper/swiper-bundle.min';
```

If there are any CSS files from the library that you'll need, you can also add them to the `carousel.stories.js` file using the following import statement:

```
// import Swiper styles
import 'swiper/swiper-bundle.min.css';
```

Hint: If you start typing the path, your IDE (PHP Storm, VS Code) may help you fill in your path so you can ensure it is correct. It will also prompt you to leave off the `.js` file extension.

## Step 6: Import the Function You Need

In your custom JS file—`carousel.js` in our example—import the function you'll be needing from the library at the top of the file using the following statement:

```
import Swiper from 'swiper/swiper-bundle';
```

## Step 7: Write the Drupal Behavior Function

If you're using this with a Drupal site, you can write the Drupal behavior function in `carousel.js` like so:

```
Drupal.behaviors.carousel = {
  attach(context) {
    // Locate the elements to apply swiper to.
    const carousel = context.getElementsByClassName('swiper');

    if (carousel) {
      // Apply swiper function.
      const swiper = new Swiper('.swiper', {
        // carousel settings go here
      });
      swiper.init();
    }
  },
};
```

This will locate the elements to apply swiper to and apply the swiper function.

## Step 8: Add the Libraries to Your Drupal  Files

When you're ready to use the component in Drupal, you'll need to add the library to your `yourtheme.libraries.yml` file. In our example, we're separating out the swiper library and the carousel custom JS file (but you could also probably put them together into one "library"):

```
carousel:
  js:
    path/to/carousel.js: {}
  dependencies:
    - core/drupal

swiper:
  css:
    theme:
      node_modules/swiper/swiper-bundle.min.css: {}
js:
  node_modules/swiper/swiper-bundle.min.js: {}
  dependencies:
    - core/drupal
```

And include the libraries in your Drupal template file (i.e., `paragraph--carousel.html.twig`):

```
{{ attach_library('yourtheme/swiper') }}
{{ attach_library('yourtheme/carousel') }}
```

## Conclusion and reference files
Now you know how to add a JavaScript library to an Emulsify component.

Here are the files used in this article for your reference.

{% gist url="https://gist.github.com/amazingrando/df9c1ee90c450e6324d2c84f140df6cc"%}{% /gist %}


Adding a JavaScript library to an Emulsify component may seem daunting if you're new to the process, but it's not as complicated as it may seem. In this guide, we'll show you how to add a JavaScript library to an Emulsify component step-by-step, using the Swiper library as an example.

Adding a JS library to an Emulsify Component

adding js

Adding a JS library to an Emulsify Component in Drupal

The Emulsify team is keenly watching the work of the Design Tokens Community Group and their presentation during Schema 2022 is a great introduction to the upcoming design token file format.

{% youtube url="https://www.youtube.com/embed/ssOdzxZdg58" /%}


The Design Tokens Community Group (DTCG) is defining a standard design tokens file format, which aims to make sharing design tokens between different tools seamless.

design-tokens-schema

design tokens 2022

Introducing the design tokens file format (from Schema 2022)

We recommend reading ["What is BEM (Block, Element, Modifier) and How can it be used with Drupal Emulsify Twig"](https://www.specbee.com/blogs/bem-block-element-modifier-with-drupal-emulsify-twig) to learn more about what BEM is and how to implement it in Drupal templates.

> In Drupal, we can use the BEM Twig function with the help of the [Emulsify Twig module](https://github.com/emulsify-ds/emulsify_twig). The BEM function lets you create BEM classes on elements in the components. 
> 
> BEM methodology is extremely useful to developers who want to write and maintain better quality code that can be easy to be handed over and understood. Every element has a purpose which can be easily identified by its name and which block it is coming from. When used right, you will see that using BEM can boost development speed.


The BEM (Block, Element, Modifier) methodology is a widely used naming convention for CSS classes that is popular because of the ease of use it offers. Find out how Emulsify Twig makes it easy in Drupal.

specbee

Specbee teaches how Emulsify Twig makes it easy to write BEM CSS class names

## The Emulsify project has grown a lot since it first launched in 2016. 
We have thousands of people using it across Drupal and WordPress and a vibrant community of contributors.

The best way to commemorate this six-year milestone is by refocusing our energy on Emulsify. We are working with you, the community, to create a roadmap for Emulsify that will guide us into the future. To make this happen we have hired [Greg Storey at Airbag Industries](https://airbagindustries.com/) to research the market surrounding Emulsify. Our goal is to have a roadmap to a strong, better Emulsify that serves your needs.

If you want to skip ahead and just read the Research PDF, jump to the bottom of this article.

## The Project Team
- [Greg Storey](https://www.linkedin.com/in/brilliantcrank/), Project Lead
- [Colin Narver](https://www.linkedin.com/in/colinnarver/), Research Lead
- [Brett Harned](https://www.linkedin.com/in/brettharned/), Research Lead
- [Randy Oest](https://www.linkedin.com/in/amazingrando/), Creative Director at Four Kitchens
- [Brian Lewis](https://www.linkedin.com/in/brian-lewis-ks/), Frontend Architect and Senior Frontend Engineer at Four Kitchens

## Research
The team conducted a series of conversations with project stakeholders, design system subject matter experts, and Emulsify contributors and users. 
In addition, a public survey was conducted the week of July 25, 2022. 

## Key Insight Highlights
The following are a few of the insights from the research.
- There is confusion regarding Emulsify’s past state as a design system and its current state as a bespoke design system builder. Today, developers see Emulsify as a Drupal Theme with Atomic components and basic tokenization. 
- Emulsify should continue development beyond Drupal while engaging deeply with the Drupal community. 
- Investment in proper analytics is essential to assess progress towards milestones. 
- People want to contribute to Emulsify but are confused as to what and how. Pull requests and contribution approvals take too long. 
- Emulsify is a great way to introduce code cohesion, development principals, and process alignment between developers. 
- FEDs want to use Emulsify to improve their work with designers and get designers to be component driven (where it makes sense). 

## SWOT Analysis 

### Strengths 
- Able to flexibly support dynamic content distribution needs at scale. 
- The sweet spot for higher education, government, and media organizations with integration to Drupal. 
- Open source solution built for the Drupal community by the Drupal community. 
- Emulsify is a proven, dependable tool currently deployed at all scale levels. 

### Weaknesses 
- Identity Crisis: Developers are unsure what Emulsify’s grand intention is - a design system or a tokenized theme, or both. 
- Uncertain if decoupling design components from starter makes sense to anyone outside Four Kitchens. 
- Lack of dedicated evangelism. 
- Contributors have to wait too long for pull requests and submissions. 
- Incomplete data on distribution and downloads, No data on downloads through Github or CLI. 
- Emulsify needs better representation on the Drupal website, a primary marketing tool. 
- The Emulsify website needs improvements to be on par with other design system management and template/theme products. 

### Opportunities 
- Design systems and tokens are still in their infancy in their shared definition and successful use at scale. 
- Grow thought leadership through teaching and advocating best practices. 
- Increasing clarity of what and how people can contribute to Emulsify. 
- Evangelism on design systems and Emulsify at large. Bring designers and their work into the product. 
- Find ways to bring designers into the project as contributors. 
- Create a multi-tenet tool that works across teams and tech stacks.

### Threats  
- Too much confusion on what Emulsify is and what it does (design system tool vs. design system). 
- Current users are dominantly FEDs who only see their design system as a tool. 
- As most Emulsify users see the product as a Drupal theme, there are a lot of competing “design systems” for Drupal. 
- Investment costs in Emulsify are low, and switching tools is too easy.

## The Research Document
[Emulsify Research Playback v1.1](/emulsify-research-playback.pdf)

The Emulsify project has grown a lot since it first launched in 2016. We have thousands of people using it across Drupal and WordPress and a vibrant community of contributors. To celebrate, we are working with you, the community, to create a roadmap for Emulsify that will guide us into the future. 

Emulsify Playback

researching

Researching the state of Emulsify

## Introducing the alpha version of the Emulsify UI Kit!

By bringing Emulsify together with Figma, the historic barrier between design and development is blown apart. In this recorded presentation from Decoupled Days in New York, we’ll show you how any web project can progress faster and more efficiently than before.

{% youtube url="https://www.youtube.com/embed/bt0CKVGkl-c" /%}

### Where to find the UI Kit
- [Emulsify UI Kit on Github](https://github.com/emulsify-ds/emulsify-ui-kit)
- [UI Kit Storybook](https://four-kitchens-ui-kit.netlify.app/?path=/story/cover-cover--cover)
- [Figma UI Kit Community File](https://www.figma.com/file/1141071510618977331)


Website production has always progressed while navigating a broad divide: the line separating visual design and frontend development. Now, through Emulsify harnessing Figma’s design tokens plugin, design and development teams can enjoy an automated communication connection.

Randy presenting at Decoupled Days

Capture-2023-05-15-105658

Frontend & Figma Magic, Building a Connected UI Kit for Emulsify

The Emulsify team and community has a lot of energy going around this project and we wanted a place to share it all.
- Upcoming features
- How-to videos and guides
- Contributor features
- More!


We want to communicate what is going on in the world of design systems, Drupal themes, WordPress themes, design tokens, and Emulsify with you.