Skill Level: 

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.

apply an aspect ratio to an element and specify the ratio with one of the following classes
apply a 16×9 (landscape) aspect ratio to an element
apply a 9×16 (portrait) aspect ratio to an element
apply a 4×3 (landscape) aspect ratio to an element
apply a 3×4 (portrait) aspect ratio to an element
apply a 1×1 aspect ratio to an element
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 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="" alt="Placeholder image.">



transparent background
white background
dark, slightly transparent background
light, slightly transparent background


background-position: center
background-position: top
background-position: right
background-position: right top
background-position: right bottom
background-position: bottom
background-position: left
background-position: left top
background-position: left bottom


background-repeat: no-repeat
background-repeat: repeat
background-repeat: repeat-x
background-repeat: repeat-y


background-size: contain
background-size: cover


no background

Border Color

Border style and border width classes must be used with border color to work.

Border Color (All Sides)

border-color: currentColor, all sides
border-color: transparent, all sides

Border Top Color

border-top-color: currentColor
border-top-color: transparent

Border Right Color

border-right-color: currentColor
border-right-color: transparent

Border Bottom Color

border-bottom-color: currentColor
border-bottom-color: transparent

Border Left Color

border-left-color: currentColor
border-left-color: transparent

Border Radius

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

Border Style

Border color and border width classes must be used with border style to work.

Border Style (All Sides)

border-style: dotted, all sides
border-style: solid, all sides

Border Top Style

border-top-style: dotted
border-top-style: solid

Border Right Style

border-right-style: dotted
border-right-style: solid

Border Botttom Style

border-bottom-style: dotted
border-bottom-style: solid

Border Left Style

border-left-style: dotted
border-left-style: solid

Border Width

Border color and border style classes must be used with border width to work.

Border Width (All Sides)

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

Border Top Width

border-top-width: 0
border-top-width: 1px
border-top-width: 2px
border-top-width: 3px

Border Right Width

border-right-width: 0
border-right-width: 1px
border-right-width: 2px
border-right-width: 3px

Border Bottom Width

border-bottom-width: 0
border-bottom-width: 1px
border-bottom-width: 2px
border-bottom-width: 3px

Border Left Width

border-left-width: 0
border-left-width: 1px
border-left-width: 2px
border-left-width: 3px

Box Alignment

Align Items

align-items: flex-start
align-items: flex-end
align-items: center
align-items: baseline
align-items: stretch
align-items: start
align-items: end

Align Content

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

Align Self

align-self: auto
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
align-self: stretch
align-self: start
align-self: end

Justify Items

justify-items: center
justify-items: stretch
justify-items: start
justify-items: end

Justify Content

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

Justify Self

justify-self: center
justify-self: stretch
justify-self: start
justify-self: end


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.

Lay out content in one column.
Lay out content in two equal width columns.
Lay out content in three equal width columns.
Lay out content in equal width columns, each with a minimum width of 17.76em.


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



flex-direction: column
flex-direction: column-reverse
flex-direction: row
flex-direction: row-reverse


flex-wrap: wrap
flex-wrap: wrap-reverse
flex-wrap: nowrap

Grow & Shrink

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


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


Column Gap

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.
grid-column-gap: .42em
grid-column-gap: .56em
grid-column-gap: .75em
grid-column-gap: 1em
grid-column-gap: 1.33em
grid-column-gap: 1.77em
grid-column-gap: 2.37em
grid-column-gap: 3.16em
grid-column-gap: 4.21em
grid-column-gap: 5.62em

Row Gap

grid-row-gap: .42em
grid-row-gap: .56em
grid-row-gap: .75em
grid-row-gap: 1em
grid-row-gap: 1.33em
grid-row-gap: 1.77em
grid-row-gap: 2.37em
grid-row-gap: 3.16em
grid-row-gap: 4.21em
grid-row-gap: 5.62em

Height & Width


height: 0
height: .42em
height: .56em
height: .75em
height: 1em
height: 1.33em
height: 1.77em
height: 2.37em
height: 3.16em
height: 4.21em
height: 5.62em
height: 100%
height: 100vw


min-height: 0


max-height: 100%
max-height: 100vh


width: 0
width: .42em
width: .56em
width: .75em
width: 1em
width: 1.33em
width: 1.77em
width: 2.37em
width: 3.16em
width: 4.21em
width: 5.62em
width: 100%
width: 100vw


min-width: 0


max-width: 17.76rem
max-width: 23.68rem
max-width: 31.57rem
max-width: 42.09rem
max-width: 56.12rem
max-width: 100%
max-width: 100vw

Lazy Load

lazy load images
<div class="dcf-ratio dcf-ratio-16x9">
    <!-- WebP images, or -->
      data-srcset=" 320w, 640w, 960w, 1280w"
    <!-- JPG images, or -->
      data-srcset=" 320w, 640w, 960w, 1280w"
      class="dcf-ratio-child dcf-obj-fit-cover dcf-lazy-load"
      alt="Really good alt text goes here.">
        class="dcf-ratio-child dcf-obj-fit-cover"
        alt="Really good alt text goes here.">

WebP images aren’t required, but they are recommended for improving your page performance. If using only JPEGs, use the following code:

<div class="dcf-ratio dcf-ratio-16x9">
  <!-- JPG images, or -->
    class="dcf-ratio-child dcf-obj-fit-cover dcf-lazy-load"
    data-srcset=" 320w, 640w, 960w, 1280w"
    alt="Really good alt text goes here.">
      class="dcf-ratio-child dcf-obj-fit-cover"
      alt="Really good alt text goes here.">

Related: Aspect Ratios (Utilities), Object-Fit (Utilities)


Margin (All Sides)

margin (all sides): auto
margin (all sides): 0
margin (all sides): .42em
margin (all sides): .56em
margin (all sides): .75em
margin (all sides): 1em
margin (all sides): 1.33em
margin (all sides): 1.77em
margin (all sides): 2.37em
margin (all sides): 3.16em
margin (all sides): 4.21em
margin (all sides): 5.62em

Margin Top

margin-top: auto
margin-top: 0
margin-top: .42em
margin-top: .56em
margin-top: .75em
margin-top: 1em
margin-top: 1.33em
margin-top: 1.77em
margin-top: 2.37em
margin-top: 3.16em
margin-top: 4.21em
margin-top: 5.62em

Margin Right

margin-right: auto
margin-right: 0
margin-right: .42em
margin-right: .56em
margin-right: .75em
margin-right: 1em
margin-right: 1.33em
margin-right: 1.77em
margin-right: 2.37em
margin-right: 3.16em
margin-right: 4.21em
margin-right: 5.62em

Margin Bottom

margin-bottom: auto
margin-bottom: 0
margin-bottom: .42em
margin-bottom: .56em
margin-bottom: .75em
margin-bottom: 1em
margin-bottom: 1.33em
margin-bottom: 1.77em
margin-bottom: 2.37em
margin-bottom: 3.16em
margin-bottom: 4.21em
margin-bottom: 5.62em

Margin Left

margin-left: auto
margin-left: 0
margin-left: .42em
margin-left: .56em
margin-left: .75em
margin-left: 1em
margin-left: 1.33em
margin-left: 1.77em
margin-left: 2.37em
margin-left: 3.16em
margin-left: 4.21em
margin-left: 5.62em


object-fit: contain
object-fit: cover
object-fit: none

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


object-position: top
object-position: right
object-position: bottom
object-position: left
object-position: right top
object-position: right bottom
object-position: left bottom
object-position: left top
Placeholder image.
Demonstration of object-position bottom combined with object-fit none

Order (for Flexbox and Grid)


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


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


Padding (All Sides)

padding (all sides): 0
padding (all sides): .42em
padding (all sides): .56em
padding (all sides): .75em
padding (all sides): 1em
padding (all sides): 1.33em
padding (all sides): 1.77em
padding (all sides): 2.37em
padding (all sides): 3.16em
padding (all sides): 4.21em
padding (all sides): 5.62em

Padding Top

padding-top: 0
padding-top: .42em
padding-top: .56em
padding-top: .75em
padding-top: 1em
padding-top: 1.33em
padding-top: 1.77em
padding-top: 2.37em
padding-top: 3.16em
padding-top: 4.21em
padding-top: 5.62em

Padding Right

padding-right: 0
padding-right: .42em
padding-right: .56em
padding-right: .75em
padding-right: 1em
padding-right: 1.33em
padding-right: 1.77em
padding-right: 2.37em
padding-right: 3.16em
padding-right: 4.21em
padding-right: 5.62em

Padding Bottom

padding-bottom: 0
padding-bottom: .42em
padding-bottom: .56em
padding-bottom: .75em
padding-bottom: 1em
padding-bottom: 1.33em
padding-bottom: 1.77em
padding-bottom: 2.37em
padding-bottom: 3.16em
padding-bottom: 5.62em

Padding Left

padding-left: 0
padding-left: .42em
padding-left: .56em
padding-left: .75em
padding-left: 1em
padding-left: 1.33em
padding-left: 1.77em
padding-left: 2.37em
padding-left: 3.16em
padding-left: 4.21em
padding-left: 5.62em



position: static
position: relative
position: absolute
position: fixed
position: sticky


top: 0
right: 0
bottom: 0
left: 0


fill: currentColor
stroke: currentColor

Table Layout

table-layout: fixed
A table must have a defined width for table-layout: fixed to work. Use a width utility class (e.g., .dcf-w-100%) with .dcf-table-fixed on your desired <table>.


Font Size

font-size: 1rem
font-size: .56em
font-size: .63em
font-size: .75em
font-size: .84em
font-size: 1em
font-size: 1.13em
font-size: 1.13em, equivalent to h6 font size
font-size: 1.33em, equivalent to h5 font size
font-size: 1.5em, equivalent to h4 font size
font-size: 1.77em, equivalent to h3 font size
font-size: 2em, equivalent to h2 font size
font-size: 2.37em, equivalent to h1 font size
font-size: 2.67em
font-size: 3.16em
font-size: 4.21em
font-size: 4.74em
font-size: 5.62em
font-size: 6.32em

Horizontal Text Alignment

text-align: center
text-align: left
text-align: right

Vertical Text Alignment

vertical-align: baseline
vertical-align: top
vertical-align: middle
vertical-align: bottom
vertical-align: text-top
vertical-align: text-bottom

Text Decoration

text-decoration: none
text-decoration: underline on :hover

Text Wrap

white-space: nowrap
force long words or strings to hyphenate and wrap to a new line as needed
truncate text with an ellipsis as needed

Font Style

font-style: normal
font-style: italic

Font Weight

font-weight: regular
font-weight: bold

Line Height

line-height: 1
line-height: 1.13
line-height: 1.33
line-height: 1.5

Text Transform

text-transform: capitalize
text-transform: lowercase
text-transform: uppercase
text-transform: none


visibility: hidden
visibility: visible
visible for screen readers only


z-index: 0
z-index: 1
z-index: 2
Contributed By: