3.1 #Utilities.Backgrounds Backgrounds Responsive
Classes to control various background properties such as color, size, and position. We also generate background color classes for every color in our pallette, along with hover modified classes that can control background color on hover states. Color classes are not responsive prefixed at this time.
| Class Name | CSS Values |
|---|---|
| .bg-size-cover | background-size: cover; |
| .bg-size-contain | background-size: contain; |
| .bg-pos-center | background-position: center; |
| .bg-repeat-no | background-repeat: no-repeat; |
| .bg-transparent | background-color: transparent; |
| .bg-{color-name} | background-color: $color; |
| .hover:bg-{color-name} | background-color: $color; |
resources/sass/_utilities/backgrounds.scss, line 3
3.2 #Utilities.Borders Borders Responsive
Classes to control border radius, color, thickness, etc. Most classes control individual properties, though some convenience classes do exist. We generate border color classes for every color in our color list using the format border-color-{color-name}.
| Class Name | CSS Values |
|---|---|
| .border-standard | border-width: 1px; border-style: solid; border-color: $gray-80; |
| .border-radius-0px | border-radius: 0px; |
| .border-radius-3px | border-radius: 3px; |
| .border-radius-4px | border-radius: 4px; |
| .border-radius-6px | border-radius: 6px; |
| .border-radius-10px | border-radius: 10px; |
| .border-radius-50 | border-radius: 50%; |
| .border-radius-100 | border-radius: 100%; |
| .border-solid | border-style: solid; |
| .border-dashed | border-style: dashed; |
| .border-none | border: none; |
| .border-1px | border-width: 1px; |
| .border-2px | border-width: 2px; |
| .border-4px | border-width: 4px; |
| .border-color-{color-name} | border-color: $color; |
resources/sass/_utilities/borders.scss, line 3
3.3 #Utilities.Flexbox Flexbox
Utility classes for controlling flex containers and their child elements.
resources/sass/_utilities/flexbox.scss, line 2
3.3.1 #Utilities.Flexbox.Alignment Alignment Responsive
Utilities to control flex item and content alignment
| Class Name | CSS Values |
|---|---|
| .align-items-start | align-items: flex-start; |
| .align-items-center | align-items: center; |
| .align-items-end | align-items: flex-end; |
| .align-items-stretch | align-items: stretch; |
| .align-content-start | align-content: flex-start; |
| .align-content-center | align-content: center; |
| .align-content-end | align-content: flex-end; |
| .align-self-stretch | align-self: stretch; |
| .align-self-center | align-self: center; |
| .justify-items-start | justify-items: flex-start; |
| .justify-items-center | justify-items: center; |
| .justify-items-end | justify-items: flex-end; |
| .justify-content-start | justify-content: flex-start; |
| .justify-content-center | justify-content: center; |
| .justify-content-end | justify-content: flex-end; |
| .justify-content-space-around | justify-content: space-around; |
| .justify-content-space-between | justify-justify-content: space-between; |
resources/sass/_utilities/flexbox.scss, line 8
3.3.2 #Utilities.Flexbox.Direction & Wrapping Direction & Wrapping Responsive
Utilities to control flex direction
| Class Name | CSS Values |
|---|---|
| .flex-dir-row | flex-direction: row; |
| .flex-dir-row-rev | flex-direction: row-reverse; |
| .flex-dir-col | flex-direction: column; |
| .flex-dir-col-rev | flex-direction: column-reverse; |
| .flex-wrap | flex-wrap: wrap; |
| .flex-wrap-no | flex-wrap: nowrap; |
resources/sass/_utilities/flexbox.scss, line 107
3.3.3 #Utilities.Flexbox.Sizing Sizing Responsive
Unsure if it's wise to set both flex-grow and flex-shrink this way. We may want to consider separating these into the different properties.
Utilities for common flex size ratios.
| Class Name | CSS Values |
|---|---|
| .flex-100 | flex: 1 1 100%; |
| .flex-75 | flex: 1 1 75%; |
| .flex-67 | flex: 1 1 67%; |
| .flex-50 | flex: 1 1 50%; |
| .flex-33 | flex: 1 1 33%; |
| .flex-25 | flex: 1 1 25%; |
| .flex-auto | flex: 1 1 auto; |
resources/sass/_utilities/flexbox.scss, line 148
3.4 #Utilities.Interaction Interaction
A series of interaction utilities.
resources/sass/_utilities/_interaction.scss, line 1
3.4.1 #Utilities.Interaction.Cursor Cursor
Utilities to control cursor behavior
| Class Name | CSS Values |
|---|---|
| .cursor-pointer | cursor: pointer; |
| .cursor-auto | cursor: auto; |
| .pointer-events-auto | pointer-events: auto; |
| .pointer-events-none | pointer-events: none; |
resources/sass/_utilities/_interaction.scss, line 7
3.4.2 #Utilities.Interaction.Focus Focus
Utilities for adjusting focus behavior. Most focus behavior is defined at the component level but sometimes we need to make situational adjustments. Also provides a default focus state to interactive elements that need a basic focus outline
| Class Name | CSS Values |
|---|---|
| .focus-default | outline: 2px solid currentColor |
| .focus-inside | outline-offset: -2px; |
resources/sass/_utilities/_interaction.scss, line 35
3.5 #Utilities.Layout Layout
Utilitities in this module will form the bulk of the utilities you'll use in creating pages or components. They control things like positioning, sizing, display mode, etc.
resources/sass/_utilities/_layout.scss, line 5
3.5.1 #Utilities.Layout.Display Display Responsive
If you must hide something visually and need it to be accessible to screen readers, use the sr-only utility. You can undo that hiding at a different breakpoint with not-sr-only.
Utility classes for controlling the display property and element visibility
| Class Name | CSS Values |
|---|---|
| .block | display: block; |
| .inline | display: inline; |
| .inline-block | display: inline-block; |
| .table-cell | display: table-cell; |
| .flex | display: flex; |
| .inline-flex | display: inline-flex; |
| .grid | display: grid; |
| .none | display: none; |
| .vis-visible | visibility: visible; |
| .vis-hidden | visibility: hidden; |
| .sr-only | (many) |
| .not-sr-only | (many) |
resources/sass/_utilities/display.scss, line 1
3.5.2 #Utilities.Layout.Overflow Overflow Responsive
A series of overflow utility classes
| Class Name | CSS Values |
|---|---|
| .overflow-auto | overflow: auto |
| .overflow-hidden | overflow: hidden |
| .overflow-visible | overflow: visible |
| .overflow-x-hidden | overflow-x: hidden |
| .overflow-y-hidden | overflow-y: hidden |
| .overflow-x-auto | overflow-x: auto |
| .overflow-y-auto | overflow-y: auto |
| .overflow-x-scroll | overflow-x: scroll |
| .overflow-y-scroll | overflow-y: scroll |
resources/sass/_utilities/_layout.scss, line 296
3.5.3 #Utilities.Layout.Position Position Responsive
Utility classes for controlling the position property, as well as common positioning values and alignment
| Class Name | CSS Values |
|---|---|
| .relative | position: relative; |
| .absolute | position: absolute; |
| .fixed | position: fixed; |
| .sticky | position: sticky; position: -webkit-sticky; |
| .top-0 | top: 0; |
| .right-0 | right: 0; |
| .bottom-0 | bottom: 0; |
| .left-0 | left: 0; |
| .v-align-top | vertical-align: top; |
| .v-align-middle | vertical-align: middle; |
| .v-align-bottom | vertical-align: bottom; |
| .float-left | float: left; |
| .float-right | float: right; |
resources/sass/_utilities/position.scss, line 1
3.6 #Utilities.Spacing Spacing Responsive
We generate margin and padding utilities along a scale: 0px, 4px and increments of 8px up to 120px. Directions are abbreviated, t = top, r = right, b = bottom, l = left. The table below shows some examples.
| Class Name | CSS Values |
|---|---|
| .pad-t-0px | padding-top: 0px; |
| .pad-r-0px | padding-right: 0px; |
| .pad-b-0px | padding-bottom: 0px; |
| .pad-l-0px | padding-left: 0px; |
| .pad-t-4px | padding-top: 4px; |
| .pad-r-4px | padding-right: 4px; |
| .pad-b-4px | padding-bottom: 4px; |
| .pad-l-4px | padding-left: 4px; |
| .margin-t-8px | margin-top: 8px; |
| .margin-r-8px | margin-right: 8px; |
| .margin-b-8px | margin-bottom: 8px; |
| .margin-l-8px | margin-left: 8px; |
| ... | ... |
| .margin-t-120px | margin-top: 120px; |
| .margin-r-120px | margin-right: 120px; |
| .margin-b-120px | margin-bottom: 120px; |
| .margin-l-120px | margin-top: 120px; |
Non-Unit Classes
We also generate margin utilities with an auto value, as well as some convenience classes for things like centering.
| Class Name | CSS Values |
|---|---|
| .margin-t-auto | margin-top: auto; |
| .margin-r-auto | margin-right: auto; |
| .margin-b-auto | margin-bottom: auto; |
| .margin-l-auto | margin-left: auto; |
| .margin-center | margin-left: auto; margin-right: auto; |
| .margin-auto | margin: auto; |
| .margin-0px | margin: 0px; |
resources/sass/_utilities/spacing.scss, line 3
3.7 #Utilities.Typography Typography Responsive
Utility classes for controlling type (fonts). At the most basic, we can set serif or sans-serif fonts.
| Class Name | CSS Values |
|---|---|
| .font-serif | font-family: 'Calastoga', serif; |
| .font-sans-serif | font-family: 'Lato', sans-serif; |
resources/sass/_utilities/typography.scss, line 3
3.7.1 #Utilities.Typography.Alignment Alignment Responsive
Classes for setting text alignment
| Class Name | CSS Values |
|---|---|
| .text-align-left | text-align: left; |
| .text-align-center | text-align: center; |
| .text-align-right | text-align: right; |
resources/sass/_utilities/typography.scss, line 158
3.7.2 #Utilities.Typography.Line Height Line Height Responsive
Line height classes are mostly unitless which is not considered a good modern practice among some typography nerds. Worth exploring improving this at some point.
Classes for setting line height.
| Class Name | CSS Values |
|---|---|
| .line-height-1 | line-height: 1; |
| .line-height-1_15 | line-height: 1.15; |
| .line-height-1_2 | line-height: 1.2; |
| .line-height-1_5 | line-height: 1.5; |
| .line-height-2 | line-height: 2; |
| .line-height-24px | line-height: 24px; |
resources/sass/_utilities/typography.scss, line 116
3.7.3 #Utilities.Typography.Sizes Sizes Responsive
Other sizes than this scale do exist throughout the application, but we should aim to remove them if possible, or codify them into the preferred scale. For this reason, you will see font-size classes used despite not being documented here
Classes for setting font sizes. Standard font sizes are listed here and this is the preferred type scale.
| Class Name | CSS Values |
|---|---|
| .font-size-14px | font-size: 14px; |
| .font-size-16px | font-size: 16px; |
| .font-size-20px | font-size: 20px; |
| .font-size-24px | font-size: 24px; |
| .font-size-36px | font-size: 36px; |
| .font-size-48px | font-size: 48px; |
| .font-size-64px | font-size: 64px; |
| .font-size-96px | font-size: 96px; |
resources/sass/_utilities/typography.scss, line 32
3.7.4 #Utilities.Typography.Style Style
Classes for setting font / text style and decoration.
| Class Name | CSS Values |
|---|---|
| .font-italic | font-style: italic; |
| .text-dec-underline | text-decoration: underline; |
| .text-dec-none | text-decoration: none; |
| .text-capitalize | text-transform: capitalize; |
| .text-uppercase | text-transform: uppercase; |
| .text-overflow-ellipsis | text-overflow: ellipsis; |
| .text-line-limit-2 | limits text to 2 lines |
resources/sass/_utilities/typography.scss, line 221
3.7.5 #Utilities.Typography.Weight Weight
Classes for setting font weight. We use numbered weights which are expressed as multiples of 100. We drop the 0s for convenience.
| Class Name | CSS Values |
|---|---|
| .font-w-1 | font-weight: 100; |
| .font-w-2 | font-weight: 200; |
| .font-w-3 | font-weight: 300; |
| .font-w-4 | font-weight: 400; |
| .font-w-5 | font-weight: 500; |
| .font-w-6 | font-weight: 600; |
| .font-w-7 | font-weight: 700; |
| .font-w-8 | font-weight: 800; |
| .font-w-9 | font-weight: 900; |
resources/sass/_utilities/typography.scss, line 198