**Unlocking the Power of Emulsify for Higher Education Web Development**

The integration of design systems and component-driven development has revolutionized web development across industries, including higher education. At Four Kitchens, we’re proud to contribute to this evolution through Emulsify, an open-source project designed to streamline web development processes while improving collaboration between teams. In this blog post, we’ll explore what Emulsify is, its role in web development for higher education, and how it enhances accessibility, consistency, and productivity.

{% youtube url="https://www.youtube.com/watch?v=P0NvYJ1O38o" /%}

### Setting the Stage: What is Emulsify?

Emulsify is a free, open-source project that helps accelerate web development by providing tools with sensible defaults and assumptions. It’s used by thousands of Drupal websites and is the backbone for many agencies’ and universities’ web development processes. Initially launched in 2016, Emulsify was built on Pattern Lab and later transitioned to Storybook as the core component library. Over the years, Emulsify has continuously evolved to meet the ever-changing needs of web teams.

One of Emulsify’s standout features is its ability to integrate Figma into the development process, connecting design files to frontend components that can then be wired directly into a Drupal CMS. This creates a smooth, efficient pathway from design to implementation, similar to a "farm-to-table" approach, where each step is connected and seamless.

### The Benefits of Emulsify in Higher Education Web Development

Web development in higher education can be complex, with diverse needs across departments, schools, and research centers. These institutions often require a balance between customization and brand consistency, which can lead to cumbersome and lengthy development processes. This is where Emulsify shines.

At its core, Emulsify is built on the concept of component-driven design and development, also known as atomic design. This philosophy involves creating small, reusable components—such as buttons or cards—that aggregate into larger designs like entire web pages. By systematizing the development process in this way, Emulsify allows for better maintainability and easier updates across websites.

One key advantage of Emulsify is that it can run as a standalone component library or be integrated into a Drupal site, making it flexible for different development environments. This flexibility means universities can hire frontend developers without Drupal-specific knowledge, further streamlining the development process.

### Improved Collaboration Between Designers and Developers

One of the major pain points in web development has historically been the disconnect between designers and developers. Designers often create custom, visually stunning elements, while developers are left trying to recreate these designs in code—often without a clear understanding of the design intent. This "throw it over the fence" approach can lead to frustration, delays, and inconsistent user experiences.

Emulsify solves this problem by improving collaboration between designers and developers. Through the use of design tokens—small, discrete design decisions such as colors, spacing, or border-radius—Emulsify helps bridge the communication gap. Design tokens provide a shared language between designers and developers, allowing them to speak in the same terms when discussing a design. For example, a color might be defined as "Purple 800" rather than a specific hex code, making it easier for both teams to stay aligned.

Moreover, Emulsify’s integration with Figma allows designers to push their design changes directly to the development team through a shared token system. This means that when a designer updates a color or spacing value in Figma, the change automatically propagates through the component library and into the frontend code. The result is a faster, more efficient workflow where design changes can be made and implemented with minimal friction.

### Enhancing Accessibility and Compliance

Accessibility is a critical aspect of web development, especially in higher education, where websites must serve diverse populations with varying abilities. Emulsify places a strong emphasis on accessibility, offering built-in tools to ensure that web components meet the highest standards of compliance.

Emulsify includes automated testing for accessibility, measuring against WCAG 2.2 AA and AAA standards. By incorporating these tests into the development process, web teams can be confident that their sites will meet legal requirements and provide an inclusive experience for all users. Additionally, Emulsify’s component library has been vetted and tested by people with disabilities, ensuring that elements like accordions and menus are accessible out of the box.

### Ensuring Consistency Across Departments

At many universities, each department or research center demands its own website, often with unique branding and design requirements. This can lead to a patchwork of sites that vary wildly in terms of user experience, visual consistency, and functionality. Emulsify addresses this issue by offering a design system that supports both brand consistency and flexibility.

Using Emulsify, institutions can create a foundational design system that supports variations while maintaining core branding elements. For instance, departments can choose different layouts, headers, and styles within the approved design system, allowing them to express their individuality while still adhering to institutional branding guidelines.

### Conclusion: A Game Changer for Higher Education

Emulsify is more than just a development tool; it’s a comprehensive system that brings designers, developers, and stakeholders together to create more efficient, accessible, and consistent websites. For higher education institutions, this means faster development cycles, reduced technical debt, and websites that are easier to maintain and update.

Whether you’re working on a small departmental website or a large institutional platform, Emulsify can help streamline the process, improve collaboration, and ensure that your site is accessible to all. By embracing component-driven development and design tokens, you’ll be better equipped to meet the challenges of modern web development, providing a better experience for your users and a more efficient workflow for your team. 

If you're ready to see how Emulsify can transform your web development process, get in touch with us for a one-on-one session! We’d love to help you get started.

Emulsify is the ultimate toolkit for fast, accessible, and consistent web development for Drupal. Watching this webinar will show you how Emulsify streamlines collaboration between designers and developers, creates reusable components, and ensures top-tier accessibility for higher education websites. Say goodbye to inefficient workflows and hello to faster, more cohesive sites.


webinar

From silos to synergy: Emulsify’s impact on higher ed website development

The world of frontend development is ever-evolving, with new methodologies and tools constantly emerging to streamline processes and enhance efficiency. Two such innovations, [Single Directory Components (SDC)](https://www.drupal.org/project/sdc) and Emulsify, are making significant waves in the development community. While both aim to build reusable component libraries, they take different paths to achieve this goal. 

This article will explore how SDC and Emulsify align and the ongoing efforts to [convert our UI Kit component library](https://github.com/emulsify-ds/emulsify-ui-kit) to support SDC this quarter.

## Understanding SDC and Emulsify

At their core, SDC and Emulsify help developers create and maintain a library of reusable components. However, they do so in distinct ways:

__Emulsify:__

* Emulsify is a platform-agnostic tool that can function as a standalone component library or be integrated into Drupal's theme system.

__Single Directory Components (SDC):__

* SDC, on the other hand, is specifically tailored for Drupal.
* While this setup demands more effort to start frontend development, it is deeply integrated into the Drupal ecosystem, offering a more Drupal-centric approach to component management.

## SDC and Emulsify: Similarities and Differences

Despite their different approaches, SDC and Emulsify share many similarities, particularly in organizing components. As we work on converting our UI Kit to support SDC, we are making two critical updates that reflect this alignment:

__Component YML Schema:__

* We are updating the component's YML schema to accommodate more component information, moving away from the flat data schema we previously used. This change is relatively straightforward and can be implemented in existing projects with minimal effort.
* This update will allow developers to define richer, more detailed configurations for their components, making the component library more flexible and easier to maintain.

Example: 
```yaml
# Old YML Schema 
logo_src: '/assets/images/logo.svg' 
logo_modifiers: 'large' 
```

```yaml
# New YML Schema
name: Logo
group: Components
status: stable
props:
  type: object
  required:
    - logo_src
  properties:
    logo_src:
      type: string
      title: Logo Source
      description: The source path of the logo.
      data: '/assets/images/logo.svg'
    logo_modifiers: 'large'   
```

__Webpack Build Tooling:__

* Emulsify's Webpack configuration is being updated to support the different namespacing conventions used by SDC.
* This change is more complex but crucial for ensuring seamless integration between the two systems. 

Example:

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

## Converting Your Project to Support SDC

If you're using Emulsify and are considering transitioning to SDC, the good news is that the conversion process is relatively simple. Essentially, you will need to update your components YML schema to the structure previously mentioned and change your Webpack configuration to compile CSS into the same directory as the SCSS file. See "Create separate CSS files per component" here: [Create separate CSS files per component](https://www.emulsify.info/docs/supporting-projects/webpack-and-build).

## While SDC and Emulsify may appear to compete, they are, in fact, complementary tools

They offer different approaches to solving the same problem—building reusable component libraries. 

By understanding their differences and similarities and making the necessary updates to your projects, you can leverage the strengths of both tools to enhance your front-end development process. 

As we evolve our UI Kit component library to support SDC, we're excited to see how this alignment will empower developers to create even more powerful and flexible web applications. Stay tuned for more updates as we roll out these changes!


Discover the similarities and differences between Single Directory Components (SDC) and Emulsify, two powerful tools for building reusable component libraries. As we transition our UI Kit to support SDC, we highlight key updates and offer guidance on converting existing projects. Whether you’re using Emulsify or SDC, this guide will help you enhance your frontend development process.

Ready to streamline your component library?

Embracing the Future of Component Libraries: Single Directory Components and Emulsify

# 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](https://github.com/fourkitchens/sous-drupal-project/blob/main/docs/features.md).

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

```bash
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](https://github.com/fourkitchens/sous-drupal-project/blob/main/docs/features.md) 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](https://www.drupal.org/docs/extending-drupal/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.

![emulsify-drupal-project-architecture](//images.ctfassets.net/il3zdpvri0hi/2qBP6k8BLQRjCuyqEpsirk/5997c34904fc5335b7becf55be4c0af0/emulsify-drupal-project-architecture.png)

### 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?

![warp-whistle-diff](//images.ctfassets.net/il3zdpvri0hi/3U5Omw0RxY3B97SEZb11ua/3f1967defe1083bf41bea1d9b190a88e/warp-whistle-diff.png)

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](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](https://www.emulsify.info/)
- [Join us on Slack](https://join.slack.com/t/emulsify/shared_invite/zt-1ujfwwcvr-ynvUPkEgWYuaby~wPaHt8g)
- 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

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.

roadmap-updates

Emulsify roadmap updates from DrupalCon Portland 2024

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.