The Yale UI Component Library is a resource designers and developers can use to make it easier to build consistent user interfaces that follow Yale’s usability, identity, and accessibility standards.

What is it?

The Component Library is a customized version of Bootstrap 4, one of the most popular front-end web frameworks for building responsive sites. The ITS Digital Accessibility team, which maintains the library, chose to build it on top of Bootstrap so that designers and developers with knowledge of that framework would find it easy to implement. It also allows us to take advantage of a wealth of existing documentation and training resources available for Bootstrap.

How Does it Help?

By using the Component Library, designers and developers can reduce the effort to come up with designs and to build components for their front-ends, resulting in reduced time to complete projects, and resulting in more consistent interfaces. It is aligned with the ITS organizational priorities to provide consistent, clear, usable, and accessible services, and helps site builders adhere to Yale’s web accessibility policy. By using the components provided in the library, and following the special guidance in the documentation, conformance with the Web Content Accessibility Guidelines (WCAG) is greatly simplified. The Component Library also assists in adhering to Yale’s Usability Best Practices and Identity Guidelines for the web.

Where Do I Start?

Use one of the starter pages and other examples to start building your front-end. View the Using Bootstrap to Build Accessible Front-Ends recording (below) of a training session to learn how to use the library and Bootstrap to build your site.


Using Bootstrap to Create Accessible Front-Ends


Email the Accessibility Team at Yale