CSS Utilities

The Spark Design System includes many CSS utility classes for customizing and extending components. These utility classes are divided into two groups: Single-Property Utilities and Multi-Property Utilities.

Single-Property Utilities

Single property utilities map directly to a single CSS property and value. They are most useful when you want to override a default value or in one-off situations. Be aware that all Single-Property Utilities include an !important flag in order to supersede an element's default styles.

Display and Visibility

These utilities control CSS properties related to display and visibility.

ClassDescription
.sprk-u-JavaScript, .sprk-u-HideWhenJsTurns off the display of an element so that it has no effect on layout.
.sprk-u-Display--noneTurns off the display of an element so that it has no effect on layout.
.sprk-u-Display--blockThe element generates a block element box.
.sprk-u-Display--inlineThe element generates one or more inline element boxes.
.sprk-u-Display--inline-blockThe element generates a block element box that will be flowed with surrounding content as if it were a single inline box.
.sprk-u-Visibility--hiddenThe element box is invisible, but still affects layout as normal. Screen readers will still announce this element.
.sprk-u-Visibility--visibleThe element is visible.

Floats, Position, and Alignment

These utilities control CSS properties related to floating, positioning, and alignment.

ClassDescription
.sprk-u-Float--noneThe element is not floated.
.sprk-u-Float--leftFloats an element to the left.
.sprk-u-Float--rightFloats an element to the right.
.sprk-u-Position--relativeThe element is positioned according to the normal flow of the document, and then offset relative to itself.
.sprk-u-Position--absoluteThe element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor.
.sprk-u-Position--fixedThe element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport.
.sprk-u-Position--staticThe element is positioned according to the normal flow of the document.
.sprk-u-Top--zeroResets an element's top offset back to zero.
.sprk-u-Bottom--zeroResets an element's bottom offset back to zero.
.sprk-u-Left--zeroResets an element's left offset back to zero.
.sprk-u-Right--zeroResets an element's right offset back to zero.
.sprk-u-TextAlign--leftAligns text to the left of the container.
.sprk-u-TextAlign--rightAligns text to the right of the container.
.sprk-u-TextAlign--centerAligns text in the horizontal center of the container.
.sprk-u-VerticalAlign--topAligns the contents of a box to the top if it's display property is `inline` or `table-cell`.
.sprk-u-VerticalAlign--middleAligns the contents of a box to the vertical middle if it's display property is `inline` or `table-cell`.
.sprk-u-VerticalAlign--bottomAligns the contents of a box to the bottom if it's display property is `inline` or `table-cell`.
.sprk-u-VerticalAlign--baselineAligns the contents of a box to the baseline if it's display property is `inline` or `table-cell`.

Typography

These utilities control CSS properties related to typography.

ClassDescription
.sprk-u-FontWeight--boldSets the font weight to bold.
.sprk-u-FontWeight--normalSets the font weight to normal.
.sprk-u-FontStyle--italicSets the font style to italic.
.sprk-u-FontStyle--normalSets the font style to normal.
.sprk-u-TextDecoration--underlineSets the text decoration to underline.
.sprk-u-TextDecoration--noneSets the text decoration to none.
.sprk-u-TextTransform--uppercaseTransforms text to uppercase.
.sprk-u-TextTransform--noneRemoves text transformation for text.
.sprk-u-WordWrap--break-wordSets `word-wrap` to `break-word`.
.sprk-u-WhiteSpace--nowrapSets `white-space` to `nowrap`.
.sprk-u-MeasureSets a `max-width`, intended for text. Default value is `40 rem`.
.sprk-u-Measure--narrowSets a narrow `max-width`, intended for text. Default value is `25 rem`.

Overflow

These utilities control CSS properties related to overflow, which specifies how to handle content that is too large for its container.

ClassDescription
.sprk-u-Overflow--visibleContent is not clipped and may be rendered outside the padding box.
.sprk-u-Overflow--hiddenContent is clipped if necessary to fit the padding box. No scrollbars are provided.
.sprk-u-Overflow--scrollContent is clipped if necessary to fit the padding box. Browsers display scrollbars whether or not any content is actually clipped.
.sprk-u-Overflow--autoIf content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context.

Width

These utilities set the width of an element to a percentage value. The widths are in increments of 5 from 5% to 100%.

ClassDescription
.sprk-u-MaxWidth--100Changes the max-width of the element to 100 percent.
.sprk-u-Width-5Changes the width of the element to 5 percent.
.sprk-u-Width-25Changes the width of the element to 25 percent.
.sprk-u-Width-50Changes the width of the element to 50 percent.

Spacing

These utilities override the padding and margin on an element. The class name format is .sprk-u-<type><location><size>

Options

  • type: p or m (padding or margin)
  • location: which side(s) of the element to apply the class to.
    • a (all)
    • t (top)
    • r (right)
    • b (bottom)
    • l (left)
    • h (horizontal)
    • v (vertical)
  • size: The size of the spacing added.
    • s - small (8px)
    • m - medium (16px)
    • l - large (32px)
    • h - huge (64px)
    • n - none (0px)

Examples

ClassDescription
.sprk-u-mbnSets the bottom margin to `0px`
.sprk-u-mahSets the margin on all sides to `64px`
.sprk-u-phmSets the left and right padding to `16px`

Miscellaneous Spacing

These utilities override the padding and margin on an element and are supplemental spacing sizes. The class name format is .sprk-u-<Type><Location>--<size>

Options

  • type: Padding or Margin
  • location: All, Top, Right, Bottom, Left, Horizontal, or Vertical
  • size:
    • a = $sprk-space-misc-a (24px)
    • b = $sprk-space-misc-b (40px)
    • c = $sprk-space-misc-c (48px)
    • d = $sprk-space-misc-d (80px)

Examples

ClassDescription
sprk-u-MarginAll--dSets the margin on all sides to the current value of `$sprk-space-misc-d` (`80px`).
sprk-u-MarginBottom--aSets the bottom margin to the current value of `$sprk-space-misc-a` (`24px`).
sprk-u-PaddingHorizontal--bSets the padding on the left and right (horizontal) to `$sprk-space-misc-b` (`40px`).

Color

These utilities control CSS properties related to color and background color.

ClassDescription
.sprk-u-Color--redSets the font color to red.
.sprk-u-Color--deep-redSets the font color to deep red.
.sprk-u-Color--mid-redSets the font color to mid red.
.sprk-u-Color--purpleSets the font color to purple.
.sprk-u-Color--purple-darkSets the font color to purple dark.
.sprk-u-Color--purple-deepSets the font color to purple deep.
.sprk-u-Color--purple-lightSets the font color to purple light.
.sprk-u-Color--purple-lightestSets the font color to purple lightest.
.sprk-u-Color--greenSets the font color to green.
.sprk-u-Color--blueSets the font color to blue.
.sprk-u-Color--pinkSets the font color to pink.
.sprk-u-Color--yellowSets the font color to yellow.
.sprk-u-Color--whiteSets the font color to white.
.sprk-u-Color--graySets the font color to gray.
.sprk-u-Color--blackSets the font color to black.
.sprk-u-Color--purple-navySets the font color to Purple Navy.
.sprk-u-Color--lavenderSets the font color to Lavender.
.sprk-u-Color--wisteriaSets the font color to Wisteria.
.sprk-u-Color--magnoliaSets the font color to Magnolia.
.sprk-u-BackgroundColor--redSets the background color to red.
.sprk-u-BackgroundColor--deep-redSets the background color to deep red.
.sprk-u-BackgroundColor--mid-redSets the background color to mid red.
.sprk-u-BackgroundColor--purpleSets the background color to purple.
.sprk-u-BackgroundColor--purple-darkSets the background color to purple dark.
.sprk-u-BackgroundColor--purple-deepSets the background color to purple deep.
.sprk-u-BackgroundColor--purple-lightSets the background color to purple light.
.sprk-u-BackgroundColor--purple-lightestSets the background color to purple lightest.
.sprk-u-BackgroundColor--greenSets the background color to green.
.sprk-u-BackgroundColor--blueSets the background color to blue.
.sprk-u-BackgroundColor--pinkSets the background color to pink.
.sprk-u-BackgroundColor--yellowSets the background color to yellow.
.sprk-u-BackgroundColor--whiteSets the background color to white.
.sprk-u-BackgroundColor--blackSets the background color to black.
.sprk-u-BackgroundColor--black-tint-90Sets the background color to black tinted at 90%.
.sprk-u-BackgroundColor--black-tint-80Sets the background color to black tinted at 80%.
.sprk-u-BackgroundColor--black-tint-70Sets the background color to black tinted at 70%.
.sprk-u-BackgroundColor--black-tint-60Sets the background color to black tinted at 60%.
.sprk-u-BackgroundColor--black-tint-50Sets the background color to black tinted at 50%.
.sprk-u-BackgroundColor--black-tint-40Sets the background color to black tinted at 40%.
.sprk-u-BackgroundColor--black-tint-30Sets the background color to black tinted at 30%.
.sprk-u-BackgroundColor--black-tint-20Sets the background color to black tinted at 20%.
.sprk-u-BackgroundColor--black-tint-10Sets the background color to black tinted at 10%.
.sprk-u-BackgroundColor--graySets the background color to gray.
.sprk-u-BackgroundColor--purple-navySets the background color to Purple Navy.
.sprk-u-BackgroundColor--lavenderSets the background color to Lavender.
.sprk-u-BackgroundColor--wisteriaSets the background color to Wisteria.
.sprk-u-BackgroundColor--magnoliaSets the background color to Magnolia.

Height

This utility sets the height of an element to a percentage value.

ClassDescription
.sprk-u-Height--100Changes the height of the element to 100 percent.

Multi-Property Utilities

Multi-Property Utilities combine several CSS properties and values to perform common actions. They are not meant to override default styles, but aid in things like accessibility and layout.

Accessibility

These utilities are related to accessibility. These should be used to make the experience more accessible.

ClassDescription
.sprk-u-ScreenReaderTextMakes content invisible while still being read by a screen reader.
.sprk-u-ShowOnFocus:focusWhen combined with `.sprk-u-ScreenReaderText` the element will become visible on focus.

Layout

These utilities are related to layout.

ClassDescription
ClearFixClearfix is a method of float containment. When applied to a container with floated children it forces the container to span the entire vertical extent of the children as if they weren't pulled out of the document flow by the floats. Elements that come after the Clearfixed element will no longer wrap around the floated children. The primary way to use `Clearfix` in Spark is by extending the placeholder in your Sass (e.g. `@extend %ClearFix;`). It can also be used by applying the class directly to the parent element, typically only used for debugging.
.sprk-u-AbsoluteCenterWhen placed on a container, its children will align in the absolute center (vertically and horizontally) of the box.
.sprk-u-FullWidthWhen placed on a container, it will cause it to fill the viewport, even if it's inside a limiting container (such as `sprk-o-CenteredColumn`).

Typography

These utilities are related to typography.

ClassDescription
.sprk-u-TextCrop--noneWhen placed on an element that contains text or any of the typography classes, it will remove the text cropping and the negative margins applied by the crop.
.sprk-u-TruncateWhen placed on an element that contains text, it will limit the text to one line and adds an ellipsis when it overflows.