Skill Level: 
Intermediate

Aspect Ratios

Responsive suffixes (@sm, @md, @lg and @xl) may be added to the aspect ratio utilities to change the ratio of an item at various breakpoints. For example, dcf-ratio-16x9 dcf-ratio-4x3@md will change the item’s 16×9 aspect ratio to 4×3 at the medium breakpoint.

.dcf-ratio
apply an aspect ratio to an element and specify the ratio with one of the following classes
.dcf-ratio-16x9
apply a 16×9 (landscape) aspect ratio to an element
.dcf-ratio-9x16
apply a 9×16 (portrait) aspect ratio to an element
.dcf-ratio-4x3
apply a 4×3 (landscape) aspect ratio to an element
.dcf-ratio-3x4
apply a 3×4 (portrait) aspect ratio to an element
.dcf-ratio-1x1
apply a 1×1 aspect ratio to an element
.dcf-ratio-child
child element contained within the aspect ratio
Placeholder image.
This example illustrates the difference between the native, square aspect ratio of the image and the 3×4 portrait ratio specified by the utility class. Use in combination with the object-fit and (coming soon) object-position utilities to adjust how the child occupies the space created by the parent aspect ratio.
<div class="dcf-ratio dcf-ratio-3x4 dcf-w-10 dcf-b-solid dcf-b-1 unl-b-light-gray">
  <img class="dcf-ratio-child" src="http://via.placeholder.com/100x100" alt="Placeholder image.">
</div>

Backgrounds

Color

.dcf-bg-transparent
transparent background
.dcf-bg-white
white background
.dcf-bg-overlay-dark
dark, slightly transparent background
.dcf-bg-overlay-light
light, slightly transparent background

Position

.dcf-bg-center
background-position: center
.dcf-bg-top
background-position: top
.dcf-bg-right
background-position: right
.dcf-bg-right-top
background-position: right top
.dcf-bg-right-bottom
background-position: right bottom
.dcf-bg-bottom
background-position: bottom
.dcf-bg-left
background-position: left
.dcf-bg-left-top
background-position: left top
.dcf-bg-left-bottom
background-position: left bottom

Repeat

.dcf-bg-no-repeat
background-repeat: no-repeat
.dcf-bg-repeat
background-repeat: repeat
.dcf-bg-repeat-x
background-repeat: repeat-x
.dcf-bg-repeat-y
background-repeat: repeat-y

Size

.dcf-bg-contain
background-size: contain
.dcf-bg-cover
background-size: cover

None

.dcf-bg-none
no background

Border Color

Border Color (All Sides)

.dcf-b-current
border-color: currentColor, all sides
.dcf-b-transparent
border-color: transparent, all sides

Border Top Color

.dcf-bt-current
border-top-color: currentColor
.dcf-bt-transparent
border-top-color: transparent

Border Right Color

.dcf-br-current
border-right-color: currentColor
.dcf-br-transparent
border-right-color: transparent

Border Bottom Color

.dcf-bb-current
border-bottom-color: currentColor
.dcf-bb-transparent
border-bottom-color: transparent

Border Left Color

.dcf-bl-current
border-left-color: currentColor
.dcf-bl-transparent
border-left-color: transparent

Border Radius

.dcf-circle
circle border radius
.dcf-rounded
rounded corners, all sides
.dcf-rounded-top
rounded top corners
.dcf-rounded-right
rounded right corners
.dcf-rounded-bottom
rounded bottom corners
.dcf-rounded-left
rounded left corners

Border Style

Border Style (All Sides)

.dcf-b-solid
border-style: solid, all sides

Border Top Style

.dcf-bt-solid
border-top-style: solid

Border Right Style

.dcf-br-solid
border-right-style: solid

Border Botttom Style

.dcf-bb-solid
border-bottom-style: solid

Border Left Style

.dcf-bl-solid
border-left-style: solid

Border Width

Border Width (All Sides)

.dcf-b-0
border-width: 0, all sides
.dcf-b-1
border-width: 1px, all sides
.dcf-b-2
border-width: 2px, all sides
.dcf-b-3
border-width: 3px, all sides

Border Top Width

.dcf-bt-0
border-top-width: 0
.dcf-bt-1
border-top-width: 1px
.dcf-bt-2
border-top-width: 2px
.dcf-bt-3
border-top-width: 3px

Border Right Width

.dcf-br-0
border-right-width: 0
.dcf-br-1
border-right-width: 1px
.dcf-br-2
border-right-width: 2px
.dcf-br-3
border-right-width: 3px

Border Bottom Width

.dcf-bb-0
border-bottom-width: 0
.dcf-bb-1
border-bottom-width: 1px
.dcf-bb-2
border-bottom-width: 2px
.dcf-bb-3
border-bottom-width: 3px

Border Left Width

.dcf-bl-0
border-left-width: 0
.dcf-bl-1
border-left-width: 1px
.dcf-bl-2
border-left-width: 2px
.dcf-bl-3
border-left-width: 3px

Box Alignment

Align Items

.dcf-ai-flex-start
align-items: flex-start
.dcf-ai-flex-end
align-items: flex-end
.dcf-ai-center
align-items: center
.dcf-ai-baseline
align-items: baseline
.dcf-ai-stretch
align-items: stretch
.dcf-ai-start
align-items: start
.dcf-ai-end
align-items: end

Align Content

.dcf-ac-flex-start
align-content: flex-start
.dcf-ac-flex-end
align-content: flex-end
.dcf-ac-center
align-content: center
.dcf-ac-stretch
align-content: stretch
.dcf-ac-around
align-content: around
.dcf-ac-between
align-content: between
.dcf-ac-evenly
align-content: evenly
.dcf-ac-start
align-content: start
.dcf-ac-end
align-content: end

Align Self

.dcf-as-auto
align-self: auto
.dcf-as-flex-start
align-self: flex-start
.dcf-as-flex-end
align-self: flex-end
.dcf-as-center
align-self: center
.dcf-as-baseline
align-self: baseline
.dcf-as-stretch
align-self: stretch
.dcf-as-start
align-self: start
.dcf-as-end
align-self: end

Justify Items

.dcf-ji-center
justify-items: center
.dcf-ji-stretch
justify-items: stretch
.dcf-ji-start
justify-items: start
.dcf-ji-end
justify-items: end

Justify Content

.dcf-jc-flex-start
justify-content: flex-start
.dcf-jc-flex-end
justify-content: flex-end
.dcf-jc-center
justify-content: center
.dcf-jc-stretch
justify-content: stretch
.dcf-jc-around
justify-content: around
.dcf-jc-between
justify-content: between
.dcf-jc-evenly
justify-content: evenly
.dcf-jc-start
justify-content: start
.dcf-jc-end
justify-content: end

Justify Self

.dcf-js-center
justify-self: center
.dcf-js-stretch
justify-self: stretch
.dcf-js-start
justify-self: start
.dcf-js-end
justify-self: end

Colors

.dcf-inverse
light color on dark background

CSS Columns

All CSS column utilities have a column-gap of 3.16vw. Responsive suffixes (@sm, @md, @lg, @xl) can be added to target desired breakpoints.

.dcf-columns-1
Lay out content in one column.
.dcf-columns-2
Lay out content in two equal width columns.
.dcf-columns-3
Lay out content in three equal width columns.
.dcf-columns-auto
Lay out content in equal width columns, each with a minimum width of 17.76em.

Display

.dcf-d-none
display: none
.dcf-d-none@screen
display: none on screen, show when printed
.dcf-d-block
display: block
.dcf-d-inline
display: inline
.dcf-d-inline-block
display: inline-block
.dcf-d-flex
display: flex
.dcf-d-inline-flex
display: inline-flex
.dcf-d-grid
display: grid
.dcf-d-inline-grid
display: inline-grid
.dcf-d-table
display: table
.dcf-d-table-cell
display: table-cell

Flexbox

Direction

.dcf-flex-col
flex-direction: column
.dcf-flex-col-rev
flex-direction: column-reverse
.dcf-flex-row
flex-direction: row
.dcf-flex-row-rev
flex-direction: row-reverse

Wrap

.dcf-flex-wrap
flex-wrap: wrap
.dcf-flex-wrap-rev
flex-wrap: wrap-reverse
.dcf-flex-nowrap
flex-wrap: nowrap

Grow & Shrink

.dcf-flex-none
flex: none
.dcf-flex-initial
flex: initial
.dcf-flex-auto
flex: auto
.dcf-flex-1
flex: 1
.dcf-flex-grow-1
flex-grow: 1
.dcf-flex-shrink-0
flex-shrink: 0

Floats

.dcf-float-right
float: right
.dcf-float-left
float: left
.dcf-clear-right
clear: right
.dcf-clear-left
clear: left
.dcf-clear-both
clear: both
.dcf-clearfix
force an element to self-clear its children

Grid

Column Gap

.dcf-col-gap-vw
grid-column-gap: 3.16vw This should be your column-gap of choice unless you have a specific use for the following em-based options.
.dcf-col-gap-1
grid-column-gap: .42em
.dcf-col-gap-2
grid-column-gap: .56em
.dcf-col-gap-3
grid-column-gap: .75em
.dcf-col-gap-4
grid-column-gap: 1em
.dcf-col-gap-5
grid-column-gap: 1.33em
.dcf-col-gap-6
grid-column-gap: 1.77em
.dcf-col-gap-7
grid-column-gap: 2.37em
.dcf-col-gap-8
grid-column-gap: 3.16em
.dcf-col-gap-9
grid-column-gap: 4.21em
.dcf-col-gap-10
grid-column-gap: 5.62em

Row Gap

.dcf-row-gap-1
grid-row-gap: .42em
.dcf-row-gap-2
grid-row-gap: .56em
.dcf-row-gap-3
grid-row-gap: .75em
.dcf-row-gap-4
grid-row-gap: 1em
.dcf-row-gap-5
grid-row-gap: 1.33em
.dcf-row-gap-6
grid-row-gap: 1.77em
.dcf-row-gap-7
grid-row-gap: 2.37em
.dcf-row-gap-8
grid-row-gap: 3.16em
.dcf-row-gap-9
grid-row-gap: 4.21em
.dcf-row-gap-10
grid-row-gap: 5.62em

Height & Width

Height

.dcf-h-0
height: 0
.dcf-h-1
height: .42em
.dcf-h-2
height: .56em
.dcf-h-3
height: .75em
.dcf-h-4
height: 1em
.dcf-h-5
height: 1.33em
.dcf-h-6
height: 1.77em
.dcf-h-7
height: 2.37em
.dcf-h-8
height: 3.16em
.dcf-h-9
height: 4.21em
.dcf-h-10
height: 5.62em
.dcf-h-100%
height: 100%
.dcf-h-100vh
height: 100vw

Min-Height

.dcf-h-min-0
min-height: 0

Max-Height

.dcf-h-max-100%
max-height: 100%
.dcf-h-max-100vh
max-height: 100vh

Width

.dcf-w-0
width: 0
.dcf-w-1
width: .42em
.dcf-w-2
width: .56em
.dcf-w-3
width: .75em
.dcf-w-4
width: 1em
.dcf-w-5
width: 1.33em
.dcf-w-6
width: 1.77em
.dcf-w-7
width: 2.37em
.dcf-w-8
width: 3.16em
.dcf-w-9
width: 4.21em
.dcf-w-10
width: 5.62em
.dcf-w-100%
width: 100%
.dcf-w-100vw
width: 100vw

Min-Width

.dcf-w-min-0
min-width: 0

Max-Width

.dcf-w-max-xs
max-width: 17.76rem
.dcf-w-max-sm
max-width: 23.68rem
.dcf-w-max-md
max-width: 31.57rem
.dcf-w-max-lg
max-width: 42.09rem
.dcf-w-max-xl
max-width: 56.12rem
.dcf-w-max-100%
max-width: 100%
.dcf-w-max-100vw
max-width: 100vw

Margins

Margin (All Sides)

.dcf-m-auto
margin (all sides): auto
.dcf-m-0
margin (all sides): 0
.dcf-m-1
margin (all sides): .42em
.dcf-m-2
margin (all sides): .56em
.dcf-m-3
margin (all sides): .75em
.dcf-m-4
margin (all sides): 1em
.dcf-m-5
margin (all sides): 1.33em
.dcf-m-6
margin (all sides): 1.77em
.dcf-m-7
margin (all sides): 2.37em
.dcf-m-8
margin (all sides): 3.16em
.dcf-m-9
margin (all sides): 4.21em
.dcf-m-10
margin (all sides): 5.62em

Margin Top

.dcf-mt-auto
margin-top: auto
.dcf-mt-0
margin-top: 0
.dcf-mt-1
margin-top: .42em
.dcf-mt-2
margin-top: .56em
.dcf-mt-3
margin-top: .75em
.dcf-mt-4
margin-top: 1em
.dcf-mt-5
margin-top: 1.33em
.dcf-mt-6
margin-top: 1.77em
.dcf-mt-7
margin-top: 2.37em
.dcf-mt-8
margin-top: 3.16em
.dcf-mt-9
margin-top: 4.21em
.dcf-mt-10
margin-top: 5.62em

Margin Right

.dcf-mr-auto
margin-right: auto
.dcf-mr-0
margin-right: 0
.dcf-mr-1
margin-right: .42em
.dcf-mr-2
margin-right: .56em
.dcf-mr-3
margin-right: .75em
.dcf-mr-4
margin-right: 1em
.dcf-mr-5
margin-right: 1.33em
.dcf-mr-6
margin-right: 1.77em
.dcf-mr-7
margin-right: 2.37em
.dcf-mr-8
margin-right: 3.16em
.dcf-mr-9
margin-right: 4.21em
.dcf-mr-10
margin-right: 5.62em

Margin Bottom

.dcf-mb-auto
margin-bottom: auto
.dcf-mb-0
margin-bottom: 0
.dcf-mb-1
margin-bottom: .42em
.dcf-mb-2
margin-bottom: .56em
.dcf-mb-3
margin-bottom: .75em
.dcf-mb-4
margin-bottom: 1em
.dcf-mb-5
margin-bottom: 1.33em
.dcf-mb-6
margin-bottom: 1.77em
.dcf-mb-7
margin-bottom: 2.37em
.dcf-mb-8
margin-bottom: 3.16em
.dcf-mb-9
margin-bottom: 4.21em
.dcf-mb-10
margin-bottom: 5.62em

Margin Left

.dcf-ml-auto
margin-left: auto
.dcf-ml-0
margin-left: 0
.dcf-ml-1
margin-left: .42em
.dcf-ml-2
margin-left: .56em
.dcf-ml-3
margin-left: .75em
.dcf-ml-4
margin-left: 1em
.dcf-ml-5
margin-left: 1.33em
.dcf-ml-6
margin-left: 1.77em
.dcf-ml-7
margin-left: 2.37em
.dcf-ml-8
margin-left: 3.16em
.dcf-ml-9
margin-left: 4.21em
.dcf-ml-10
margin-left: 5.62em

Object-Fit

.dcf-obj-fit-contain
object-fit: contain
.dcf-obj-fit-cover
object-fit: cover

The object-fit utilities use the object-fit-images polyfill for browsers that don't support object-fit. This explains why you might see font-family: "object-fit: contain” or font-family: "object-fit: cover" in the rules.

Demonstration of object-fit contain
Demonstration of object-fit cover

Order (for Flexbox and Grid)

.dcf-1st
first
.dcf-2nd
second
.dcf-3rd
third

Responsive suffixes (@sm, @md, @lg, @xl) can be used with the order utilities to adjust order at the desired breakpoints.

Overflow

.dcf-overflow-visible
overflow: visible
.dcf-overflow-x-visible
overflow-x: visible
.dcf-overflow-y-visible
overflow-y: visible
.dcf-overflow-hidden
overflow: hidden
.dcf-overflow-x-hidden
overflow-x: hidden
.dcf-overflow-y-hidden
overflow-y: hidden
.dcf-overflow-auto
overflow: auto
.dcf-overflow-x-auto
overflow-x: auto
.dcf-overflow-y-auto
overflow-y: auto
.dcf-overflow-scroll
overflow: scroll
.dcf-overflow-x-scroll
overflow-x: scroll
.dcf-overflow-y-scroll
overflow-y: scroll

Padding

Padding (All Sides)

.dcf-p-0
padding (all sides): 0
.dcf-p-1
padding (all sides): .42em
.dcf-p-2
padding (all sides): .56em
.dcf-p-3
padding (all sides): .75em
.dcf-p-4
padding (all sides): 1em
.dcf-p-5
padding (all sides): 1.33em
.dcf-p-6
padding (all sides): 1.77em
.dcf-p-7
padding (all sides): 2.37em
.dcf-p-8
padding (all sides): 3.16em
.dcf-p-9
padding (all sides): 4.21em
.dcf-p-10
padding (all sides): 5.62em

Padding Top

.dcf-pt-0
padding-top: 0
.dcf-pt-1
padding-top: .42em
.dcf-pt-2
padding-top: .56em
.dcf-pt-3
padding-top: .75em
.dcf-pt-4
padding-top: 1em
.dcf-pt-5
padding-top: 1.33em
.dcf-pt-6
padding-top: 1.77em
.dcf-pt-7
padding-top: 2.37em
.dcf-pt-8
padding-top: 3.16em
.dcf-pt-9
padding-top: 4.21em
.dcf-pt-10
padding-top: 5.62em

Padding Right

.dcf-pr-0
padding-right: 0
.dcf-pr-1
padding-right: .42em
.dcf-pr-2
padding-right: .56em
.dcf-pr-3
padding-right: .75em
.dcf-pr-4
padding-right: 1em
.dcf-pr-5
padding-right: 1.33em
.dcf-pr-6
padding-right: 1.77em
.dcf-pr-7
padding-right: 2.37em
.dcf-pr-8
padding-right: 3.16em
.dcf-pr-9
padding-right: 4.21em
.dcf-pr-10
padding-right: 5.62em

Padding Bottom

.dcf-pb-0
padding-bottom: 0
.dcf-pb-1
padding-bottom: .42em
.dcf-pb-2
padding-bottom: .56em
.dcf-pb-3
padding-bottom: .75em
.dcf-pb-4
padding-bottom: 1em
.dcf-pb-5
padding-bottom: 1.33em
.dcf-pb-6
padding-bottom: 1.77em
.dcf-pb-7
padding-bottom: 2.37em
.dcf-pb-8
padding-bottom: 3.16em
.dcf-pb-10
padding-bottom: 5.62em

Padding Left

.dcf-pl-0
padding-left: 0
.dcf-pl-1
padding-left: .42em
.dcf-pl-2
padding-left: .56em
.dcf-pl-3
padding-left: .75em
.dcf-pl-4
padding-left: 1em
.dcf-pl-5
padding-left: 1.33em
.dcf-pl-6
padding-left: 1.77em
.dcf-pl-7
padding-left: 2.37em
.dcf-pl-8
padding-left: 3.16em
.dcf-pl-9
padding-left: 4.21em
.dcf-pl-10
padding-left: 5.62em

Position

Flow

.dcf-static
position: static
.dcf-relative
position: relative
.dcf-absolute
position: absolute
.dcf-fixed
position: fixed
.dcf-sticky
position: sticky

Coordinates

.dcf-pin-top
top: 0
.dcf-pin-right
right: 0
.dcf-pin-bottom
bottom: 0
.dcf-pin-left
left: 0

SVG

.dcf-fill-current
fill: currentColor
.dcf-stroke-current
stroke: currentColor

Typography

Font Size

.dcf-txt-base
font-size: 1rem
.dcf-txt-3xs
font-size: .56em
.dcf-txt-2xs
font-size: .63em
.dcf-txt-xs
font-size: .75em
.dcf-txt-sm
font-size: .84em
.dcf-txt-md
font-size: 1em
.dcf-txt-lg
font-size: 1.13em
.dcf-txt-h6
font-size: 1.13em, equivalent to h6 font size
.dcf-txt-h5
font-size: 1.33em, equivalent to h5 font size
.dcf-txt-h4
font-size: 1.5em, equivalent to h4 font size
.dcf-txt-h3
font-size: 1.77em, equivalent to h3 font size
.dcf-txt-h2
font-size: 2em, equivalent to h2 font size
.dcf-txt-h1
font-size: 2.37em, equivalent to h1 font size
.dcf-txt-xl
font-size: 2.67em
.dcf-txt-2xl
font-size: 3.16em
.dcf-txt-3xl
font-size: 4.21em
.dcf-txt-4xl
font-size: 4.74em
.dcf-txt-5xl
font-size: 5.62em
.dcf-txt-6xl
font-size: 6.32em

Horizontal Text Alignment

.dcf-txt-center
text-align: center
.dcf-txt-left
text-align: left
.dcf-txt-right
text-align: right

Vertical Text Alignment

.dcf-txt-baseline
vertical-align: baseline
.dcf-txt-top
vertical-align: top
.dcf-txt-middle
vertical-align: middle
.dcf-txt-bottom
vertical-align: bottom
.dcf-txt-text-top
vertical-align: text-top
.dcf-txt-text-bottom
vertical-align: text-bottom

Text Decoration

.dcf-txt-decor-none
text-decoration: none
.dcf-txt-decor-hover
text-decoration: underline on :hover

Text Wrap

.dcf-txt-nowrap
white-space: nowrap
.dcf-truncate
truncate text with an ellipsis as needed

Font Style

.dcf-roman
font-style: normal
.dcf-italic
font-style: italic

Font Weight

.dcf-regular
font-weight: regular
.dcf-bold
font-weight: bold

Line Height

.dcf-lh-1
line-height: 1
.dcf-lh-2
line-height: 1.13
.dcf-lh-3
line-height: 1.33
.dcf-lh-4
line-height: 1.5

Text Transform

.dcf-capitalize
text-transform: capitalize
.dcf-lowercase
text-transform: lowercase
.dcf-uppercase
text-transform: uppercase
.dcf-case-reset
text-transform: none

Visibility

.dcf-invisible
visibility: hidden
.dcf-visible
visibility: visible
.dcf-sr-only
visible for screen readers only

Z-index

.dcf-z-0
z-index: 0
.dcf-z-1
z-index: 1
.dcf-z-2
z-index: 2
Contributed By: 
IIM