New resource coming soon for Yale website developers

September 19, 2019

Creating accessible, responsive, Yale branded websites is about to get easier. Thanks to the new Yale User Interface (UI) Component Library, front-end website developers across the University can benefit from faster development times and more visually consistent, mobile-friendly interfaces. The Web Technologies team created the Yale-branded resource, which it maintains.

What’s Included?

Most users of the resource can drop production components into their website project. The component library includes a production-ready, minified cascading style sheet (CSS) file that contains Yale-branded styles by default. It also includes dozens of utility CSS classes to customize the layout and appearance of any web page. Another feature is a minified JavaScript file to support several basic interactions, such as flyout menus and modal windows. In addition, the production library includes the same fonts used on that are distinctive to Yale’s visual identity.

Getting Support

Much of the library is based on Bootstrap 4, a website development framework. This means that Yale website developers can rely on existing Bootstrap support documentation. Web Technologies is also creating a companion website with instructions on downloading and adding the component library resources, as well as best practices for how to get the most out of the library.

Long Term Plans

The Web Technologies team expects to have version 1.0.0 ready by the end of September. The team will continue providing ongoing support for the style guide-including new features that developers can use. In the coming months, look for announcements about training sessions through the IT Update newsletter, on the Usability and Accessibility website, and through the accessibility for developers mailing list.  The training sessions will introduce developers to the library’s features and how to incorporate these into university projects.

Developers who want to contribute to the source code, open within Yale, may do so after launch. Groups working on university websites may also use the Yale UI Component Library. If  interested in using this resource, please visit the Yale UI Component Library git repository and the companion documentation website. To contribute, provide feedback, or request additional features, create an issue through the repository, or email