July 20–24, 2015
Portland, OR

Building a modular front-end framework and style guide for a large organization

Scott Cranfill (Consumer Financial Protection Bureau), Mollie Bates (Consumer Financial Protection Bureau)
11:30am–12:10pm Wednesday, 07/22/2015
Design D139/140
Tags: UX UI, HTML CSS
Average rating: ****.
(4.20, 10 ratings)
Slides:   external link

Prerequisite Knowledge

This talk is mostly about workflow, but a general understanding of the roles of HTML, CSS, and JavaScript is important, as is a working knowledge of Git/GitHub. Some knowledge about front-end build technologies like Grunt, Bower, and Yo is a plus, but not critical.

Description

Keeping code and design in sync across large teams and multiple projects can be a big challenge. At the Consumer Financial Protection Bureau, a new federal agency, the in-house design and development team has created its own modular front-end framework and style guide. Team members will talk about how this has fostered cross-team collaboration and improved the consistency of their products.

After hiring 30 new designers and developers in early 2013, the CFPB Design & Development Team quickly realized that it needed to standardize much of its design and coding practices. The design side of the house set to work on creating the CFPB Design Manual, and after some debate over what path to take, the front-end developers settled on writing Capital Framework, a modular front-end framework written from scratch. Both projects are constantly evolving in the open on GitHub.

“Modular” means that Capital Framework has a component-based architecture where each component is its own repository. We rely on npm and Bower to manage the downloading and updating of components and their dependencies within a project. This setup provides a lot of flexibility and makes it easier for projects using the framework to take advantage of updates and bug fixes at their own convenience.

The framework is also designed to make setting up a new project that adheres to our standards quick and easy. We provide a Yeoman generator that scaffolds out a standardized file structure and Grunt build process, and includes the user’s choice of UI components. For quick prototyping or users that might not be comfortable with a build process, we offer a precompiled version of the framework that includes all of the components. With a team of 70 designers and developers, having these options increases our ability to spin up new projects quickly.

The Design Manual is a resource to help CFPB staff and contractors produce effective, visually-consistent products that are easy for consumers to access, use, and understand. The team uses GitHub issues to openly discuss, design, and update standards. By having the Design Manual’s standards encoded into Capital Framework components, CFPB designers can be confident that the web products that go out the door will accurately reflect our agreed-upon design guidelines.

As we introduce you to these two projects, we’ll discuss how we made decisions, the stumbling blocks we ran into, and what we did to overcome those. We hope attendees will come away from this session with some fresh ideas for producing consistent, high-quality work with a large team and multiple projects.

Photo of Scott Cranfill

Scott Cranfill

Consumer Financial Protection Bureau

Scott Cranfill is a front-end web developer at the Consumer Financial Protection Bureau. He joined the bureau in 2013 as a Technology & Innovation Fellow. While there, he has been an advocate for open source software—both the use and the release of software developed by the bureau’s in-house development team. He currently leads the effort to write about CFPB’s technology work on CFPB Open Tech, at cfpb.github.io. Scott is a co-creator of Capital Framework with Michael Morici (and with great help from the rest of CFPB’s front-end developers, too), and has also shepherded the front-end development on the CFPB Design Manual.

Photo of Mollie Bates

Mollie Bates

Consumer Financial Protection Bureau

Mollie Bates joined the Consumer Financial Protection Bureau as a Technology & Innovation Fellow in 2013. Previously, she was an assistant art director at National Geographic Traveler magazine, and a designer at National Geographic Magazine. Mollie leads AIGA DC’s DotGov Design meetup. She was a member of the AIGA DC board for four years.