Libraries and Dependencies
This UI style guide is largely built on Bootstrap 4.3. Where possible, we maintained or slightly altered Bootstrap’s default styles. Because web accessibility is a strong driver for this project, we enhanced, reimplemented, or removed parts of Bootstrap that do not facilitate conformance with Yale’s Web Accessibility Policy.
Noteworthy pieces of Bootstrap that we have not and may not include in the component library:
Developers who wish to recompile the UI Component Library to include these assets are responsible for ensuring they are usable and accessible.
We have re-implemented the following parts of Bootstrap to be more appropriate for our purposes:
- Text and Background Utilities
- List Groups
- Progress Bars
In all of these cases, we strove to keep the API broadly similar to Bootstrap, so users who are comfortable with Bootstrap will hopefully find the transition easy.
Focus-Visible is a polyfill for the
:focus-visible pseudo-selector. Browsers implement focus styles inconsistently, such that some browsers will display focus styles when mouse users click on a focusable element. Many designers and developers find that behavior unattractive, and they typically respond by removing focus styles altogether, creating an accessibility problem for users who rely on focus. This polyfill only shows focus styles to keyboard user, and hides from mouse users consistently across browsers.
Sass Color Contrast Function
Because Bootstrap consistently presents color contrast issues, Yale has implemented a Sass color contrast library to force color contrast based on WCAG standards. The library is based on a gist by Sérgio Gomes. It is a best practice to pass all Sass color declarations through the
find-accessible-colors function in order to ensure accessible colors.