Utilities

Utilities for controlling an element's borders.

Additive

  <span class="dc-u-b"></span>
  <span class="dc-u-bt"></span>
  <span class="dc-u-br"></span>
  <span class="dc-u-bb"></span>
  <span class="dc-u-bl"></span>

Subtractive

  <span class="dc-u-b-none"></span>
  <span class="dc-u-b dc-u-bt-none"></span>
  <span class="dc-u-b dc-u-br-none"></span>
  <span class="dc-u-b dc-u-bb-none"></span>
  <span class="dc-u-b dc-u-bl-none"></span>

Border Color

Border color utility classes are named using the format .dc-u-bc-{color}.

Note: All border color utilities require the base class of .dc-u-b.

  <span class="dc-u-b"></span> 
  <span class="dc-u-b dc-u-bc-primary"></span>
  <span class="dc-u-b dc-u-bc-primary-dark"></span>
  <span class="dc-u-b dc-u-bc-primary-darker"></span>
  <span class="dc-u-b dc-u-bc-primary-darkest"></span>
  <span class="dc-u-b dc-u-bc-primary-light"></span>
  <span class="dc-u-b dc-u-bc-primary-lighter"></span>
  <span class="dc-u-b dc-u-bc-primary-lightest"></span>  
  <span class="dc-u-b dc-u-bc-secondary"></span>
  <span class="dc-u-b dc-u-bc-secondary-light"></span>  
  <span class="dc-u-b dc-u-bc-currentColor"></span>
  <span class="dc-u-b dc-u-bc-geyser"></span>
  <span class="dc-u-b dc-u-bc-grey-dark"></span>
  <span class="dc-u-b dc-u-bc-grey-light"></span>
  <span class="dc-u-b dc-u-bc-grey-lighter"></span>
  <span class="dc-u-b dc-u-bc-grey-oslo"></span>
  <span class="dc-u-b dc-u-bc-grey"></span>
  <span class="dc-u-b dc-u-bc-raven"></span>
  <span class="dc-u-b dc-u-bc-porcelain"></span>
  <span class="dc-u-b dc-u-bc-transparent"></span>
  <span class="dc-u-b dc-u-bc-white-transparent"></span>
  <span class="dc-u-b dc-u-bc-white"></span>  
  <span class="dc-u-b dc-u-bc-green"></span>
  <span class="dc-u-b dc-u-bc-green-light"></span>
  <span class="dc-u-b dc-u-bc-orange"></span>
  <span class="dc-u-b dc-u-bc-orange-dark"></span>
  <span class="dc-u-b dc-u-bc-purple"></span>
  <span class="dc-u-b dc-u-bc-purple-dark"></span>
  <span class="dc-u-b dc-u-bc-purple-light"></span>
  <span class="dc-u-b dc-u-bc-red"></span>
  <span class="dc-u-b dc-u-bc-red-light"></span> 

Utilities for controlling the box shadow of an element.

Utilities for controlling the text color of an element.

Color utility classes are named using the format .dc-u-color-{color}.

Cursor utilites can be applied to all breakpoints using the format .dc-u-cursor-{property}.

Where {property} is one of:

• auto - set cursor to auto (browser default)
• default - set cursor to default
• grab - set cursor to indicate something can be grabbed
• help - set cursor to indicate help is available
• move - set cursor to indicate something can be moved
• pointer - set cursor to indicate a link (hand with finger pointing)
• text - set cursor to indicate text that may be selected
• not-allowed - set cursor to indicate the action will not be executed

Display utilites can be applied to all breakpoints using the format .dc-u-d-{property}.

Where {property} is one of:

• b - for classes that set display to block
• i - for classes that set display to inline
• ib - for classes that set display to inline-block
• none - for classes that set display to none
• tbl - for classes that set display to table
• tbl-cell - for classes that set display to table-cell

Responsive Examples

Display utilites can be applied to individual common breakpoints using @{size} appended to the end of the class.

For more information about responsive design features, check out the Responsive Utilities documentation.

Height utilites can be used with pixels using the format .dc-u-h-{size}, where size is one of the following:

2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 192, 256, 320, 480, 640, 800, 960

Height percentages

Height utilites can be also be used with the following percentages.

Viewport height

Height utilites can be also be used with the following viewport height units.

List Style Type

Margin utility classes are built from a Sass list $dc-spatial defined in _dc-globals.scss and are named using the format .dc-u-{property}{sides}-{size}.

Where sides is one of:

• t - for classes that set margin-top
• b - for classes that set margin-bottom
• l - for classes that set margin-left
• r - for classes that set margin-right
• h - for classes that set both *-left and *-right ("horizontal")
• v - for classes that set both *-top and *-bottom ("vertical")
• blank - for classes that set a margin on all 4 sides of the element

Where size is one of:

• none - for classes that eliminate all margin by setting it to none
• 0 - for classes that eliminate margin by setting to 0 for a side
• 2 - for classes that set the margin to 2px
• 4 - for classes that set the margin to 4px
• 8 - for classes that set the margin to 8px
• 12 - for classes that set the margin to 12px
• 16 - for classes that set the margin to 16px
• 24 - for classes that set the margin to 24px
• 32 - for classes that set the margin to 32px
• 48 - for classes that set the margin to 48px
• 64 - for classes that set the margin to 64px
• 80 - for classes that set the margin to 80px
• 96 - for classes that set the margin to 96px
• 128 - for classes that set the margin to 128px
• auto - for classes that set the margin to auto

Margin None/0

Margin all

Adds margin to all sides of element.

Margin Top

Margin Right

Margin Bottom

Margin Left

Margin Horizontal

Margin Vertical

Max Height utilites can be used with pixels using the format .dc-u-maxh-{measure}, where {measure} is one of the following:

0, 192, 256, 320, 480, 640, 800, 960

Max Height utilites can also be used with the following percentage units and auto.

Max-width and utilites can be used with pixels using the format .dc-u-maxw-{size} or percentages using the format .dc-u-maxw-{percentage}pc, where {size} is one of the following:

2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 192, 256, 320, 480, 640, 800, 960

Or where {percentage} is one of the following:

1, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100

Setting max-width in pixels

Setting max-width in percentages

Min Height utilites can be used with pixels using the format .dc-u-minh-{measure}, where {measure} is one of the following:

0, 192, 256, 320, 480, 640, 800, 960

Min Height utilites can also be used with the following percentage units and auto.

Min-width and utilites can be used with pixels using the format .dc-u-minw-{size} or percentages using the format .dc-u-minw-{percentage}pc, where {size} is one of the following:

2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 192, 256, 320, 480, 640, 800, 960

Or where {percentage} is one of the following:

1, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100

Setting min-width in pixels

Setting min-width in percentages

Padding utility classes are built from a Sass list $dc-spatial defined in _dc-globals.scss. Padding utility classes are named using the format dc-u-{property}{sides}-{size}.

Where {sides} is one of:

• t - for classes that set padding-top
• b - for classes that set padding-bottom
• l - for classes that set padding-left
• r - for classes that set padding-right
• h - for classes that set both *-left and *-right ("horizontal")
• v - for classes that set both *-top and *-bottom ("vertical")
• blank - for classes that set a padding on all 4 sides of the element

Where {size} is one of:

• none - for classes that eliminate all padding by setting it to none
• 0 - for classes that eliminate padding by setting to 0 for a side
• 2 - for classes that set the padding to 2px
• 4 - for classes that set the padding to 4px
• 8 - for classes that set the padding to 8px
• 12 - for classes that set the padding to 12px
• 16 - for classes that set the padding to 16px
• 24 - for classes that set the padding to 24px
• 32 - for classes that set the padding to 32px
• 48 - for classes that set the padding to 48px
• 64 - for classes that set the padding to 64px
• 80 - for classes that set the padding to 80px
• 96 - for classes that set the padding to 96px
• 128 - for classes that set the padding to 128px

Padding None/0

Padding all

Adds padding to all sides of element.

Padding Top

Padding Right

Padding Bottom

Padding Left

Padding Horizontal

Padding Vertical

Position Patterns

There is one custom pattern, for "stretching" items across an element.

The Styleguide allows you to build responsive designs using utility classes. Not every utility in the Styleguide has the responsive option. The utilities that do will be denoted, for those utilites you can append @{size} to the class.

Where {size} is one of:

• xs - for classes that set the media query to 480px
• sm - for classes that set the media query to 768px
• md - for classes that set the media query to 992px
• lg - for classes that set the media query to 1200px
• xl - for classes that set the media query to 1366px
• ws - for classes that set the media query to 1680px

We currently limit responsive utilities to these breakpoints, although the following two breakpoints are also available when designing layouts:

• $dc-bp-4k 1920px
• $dc-bp-5k 2560px

Responsive Examples

Rotate

The transition utility class .dc-u-trsn-none removes all transitions on the element and pseudo elements.

.dc-u-trsn-none,
.dc-u-trsn-none * {
  transition: all 0s ease 0s !important;

  &::after,
  &::before {
    transition: all 0s ease 0s !important;
  }
}

Utilities for controlling the vertical alignment of an inline or table-cell container.

Width utilites can be used with pixels using the format .dc-u-w-{size} or percentages using the format .dc-u-w-{percentage}pc, where {size} is one of the following:

2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 192, 256, 320, 480, 640, 800, 960

Or where {percentage} is one of the following:

1, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100

Setting width in pixels

Setting width in percentages

Width and Height utilites can be used with pixels using the format .dc-u-wh-{size} or percentages using the format .dc-u-wh-{percentage}pc, where {size} is one of the following:

2, 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 192, 256, 320, 480, 640, 800, 960

Or where {percentage} is one of the following:

1, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100

Setting width and height together in pixels

Setting width and height together in percentages

Utilities for controlling the stack order of an element.