CSS Helpers

Special Spacing Helpers

.display-inline Sets display CSS property to inline.
.zero-padding Sets padding CSS property to 0.
.zero-padding-top Sets padding-top CSS property to 0.
.zero-left-margin Sets margin-left CSS property to 0.
.zero-bottom-margin Sets margin-bottom CSS property to 0.
.no-border Sets border CSS property to none.
.col-centered Sets margin CSS property to 0 auto and float to none.

Background Helpers

All CFA primary and secondary colors can be prefixed with bg- to set the background-color CSS property of an element to that color.

Example: .bg-p_purple corresponds to background-color: $p_purple; and $p_purple is a SASS variable for hex value #5972c8.

.bg-p_blue .bg-s_lightgray .bg-s_warm_blue
.bg-p_green .bg-s_red .bg-s_black
.bg-p_purple .bg-s_warmgray10 .bg-s_coolgray11
.bg-p_coolgray10 .bg-s_purple .bg-s_warmgray6
.bg-s_darkblue .bg-s_coolgray6 .bg-s_darkblue

Standard Spacing Helpers

Choose from 5 spacing sizes xs, sm, md, lg and xl. Smallest size xs starts with 0.25em, sm has size 0.5em, md has size 1em, lg has size 1.5em, and xl is largest with 3em . The sizes can be prefixed with x-, y-, top-, right-, bottom- or left- where x and y stand for x-axis and y-axis respectively. top-, right-, bottom- and left- correspond to the space between content and its border on the given direction.

Examples:
  • .padding-bottom-md corresponds to padding-bottom: 1em;.
  • .padding-y-xs corresponds to padding on y-axis i.e padding: 0 .25em;
  • .padding-x-md corresponds to padding on x-axis i.e padding: 1em 0;

Padding

.padding-xs .padding-x-xs .padding-y-xs .padding-top-xs .padding-right-xs .padding-bottom-xs .padding-left-xs
.padding-sm .padding-x-sm .padding-y-sm .padding-top-sm .padding-right-sm .padding-bottom-sm .padding-left-sm
.padding-md .padding-x-md .padding-y-md .padding-top-md .padding-right-md .padding-bottom-md .padding-left-md
.padding-lg .padding-x-lg .padding-y-lg .padding-top-lg .padding-right-lg .padding-bottom-lg .padding-left-lg
.padding-xl .padding-x-xl .padding-y-xl .padding-top-xl .padding-right-xl .padding-bottom-xl .padding-left-xl

Margins

.margin-xs .margin-x-xs .margin-y-xs .margin-top-xs .margin-right-xs .margin-bottom-xs .margin-left-xs
.margin-sm .margin-x-sm .margin-y-sm .margin-top-sm .margin-right-sm .margin-bottom-sm .margin-left-sm
.margin-md .margin-x-md .margin-y-md .margin-top-md .margin-right-md .margin-bottom-md .margin-left-md
.margin-lg .margin-x-lg .margin-y-lg .margin-top-lg .margin-right-lg .margin-bottom-lg .margin-left-lg
.margin-xl .margin-x-xl .margin-y-xl .margin-top-xl .margin-right-xl .margin-bottom-xl .margin-left-xl

Documentation

Problem Being Solved

Developers need handy CSS classes to adjust margin, padding or colors.

When To Use

Helper CSS classes should be used where creating new element specific CSS class can be avoided and only slight modification to margin, padding or color is required for an HTML element.

When Not To use

Helper CSS classes should not be used where modifications other than padding, margin or color is required.

Usage

Add CSS helper class name to an HTML element to set a specific CSS property.