Overview

Next: Root ›

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --color-sec-black: black;) and are accessed using the var() function (e.g., color: var(--color-sec-black);).

Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, --color-sec-dark is easier to understand than #555555, especially if this same color is also used in other contexts.

IE Support

Internet Explorer, a deprecated browser, lacks CSS variable support. To fill this functionality gap, we use a ponyfill script.

				
	<script type="text/javascript" src="https://unpkg.com/css-vars-ponyfill@1/dist/css-vars-ponyfill.min.js" ></script>
	<script>
	// See documentation for options
	// https://github.com/jhildenbiddle/css-vars-ponyfill
	cssVars({
	  onlyVars  : true,
	  // preserve  : true,
	  onlyLegacy: true,
	  silent: false,
	});
	</script>

Root

‹ Previous: Overview | Next: AMU ›

Rasmussen Brand Colors
Rasmussen Royal Blue Tints
Rasmussen Yellow Tints
Rasmussen Blue Gray Tints
Rasmussen Brand Grayscale
Rasmussen Dark Gray Tints
Rasmussen Medium Gray Tints
Rasmussen Light Gray Tints
Font Weight

All the custom properties in root.css that apply to :root.

Rasmussen Brand Colors Back to top

```
						--color-pri-green: #004712;
					
```

						--color-pri-yellow: #eeb111;

						--color-pri-bright-green: #a6ce39;

Rasmussen Dark Green Tints Back to top

						--color-pri-green--80: #336C41;

						--color-pri-green--60: #669171;

						--color-pri-green--40: #99B5A0;

						--color-pri-green--20: #CCDAD0;

						--color-pri-green--10: #E6EDE7;

Rasmussen Yellow Tints Back to top

						--color-pri-yellow--80: #F1C141;

						--color-pri-yellow--60: #F5D070;

						--color-pri-yellow--40: #F8E0A0;

						--color-pri-yellow--20: #FCEFCF;

						--color-pri-yellow--10: #FDF7E7;

Rasmussen Bright Green Tints Back to top

						--color-pri-bright-green--80: #B8D861;

						--color-pri-bright-green--60: #CAE288;

						--color-pri-bright-green--40: #DBEBB0;

						--color-pri-bright-green--20: #EDF5D7;

						--color-pri-bright-green--10: #F6FAEB;

Rasmussen Brand GrayscaleBack to top

						--color-sec-dark-gray: #414042;

						--color-sec-medium-gray: #595959;

						--color-sec-light-gray: #cacaca;

Rasmussen Dark Gray Tints Back to top

						--color-sec-dark-gray--80: #676668;

						--color-sec-dark-gray--60: #8D8C8E;

						--color-sec-dark-gray--40: #B3B3B3;

						--color-sec-dark-gray--20: #D9D9D9;

						--color-sec-dark-gray--10: #ECECEC;

Rasmussen Medium Gray Tints Back to top

						--color-sec-medium-gray--80: #7A7A7A;

						--color-sec-medium-gray--60: #9B9B9B;

						--color-sec-medium-gray--40: #BDBDBD;

						--color-sec-medium-gray--20: #DEDEDE;

						--color-sec-medium-gray--10: #EEEEEE;

Rasmussen Light Gray Tints Back to top

						--color-sec-light-gray--80: #D5D5D5;

						--color-sec-light-gray--60: #DFDFDF;

						--color-sec-light-gray--40: #EAEAEA;

						--color-sec-light-gray--20: #F4F4F4;

						--color-sec-light-gray--10: #FAFAFA;

Font Weight Back to top

```
						--font-weight-light: 300;
					
```
```
						--font-weight-normal: 400;
					
```
```
						--font-weight-bold: 700;
					
```

Rasmussen

‹ Previous: Root

Each brand has a custom stylesheet that sets new shared custom properties to existing root.css variables. This allows us to (mostly) maintain a single source for component CSS.

Rasmussen Brand Colors

						--color-brand-primary: var(--color-pri-green);

						--color-brand-secondary: var(--color-pri-bright-green);

						--color-brand-tertiary: var(--color-pri-yellow);

Rasmussen Brand Primary Tints

						--color-brand-primary--80: var(--color-pri-green--80);

						--color-brand-primary--60: var(--color-pri-green--60);

						--color-brand-primary--40: var(--color-pri-green--40);

						--color-brand-primary--20: var(--color-pri-green--20);

						--color-brand-primary--10: var(--color-pri-green--10);

Rasmussen Brand Secondary Tints

						--color-brand-secondary--80: var(--color-pri-bright-green--80);

						--color-brand-secondary--60: var(--color-pri-bright-green--60);

						--color-brand-secondary--40: var(--color-pri-bright-green--40);

						--color-brand-secondary--20: var(--color-pri-bright-green--20);

						--color-brand-secondary--10: var(--color-pri-bright-green--10);

Rasmussen Brand Tertiary Tints

						--color-brand-tertiary--80: var(--color-pri-yellow--80);

						--color-brand-tertiary--60: var(--color-pri-yellow--60);

						--color-brand-tertiary--40: var(--color-pri-yellow--40);

						--color-brand-tertiary--20: var(--color-pri-yellow--20);

						--color-brand-tertiary--10: var(--color-pri-yellow--10);

Rasmussen Brand Secondary Colors

						--color-sec-dark: var(--color-sec-dark-gray);

						--color-sec-medium: var(--color-sec-medium-gray);

						--color-sec-light: var(--color-sec-light-gray);

Rasmussen Brand Secondary Dark Tints

						--color-sec-dark--80: var(--color-sec-dark-gray--80);

						--color-sec-dark--60: var(--color-sec-dark-gray--60);

						--color-sec-dark--40: var(--color-sec-dark-gray--40);

						--color-sec-dark--20: var(--color-sec-dark-gray--20);

						--color-sec-dark--10: var(--color-sec-dark-gray--10);

Rasmussen Brand Secondary Medium Tints

						--color-sec-medium--80: var(--color-sec-medium-gray--80);

						--color-sec-medium--60: var(--color-sec-medium-gray--60);

						--color-sec-medium--40: var(--color-sec-medium-gray--40);

						--color-sec-medium--20: var(--color-sec-medium-gray--20);

						--color-sec-medium--10: var(--color-sec-medium-gray--10);

Rasmussen Brand Secondary Light Tints

						--color-sec-light--80: var(--color-sec-light-gray--80);

						--color-sec-light--60: var(--color-sec-light-gray--60);

						--color-sec-light--40: var(--color-sec-light-gray--40);

						--color-sec-light--20: var(--color-sec-light-gray--20);

						--color-sec-light--10: var(--color-sec-light-gray--10);

Rasmussen Font Family

						--font: var(--font-din-light);

						--font-regular: var(--font-din-regular);

						--font-medium: var(--font-din-medium);

						--font-bold: var(--font-din-bold);

Rasmussen Font Weights

						--font-weight-light: var(--font-weight-normal);

						--font-weight-normal: var(--font-weight-normal);

						--font-weight-bold: var(--font-weight-normal);

LP6 Style Guide: CSS Variables