Using CU Utilities

Bootstrap 4 has a robust set of builtin utility classes to handle things like borders, padding, margin, etc. Some utility classes utilize color, and we have come up with an established set of CU branded color options for these. These classes may be used by developers when implementing/developing widgets, as well as by site builders when configuring widgets.

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

ClassValueVisual
border-1border-width: 1px; 
border-2border-width: 2px; 
border-3border-width: 3px; 
border-4border-width: 4px; 
border-5border-width: 5px; 


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 and FF Template Numbers

Combo ClassF&F Template NumberVisual
combo-CU_text-black-bg-whitecombo-TemplateOneSample
combo-CU_text-black-bg-whiteTransparentcombo-TemplateSix
(future state on F&F)
Sample
combo-CU_text-white-bg-blackcombo-TemplateThreeSample
combo-CU_text-white-bg-blackTransparentcombo-TemplateSeven
(future state on F&F)
Sample
combo-CU_text-gold-bg-blackcombo-TemplateFiveSample
combo-CU_text-black-bg-grayLightcombo-TemplateEight 
(future state on F&F)
Sample
combo-CU_text-black-bg-graycombo-TemplateNine 
(future state on F&F)
Sample
combo-CU_text-white-bg-graydarkcombo-TemplateFour Sample
combo-CU_text-black-bg-goldLightcombo-TemplateTen 
(future state on F&F)
Sample
combo-CU_text-black-bg-goldcombo-TemplateTwoSample
combo-CU_text-black-bg-goldDarkcombo-TemplateEleven 
(future state on F&F)
Sample