UtilityClasses.md

CSS Utility Classes

A set of styling tools to allow you to consistently and dependably apply styling while still allowing flexibilty in design patterns.

Text

Alignment

.text-left .text-center .text-right

Colours

.text-white .text-black .text-grey-700 .text-ubc-blue .text-ubc-blue-sea .text-unit-primary .text-unit-secondary .text-unit-tertiary .text-unit-accent

Sizes

.text-xs [12px] .text-sm [14px] .text-base [16px] .text-lg [18px] .text-xl [20px] .text-2xl [24px] .text-3xl [28px] .text-4xl [32px] .text-5xl [36px] .text-6xl [44px] .text-7xl [54px] .text-8xl [64px]

Styles

.text-uppercase .text-lowercase .text-lead .h1 .h2 .h3 .h4 .h5 .h6

Font styles

.font-serif .font-sans .font-semibold

Background colours

.bg-white .bg-grey-100 .bg-ubc-blue .bg-ubc-blue-sea .bg-ubc-blue-cobalt .bg-ubc-blue-cornflower .bg-ubc-blue-neptune .bg-ubc-blue-polar .bg-ubc-blue-frost .bg-unit-primary .bg-unit-secondary .bg-unit-tertiary .bg-unit-accent .bg-none

Widths

.w-half [50%] .w-one-third [33.33333%] .w-two-thirds [66.66667%] .w-one-quarter [25%] .w-three-quarters [75%] .w-one-fifth [20%] .w-two-fifths [40%] .w-three-fifths [60%] .w-four-fifths [80%] .w-one-sixth [16.66667%] .w-five-sixths [83.33333%] .w-one-twelfth [8.33333%] .w-five-twelfths [41.66666%] .w-seven-twelfths [58.33333%] .w-eleven-twelfths [91.66666%] .w-full [100%]

Margins

Top, right, bottom and left

.m-0 [0] .m-4 [16px] .m-6 [24px] .m-8 [32px] .m-12 [48px] .m-16 [64px]

Top and bottom

.my-0 [0] .my-4 [16px] .my-6 [24px] .my-8 [32px] .my-12 [48px] .my-16 [64px]

Right and left

.mx-0 [0] .mx-4 [16px] .mx-6 [24px] .mx-8 [32px] .mx-12 [48px] .mx-16 [64px]

Top

.mt-0 [0] .mt-1 [4px] .mt-2 [8px] .mt-4 [16px]

Right

.mr-0 [0] .mr-1 [4px] .mr-2 [8px] .mr-4 [16px]

Bottom

.mb-0 [0] .mb-1 [4px] .mb-2 [8px] .mb-4 [16px]

Left

.ml-0 [0] .ml-1 [4px] .ml-2 [8px] .ml-4 [16px]

Padding

Top, right, bottom and left

.p-0 [0] .p-4 [16px] .p-6 [24px] .p-8 [32px] .p-12 [48px] .p-16 [64px]

Top and bottom

.py-0 [0] .py-4 [16px] .py-6 [24px] .py-8 [32px] .py-12 [48px] .py-16 [64px]

Right and left

.px-0 [0] .px-4 [16px] .px-6 [24px] .px-8 [32px] .px-12 [48px] .px-16 [64px]

Top

.pt-0 [0] .pt-1 [4px] .pt-2 [8px] .pt-4 [16px]

Right

.pr-0 [0] .pr-1 [4px] .pr-2 [8px] .pr-4 [16px]

Bottom

.pb-0 [0] .pb-1 [4px] .pb-2 [8px] .pb-4 [16px]

Left

.pl-0 [0] .pl-1 [4px] .pl-2 [8px] .pl-4 [16px]