Next-Generation Design System for Multi-Site Drupal Platform

The Challenge

We created Segal Benz’s platform to standardize how their clients’ benefits sites are created, managed, and deployed using modern Drupal. Since 2018, the platform has amassed an impressive roster that includes a wide variety of brands, such as Adobe, Stripe, Philips, and Verizon, among many others, all sharing a growing set of custom features and each with its own unique theme. In the years since its inception, Chromatic had mostly streamlined the creation of new sites and fine-tuned the ongoing maintenance of the platform, but one significant bottleneck remained: the front-end. It had become clear that each site having its own unique theme makes for inefficient onboarding of new tenants and encumbers day-to-day maintenance.

Chromatic’s Approach

Our team built a centralized collection of extensible and configurable components from which all sites on the platform could pull, replacing many unique site-specific implementations and setting a standard for future new features. This dramatically reduced the amount of duplicate template and styling code, and streamlined the theming process for new sites. It also provided an opportunity for designers and developers to more easily collaborate on the creation of compelling new experiences for all sites on the platform.

The recent adoption of Single Directory Components in Drupal Core offered an excellent opportunity to facilitate deeper integration of components within the platform while simplifying component creation and maintenance, as well as the creation of sdc_library, a Drupal-native component library.

The Results

• Greatly reduced template footprint in client themes: More than half of the template code in tenant themes is now replaced with shared components available platform-wide. This reduces both the amount of code that has to be created to onboard a new client to the platform, as well as the number of bugs and other complications that arise during day-to-day maintenance of the platform.
• More than a third of all Sass code converted to pure CSS: CSS has matured immensely since preprocessing tools like Sass revolutionized the way styles are authored for the web. During our early explorations, we found that the simplicity of working with CSS directly far outweighs the ever-shrinking benefits of using Sass. Reducing our reliance on third-party tools to author and generate static assets speeds up our builds, simplifies workflows, and will eventually lead to less time spent on tool maintenance and upgrades.
• 36 reusable components with configurable styles: The team identified the most commonly used features on the platform and replaced the various, often duplicative implementations spread across 20+ themes with a universal set of Drupal Single Directory Components. These components offer a great deal of flexibility, and their stylesheets use modern CSS features such as custom properties (a.k.a. CSS variables) to configure each component’s appearance.
• Open-Source Contribution: As part of the project, Chromatic created and published sdc_library, a Drupal module that provides component library experience allowing site owners, designers, developers, and stakeholders to preview all components in a Drupal system, explore how those components behave under varying content conditions, and how they appear under varying container widths.
• Enhanced collaboration w/designers: Using a component-based approach to front-end development improved how developers and designers talk about distinct front-end features. Components help establish clearer boundaries that were previously blurry at times.

Conclusion

The consolidation of markup and interactive functionality into a single set of flexible, reusable components has greatly reduced the amount of code that requires maintenance, thereby avoiding a future in which the complexity of the system and the cost of day-to-day maintenance get in the way of true innovation. Through the careful deployment of design systems thinking and leveraging modern Drupal features, Chromatic helped Segal Benz secure the future of its benefits site platform as a compelling and cost-effective communication tool for its clients.