In late 2022 MCC decided to migrate its public website to the General Service Administration’s (GSA) cloud.gov/pages platform in order to save a significant amount of money on web hosting. Since the website’s page templates would need to be re-coded for the new platform, this was an incredible opportunity to adopt the U.S. Web Design System (USWDS) and adapt it so that the website’s look-and-feel would not change.

The Challenge

MCC’s codebase, including its CSS files were last written from the ground up in 2015. In the nearly ten years since then, the CSS landscape had changed entirely including the wide adoption of several CSS methods for displaying content. In addition, the files had a decade of cruft and “bolted-on” fixes.
To make the change, our goal was to maintain the website’s existing look-and-feel, color palette and agency typography. I also mapped the website’s existing patterns and components in the current Web Style Visual Style Guide to the USWDS patterns and components.

The Solution

We adopted version 3 of the USWDS, which is an incredibly robust, well thought out, customizable design system. The documentation is deep and detailed and after spending some time familiarizing myself with its concepts, components and patterns adapting it to keep the website’s existing look and feel was fairly easy. After mapping the existing website’s patterns and components to the USWDS patterns and components and using the existing USWDS custom styles SASS file, I also created several MCC-specific SASS files for easy long-term maintenance and expandability.

Final Product

Organization

MCC