An Architectural Case Study


Red Hat needed a new pattern library that would be flexible enough to integrate into our current Drupal 7 site, yet powerful enough to build future D7, D8 and other Red Hat branded sites. This pattern library would create a consistent, brand approved, look across all of our web properties, and become a common UI development platform for Designers, UX, Devs and Project managers.

In this case study we’ll explain our architectural approach to deliver dozens of tightly packaged components to and other web properties through a variety of distribution methods.

This case study includes:

  • Modular Layout and Independent Components

    • A Smart “Opt-In” Context System

    • Element Queries, Susy Grids, Flex-box

  • Automated System for Builds, Tests, Deploys, and Tagging

    • Per Component Visual Regression Testing with Grunt and PhantomCSS

    • Distribution of Versioned Theme using Git Tags and Bower

  • A Common Development Platform

    • Cross-team Collaboration Using a Common Language

    • Fully Documented Styleguide for Multiple Personas

  • Drupal Integration

    • Red Hat internal “contrib” module

    • Per component theming / templates

    • Views UI allowing “build-your-own” WebUX patterns

Session Track

Drupal Showcase

Experience Level


Drupal Version