Reminder: Web Accessibility Compliance Law in effect

The new Colorado accessibility law, HB21-1110, affects university websites and went into effect July 1, 2024. This means that university website owners/content managers must ensure your website content meets the minimum web accessibility standards.

Learn how to meet accessibility standards

Using Utilities Classes

Bootstrap 4 has a robust set of built-in utility classes to handle things like borders, padding, margin, etc. On top of that, we've established set of CU branded utility classes as well listed below. These classes may be used by developers when implementing/developing widgets, as well as by site builders when configuring widgets.

Utility Class Demo



The following video is a demo that walks through some examples of using utility classes to enhance your website design.  

Animations



We've incorporated a small animation library into our Sitefinity platform. These animations are activated 'on scroll'. In other words, they only trigger when the user scrolls to the particular item on the page. The current implementation requires that you add specific HTML to a content block in order to use these animations. Complete documentation can be found here:

Animate on Scroll Library

CU Branded Utility Classes



Borders

ClassRGBA valueVisual
CU_white(255, 255, 255, 1) 
CU_black(0, 0, 0, 1) 
CU_grayLight(221, 221, 221, 1) 
CU_gray
(153, 153, 153, 1) 
CU_grayDark(89, 89, 85, 1) 
CU_goldLight(225, 214, 187, 1) 
CU_gold
(207, 184, 124, 1) 
CU_goldDark(165, 150, 105, 1) 


Border Width

ClassValueResult
border-1border-width: 1px;All borders, 1px width
border-2border-width: 2px;All borders, 2px width
border-3border-width: 3px;All borders, 3px width
border-4border-width: 4px;All borders, 4px width
border-5border-width: 5px;All borders, 5px width

* You can also specify individual borders and their width, up to 5px. For example, using 'border-right-3' would produce a 3px width border on the right side only. It can be combined with other individual border widths to create some interesting results
.

Backgrounds

ClassRGBA valueVisual
bg-CU_transparent(0, 0, 0, 0) 
bg-CU_white(255, 255, 255, 1) 
bg-CU_whiteTransparent(255, 255, 255, .7) 
bg-CU_black(0, 0, 0, 1) 
bg-CU_blackTransparent(0, 0, 0, .7) 
bg-CU_grayLight(221, 221, 221, 1)
 
bg-CU_gray(153, 153, 153, 1) 
bg-CU_grayDark(89, 89, 85, 1) 
bg-CU_goldLight*(225, 214, 187, 1) 
bg-CU_gold*(207, 184, 124, 1) 
bg-CU_goldDark*(165, 150, 105, 1) 
* CU_black text must be used on all gold backgrounds to maintain the minimum 7:1 contrast ratio for accessibility.

Text Color

ClassRGBA valueVisual
text-CU_white(255, 255, 255, 1)Sample
text-CU_black(0, 0, 0, 1)Sample
text-CU_gold(207, 184, 124, 1)Sample

 

Approved Color Combinations

Text ClassBackground ClassVisual
text-CU_blackbg-CU_whiteSample
text-CU_blackbg-CU_whiteTransparentSample
text-CU_whitebg-CU_blackSample
text-CU_whitebg-CU_blackTransparentSample
text-CU_goldbg-CU_blackSample
text-CU_blackbg-CU_grayLightSample
text-CU_blackbg-CU_graySample
text-CU_whitebg-CU_grayDarkSample
text-CU_blackbg-CU_goldLightSample
text-CU_blackbg-CU_goldSample
text-CU_blackbg-CU_goldDarkSample

Combo Classes

Combo ClassVisual
combo-CU_text-black-bg-whiteSample
combo-CU_text-black-bg-whiteTransparentSample
combo-CU_text-white-bg-blackSample
combo-CU_text-white-bg-blackTransparentSample
combo-CU_text-gold-bg-blackSample
combo-CU_text-black-bg-grayLightSample
combo-CU_text-black-bg-graySample
combo-CU_text-white-bg-grayDarkSample
combo-CU_text-black-bg-goldLightSample
combo-CU_text-black-bg-goldSample
combo-CU_text-black-bg-goldDarkSample
CMS Login