Variables

Font Variables

2 approved font styles to choose from.

Examples

$font-stack-opensans
Open Sans

$font-stack-caveat-new
Caveat

Code
					
font-family: $font-stack-opensans;
font-family: $font-stack-caveat-new;
Notes

Individual fonts should never be listed in the scss files.

Resources

Sass File(s)/sass/base/_variables.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Color Variables

Approved colors to choose from.

Examples

$red
 

$dkRed
 

$yellow
 

$green
 

$teal
 

$blue
 

$purple
 

$white
 

$ltGray
 

$mdGray
 

$dkGray
 

$darkestGray
 

$black
 

$errorRed
 

$alertYellow
 

Code
					
color: $blue;
Notes

Variable names (and all other Sass identifiers) can use hyphens and underscores interchangeably. For example, if you define a variable called $main-width, you can access it as $main_width, and vice versa.

The variables should be used whenever possible instead of listing the actual Hex numbers to define colors.

Resources

Sass File(s)/sass/base/_variables.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Border Variables

Pre-defined border sizes to use.

Examples

$border-solid-thick

$border-solid-medium

$border-solid-thin

Code
					
border: $border-solid-thick $blue;
Notes

None at this time.

Resources

Sass File(s)/sass/base/_variables.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Width Variables

Pre-defined width variables.

Examples

$full-width-pixels
width: 1034px;

$full-width-pixels-1500
width: 1500px;

$full-percent
width: 100%;

Code
					
width: $full-percent;
Notes

None at this time.

Resources

Sass File(s)/sass/base/_variables.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

Breakpoint Variables

Easily add breakpoint widths to stylesheets with these variables.

Examples

$break-medium
450px

$break-medlarge
600px

$break-large
800px

$break-xtralarge
1000px

Code
					
@media only screen and (min-width: $break-medlarge) { }
Notes

None at this time.

Resources

Sass File(s)/sass/base/_variables.scss
JS File(s)None Required
JS FunctionsNone
Locale KeysNone

Accessibility

None at this time.

To Top