Utilities

Notes on Implementation

We implement Bootstrap’s Utilities as is, with some exceptions described below. The documentation for Bootstrap Utilities is generally applicable.

Warning

Utilities are very powerful, as they generally use the CSS !important declaration. In general, CSS !important should be avoided wherever possible, as it may create technical debt, have unintended consequences, and break accessibility. Developers must ensure their code is accessible when using utility classes. Developers should extend the UI library, rather than use text utilities, where possible.

Background Color Utilities

To generate background variant styles, we use our own mixin, yale-bg-variant, rather than Bootstrap’s bg-variant. Our variant sets more opinionated styles, especially with regard to accessibility and text color.

This is a background style based on the yale theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a background style based on the primary theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a background style based on the secondary theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a background style based on the success theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a background style based on the info theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a background style based on the warning theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a background style based on the danger theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a background style based on the light theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a background style based on the dark theme color and this is a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

Text Utilities

There are several differences between Bootstrap’s text utilities and the Yale Component Library’s:

  • We offer additional font family classes:
    • .text-monospace
    • .text-font-family-sans-serif
    • .text-font-family-sans-light
    • .text-font-family-sans-medium
    • .text-font-family-serif
  • To generate text color variants, we use our own mixin, yale-text-emphasis-variant rather than Bootstrap’s text-emphasis-variant. Our variant tries to ensure sufficient color contrast accessibility.
  • We do not include .text-black-50 or .text-white-50 from Bootstrap.
  • We add .text-base-size, which resets the text’s font size and line height.

This is a text utility style based on the text-monospace. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-sans-serif. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-sans-light. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-sans-medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-font-family-serif. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-lowercase. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-uppercase. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-capitalize. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.

This is a text utility style based on the text-muted. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis sapien lorem, rhoncus ultricies orci iaculis vitae. Phasellus ipsum erat, imperdiet non porttitor vitae, eleifend sed ex.