Utilities

Skill Level:

Intermediate

Aspect Ratio
Background
- Background Color
- Background Position
- Background Repeat
- Background Size
- Background None
Border Color
- Border Color (All Sides)
- Border Top Color
- Border Right Color
- Border Bottom Color
- Border Left Color
Border Radius
Border Style
- Border Style (All Sides)
- Border Top Style
- Border Right Style
- Border Bottom Style
- Border Left Style
Border Width
- Border Width (All Sides)
- Border Top Width
- Border Right Width
- Border Bottom Width
- Border Left Width
Box Alignment
- Align Items
- Align Content
- Align Self
- Justify Items
- Justify Content
- Justify Self
Color
CSS Columns
Display
Flexbox
- Direction
- Wrap
- Grow & Shrink
Float
Gap
- Gap (for Flexbox and Grid)
- Column Gap
- Row Gap
Height & Width
- Height
- Min-Height
- Max-Height
- Width
- Min-Width
- Max-Width
Lazy Load
Margin
- Margin (All Sides)
- Margin Top
- Margin Right
- Margin Bottom
- Margin Left
Object-Fit
Object-Position
Opacity
Order (for Flexbox and Grid)
Overflow
Padding
- Padding (All Sides)
- Padding Top
- Padding Right
- Padding Bottom
- Padding Left
Position
- Flow
- Coordinates
SVG
Table Layout
Typography
- Font Size
- Horizontal Text Alignment
- Vertical Text Alignment
- Text Decoration
- Text Wrap
- Font Style
- Font Weight
- Line Height
- Text Transform
Visibility
Z-index

Aspect Ratio

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 `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="https://via.placeholder.com/100x100" alt="Placeholder image.">
</div>

Background

Utility classes for background use the bg notation.

Background 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

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

Background 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

Background Size

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

Background None

.dcf-bg-none: no background

Border Color

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

Border Color (All Sides)

Utility classes for border colors (all sides) use the b notation.

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

Border Top Color

Utility classes for border top colors use the bt notation.

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

Border Right Color

Utility classes for border right colors use the br notation.

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

Border Bottom Color

Utility classes for border bottom colors use the bb notation.

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

Border Left Color

Utility classes for border left colors use the bl notation.

.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 color and border width classes must be used with border style to work.

Border Style (All Sides)

Utility classes for border style (all sides) use the b notation.

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

Border Top Style

Utility classes for border top style use the bt notation.

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

Border Right Style

Utility classes for border right style use the br notation.

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

Border Botttom Style

Utility classes for border bottom style use the bb notation.

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

Border Left Style

Utility classes for border left style use the bl notation.

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

Border Width

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

Border Width (All Sides)

Utility classes for border width (all sides) use the b notation.

.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

Utility classes for border top width use the bt notation.

.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

Utility classes for border right width use the br notation.

.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

Utility classes for border bottom width use the bb notation.

.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

Utility classes for border left width use the bl notation.

.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

Utility classes for align items use the ai notation.

.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

Utility classes for align content use the ac notation.

.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

Utility classes for align self use the as notation.

.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

Utility classes for justify items use the ji notation.

.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

Utility classes for justify content use the jc notation.

.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

Utility classes for justify self use the js notation.

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

Color

.dcf-inverse: Light color on dark background in light mode and dark color on light background (yes, light background) in dark mode. An example of this would be the selected date in the datepicker component. If light text on a dark background is desired in both light and dark modes, use .unl-cream instead.

CSS Columns

All CSS column utilities have a column-gap of 3.16vw (viewport width). 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

Float

.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

Gap

Gap (for Flexbox and Grid)

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

Column Gap

Utility classes for column gap use the col-gap notation.

.dcf-col-gap-vw: grid-column-gap: 3.16vw (viewport width) 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.78em
.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.78em
.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

Utility classes for height use the h notation.

.dcf-h-auto: height: auto
.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.78em
.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-11: height: 7.49em
.dcf-h-12: height: 10em
.dcf-h-25%: height: 25%
.dcf-h-50%: height: 50%
.dcf-h-75%: height: 75%
.dcf-h-100%: height: 100%
.dcf-h-100vh: height: 100vw (viewport width)

Min-Height

Utility classes for minimum height use the h-min notation.

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

Max-Height

Utility classes for maximum height use the h-max notation.

.dcf-h-max-0: max-height: 0
.dcf-h-max-100%: max-height: 100%
.dcf-h-max-100vh: max-height: 100vh (viewport height)
.dcf-h-max-inf: max-height: 999vh (viewport height)

Width

Utility classes for width use the w notation.

.dcf-w-auto: width: auto
.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.78em
.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-11: width: 7.49em
.dcf-w-12: width: 10em
.dcf-w-25%: width: 25%
.dcf-w-50%: width: 50%
.dcf-w-75%: width: 75%
.dcf-w-100%: width: 100%
.dcf-w-100vw: width: 100vw (viewport width)

Min-Width

Utility classes for minimum width use the w-min notation.

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

Max-Width

Utility classes for maximum width use the w-max notation.

.dcf-w-max-3xs: max-width: 9.99rem
.dcf-w-max-2xs: max-width: 13.32rem
.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-2xl: max-width: 74.83rem
.dcf-w-max-3xl: max-width: 99.78rem
.dcf-w-max-4xl: max-width: 133.03rem
.dcf-w-max-100%: max-width: 100%
.dcf-w-max-100vw: max-width: 100vw (viewport width)

Lazy Load

.dcf-lazy-load: lazy load images

<div class="dcf-ratio dcf-ratio-16x9">
  <picture>
    <!-- AVIF images https://squoosh.app/ -->
    <source
      data-srcset="
        https://www.unl.edu/images/path-to/image-sm.avif 320w,
        https://www.unl.edu/images/path-to/image-md.avif 640w,
        https://www.unl.edu/images/path-to/image-lg.avif 960w,
        https://www.unl.edu/images/path-to/image-xl.avif 1280w"
      srcset="data:,1w"
      type="image/avif">
    <!-- WebP images https://squoosh.app/, https://convertio.co/webp-converter/, https://www.onlineconverter.com/webp or https://image.online-convert.com/convert-to-webp -->
    <source
      data-srcset="
        https://www.unl.edu/images/path-to/image-sm.webp 320w,
        https://www.unl.edu/images/path-to/image-md.webp 640w,
        https://www.unl.edu/images/path-to/image-lg.webp 960w,
        https://www.unl.edu/images/path-to/image-xl.webp 1280w"
      srcset="data:,1w"
      type="image/webp">
    <!-- JPG images https://squoosh.app/, https://imagecompressor.com/, https://compressor.io/ or https://www.jpegmini.com/ -->
    <source
      data-srcset="
        https://www.unl.edu/images/path-to/image-sm.jpg 320w,
        https://www.unl.edu/images/path-to/image-md.jpg 640w,
        https://www.unl.edu/images/path-to/image-lg.jpg 960w,
        https://www.unl.edu/images/path-to/image-xl.jpg 1280w"
      srcset="data:,1w"
      type="image/jpeg">
    <img 
      class="dcf-ratio-child dcf-obj-fit-cover dcf-lazy-load"
      height="720"
      width="1280"            
      loading="lazy"
      data-sizes=""
      data-src="https://www.unl.edu/images/path-to/image-sm.jpg"
      src="data:,"
      alt="Really good alt text goes here.">
    <noscript>
      <img 
        class="dcf-ratio-child dcf-obj-fit-cover"
        height="720"
        width="1280"
        src="https://www.unl.edu/images/path-to/image-sm.jpg"
        alt="Really good alt text goes here.">
    </noscript>    
  </picture>  
</div>

AVIF and 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 https://squoosh.app/, https://imagecompressor.com/, https://compressor.io/ or https://www.jpegmini.com/ -->
  <img
    class="dcf-ratio-child dcf-obj-fit-cover dcf-lazy-load"
    loading="lazy"
    height="720"
    width="1280"
    data-sizes=""
    data-srcset="
      https://www.unl.edu/images/path-to/image-sm.jpg 320w,
      https://www.unl.edu/images/path-to/image-md.jpg 640w,
      https://www.unl.edu/images/path-to/image-lg.jpg 960w,
      https://www.unl.edu/images/path-to/image-xl.jpg 1280w"
    srcset="data:,1w"
    data-src="https://www.unl.edu/images/path-to/image-sm.jpg"
    src="data:,"
    alt="Really good alt text goes here.">
  <noscript>
    <img
      class="dcf-ratio-child dcf-obj-fit-cover"
      height="720"
      width="1280"
      src="https://www.unl.edu/images/path-to/image-sm.jpg"
      alt="Really good alt text goes here.">
  </noscript>
</div>

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

Margin

Margin (All Sides)

Utility classes for margin (all sides) use the m notation.

.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.78em
.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
.dcf-m-11: margin (all sides): 7.49em
.dcf-m-12: margin (all sides): 10em

Margin Top

Utility classes for margin top use the mt notation.

.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.78em
.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
.dcf-mt-11: margin-top: 7.49em
.dcf-mt-12: margin-top: 10em

Margin Right

Utility classes for margin right use the mr notation.

.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.78em
.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
.dcf-mr-11: margin-right: 7.49em
.dcf-mr-12: margin-right: 10em

Margin Bottom

Utility classes for margin bottom use the mb notation.

.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.78em
.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
.dcf-mb-11: margin-bottom: 7.49em
.dcf-mb-12: margin-bottom: 10em

Margin Left

Utility classes for margin left use the ml notation.

.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.78em
.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
.dcf-ml-11: margin-left: 7.49em
.dcf-ml-12: margin-left: 10em

Object-Fit

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

Object-Position

.dcf-obj-top: object-position: top
.dcf-obj-right: object-position: right
.dcf-obj-bottom: object-position: bottom
.dcf-obj-left: object-position: left
.dcf-obj-right-top: object-position: right top
.dcf-obj-right-right: object-position: right bottom
.dcf-obj-left-bottom: object-position: left bottom
.dcf-obj-left-top: object-position: left top

Opacity

.dcf-opacity-0: opacity: 0
.dcf-opacity-100%: opacity: 100%

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)

Utility classes for padding (all sides) use the p notation.

.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.78em
.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
.dcf-p-11: padding (all sides): 7.49em
.dcf-p-12: padding (all sides): 10em

Padding Top

Utility classes for padding top use the pt notation.

.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.78em
.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
.dcf-pt-11: padding-top: 7.49em
.dcf-pt-12: padding-top: 10em

Padding Right

Utility classes for padding right use the pr notation.

.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.78em
.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
.dcf-pr-11: padding-right: 7.49em
.dcf-pr-12: padding-right: 10em

Padding Bottom

Utility classes for padding bottom use the pb notation.

.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.78em
.dcf-pb-7: padding-bottom: 2.37em
.dcf-pb-8: padding-bottom: 3.16em
.dcf-pb-10: padding-bottom: 5.62em
.dcf-pb-11: padding-bottom: 7.49em
.dcf-pb-12: padding-bottom: 10em

Padding Left

Utility classes for padding left use the pl notation.

.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.78em
.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
.dcf-pl-11: padding-left: 7.49em
.dcf-pl-12: padding-left: 10em

Position

Flow

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

Coordinates

Note: the .dcf-pin-* classes will eventually be deprecated. Please use .dcf-top-0 or similar classes instead.

.dcf-top-0
.dcf-pin-top: top: 0
.dcf-top-50%: top: 50%
.dcf-top-100%: top: 100%
.dcf-right-0
.dcf-pin-right: right: 0
.dcf-right-50%: right: 50%
.dcf-right-100%: right: 100%
.dcf-bottom-0
.dcf-pin-bottom: bottom: 0
.dcf-bottom-50%: bottom: 50%
.dcf-bottom-100%: bottom: 100%
.dcf-left-0
.dcf-pin-left: left: 0
.dcf-left-50%: left: 50%
.dcf-left-100%: left: 100%

SVG

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

Table Layout

.dcf-table-fixed: 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>.

Typography

.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.78em, 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-word-wrap: force long words or strings to hyphenate and wrap to a new line as needed
.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: normal
.dcf-bold: font-weight: bold
.dcf-bolder: font-weight: bolder

Line Height

Utility classes for line height use the lh notation.

.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

Printer-friendly version
Log in to post comments