Skip to Main Content

CSS Utilities

Use CSS utility classes to customize and extend Spark components.

Table of Contents

Single-Property Utilities

These utilities change only one CSS property. Use one or more to override an element's default style.

All Single-Property Utilities override default styles with !important property.

Display and Visibility

These utilities change how elements render on the page, and can also affect screen reader output.

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.
Back to Table of Contents

Floats, Position, and Alignment

These utilities change an element's position context as well as document flow.

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`.
Back to Table of Contents

Typography

These utilities change text style and flow.

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`.
Back to Table of Contents

Overflow

These utilities control how content renders when an element 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.
Back to Table of Contents

Width

These utilities affect the width of an element.

In increments of 5, the number at the end of each utility class can be between 5 and 100.

This table shows examples of a few possible widths.

ClassDescription
.sprk-u-MaxWidth--100Changes the max-width of the element to 100 percent.
.sprk-u-Width--autoChanges the width of the element to `auto`.
.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.
Back to Table of Contents

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-mahSets the margin on all sides to `64px`
.sprk-u-phmSets the left and right padding to `16px`
.sprk-u-mbnSets the bottom margin to `0px`
Back to Table of Contents

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-PaddingHorizontal--bSets the padding on the left and right (horizontal) to `$sprk-space-misc-b` (`40px`).
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`).
Back to Table of Contents

Color

These utilities change 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--orangeSets the font color to orange.
.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--orangeSets the background color to orange.
.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.
Back to Table of Contents

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.
Back to Table of Contents

Multi-Property Utilities

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

Accessibility

These utilities extend element behavior for better accessibility performance.

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.
Back to Table of Contents

Layout

These utilities affect layout, and positioning.

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`).
Back to Table of Contents

Text

These utilities are related to text and flow.

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.
Back to Table of Contents