Single Property Utilities

Code Examples

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 of these utilities include an "!important" flag in order to supercede an element's default styles.

Display & Visibility

These utilities control CSS properties related to display and visibility.

Class Description
.sprk-u-Display--none Turns off the display of an element so that it has no effect on layout.
.sprk-u-Display--block The element generates a block element box.
.sprk-u-Display--inline The element generates one or more inline element boxes.
.sprk-u-Display--inline-block The element generates a block element box that will be flowed with surrounding content as if it were a single inline box.
.sprk-u-Visibility--hidden The element box is invisible, but still affects layout as normal. A screen reader will still read this text.
.sprk-u-Visibility--visible The element is visible.

Floats, Position, & Alignment

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

Class Description
.sprk-u-Float--none Resets the float property of an element back to none.
.sprk-u-Float--left Floats an element to the left.
.sprk-u-Float--right Floats an element to the right.
.sprk-u-Position--relative The element is positioned according to the normal flow of the document, and then offset relative to itself.
.sprk-u-Position--absolute The 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--fixed The 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--static The element is positioned according to the normal flow of the document.
.sprk-u-Top--zero Resets an element's top offset back to zero.
.sprk-u-Bottom--zero Resets an element's bottom offset back to zero.
.sprk-u-Left--zero Resets an element's left offset back to zero.
.sprk-u-Right--zero Resets an element's right offset back to zero.
.sprk-u-TextAlign--left Aligns text to the left of the container.
.sprk-u-TextAlign--right Aligns text to the right of the container.
.sprk-u-TextAlign--center Aligns text in the horizontal center of the container.
.sprk-u-VerticalAlign--top Aligns the contents of a box to the top if it's display property is inline or table-cell.
.sprk-u-VerticalAlign--middle Aligns the contents of a box to the vertical middle if it's display property is inline or table-cell.
.sprk-u-VerticalAlign--bottom Aligns the contents of a box to the bottom if it's display property is inline or table-cell.
.sprk-u-VerticalAlign--baseline Aligns 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.

Class Description
.sprk-u-FontWeight--bold Sets the font weight to bold.
.sprk-u-FontWeight--normal Sets the font weight to normal.
.sprk-u-FontStyle--italic Sets the font style to italic.
.sprk-u-FontStyle--normal Sets the font style to normal.
.sprk-u-TextDecoration--underline Sets the text decoration to underline.
.sprk-u-TextDecoration--none Sets the text decoration to none.
.sprk-u-TextTransform--uppercase Transforms text to uppercase.
.sprk-u-TextTransform--none Removes text transformation for text.
.sprk-u-WordWrap--break-word Sets word-wrap to break-word.
.sprk-u-WhiteSpace--nowrap Sets white-space to nowrap.

Overflow

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

Class Description
.sprk-u-Overflow--visible Content is not clipped and may be rendered outside the padding box.
.sprk-u-Overflow--hidden Content is clipped if necessary to fit the padding box. No scrollbars are provided.
.sprk-u-Overflow--scroll Content is clipped if necessary to fit the padding box. Browsers display scrollbars whether or not any content is actually clipped.
.sprk-u-Overflow--auto If 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%.

Class Description
.sprk-u-Width-5 Changes the width of the element to 5 percent.
.sprk-u-Width-10 Changes the width of the element to 10 percent.
.sprk-u-Width-15 Changes the width of the element to 15 percent.
.sprk-u-Width-20 Changes the width of the element to 20 percent.
.sprk-u-Width-25 Changes the width of the element to 25 percent.
.sprk-u-Width-30 Changes the width of the element to 30 percent.
.sprk-u-Width-35 Changes the width of the element to 35 percent.
.sprk-u-Width-40 Changes the width of the element to 40 percent.
.sprk-u-Width-45 Changes the width of the element to 45 percent.
.sprk-u-Width-50 Changes the width of the element to 50 percent.
.sprk-u-Width-55 Changes the width of the element to 55 percent.
.sprk-u-Width-60 Changes the width of the element to 60 percent.
.sprk-u-Width-65 Changes the width of the element to 65 percent.
.sprk-u-Width-70 Changes the width of the element to 70 percent.
.sprk-u-Width-75 Changes the width of the element to 75 percent.
.sprk-u-Width-80 Changes the width of the element to 80 percent.
.sprk-u-Width-85 Changes the width of the element to 85 percent.
.sprk-u-Width-90 Changes the width of the element to 90 percent.
.sprk-u-Width-95 Changes the width of the element to 95 percent.
.sprk-u-Width-100 Changes the width of the element to 100 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, m (padding, margin)
  • location : a, t, r, b, l, h, v (all, top, right, bottom, left, horizontal, vertical)
  • size : s, m, l, h, n (small (8px), medium (16px), large (32px), huge (64px), none (0px))

Examples

Class Values Description
.sprk-u-mbn margin-bottom: none Sets the bottom margin to 0px.
.sprk-u-phm padding-left: 16px;
padding-right: 16px;
Sets the padding on the left and right (horizontal) to 16px.
.sprk-u-mah margin: 64px Sets the margin to 64px on all sides.

Color

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

Class Description
.sprk-u-Color--red Sets the font color to red.
.sprk-u-Color--black Sets the font color to black.
.sprk-u-Color--white Sets the font color to white.
.sprk-u-Color--gray Sets the font color to gray.
.sprk-u-Color--red-mid Sets the font color to red-mid.
.sprk-u-Color--red-deep Sets the font color to red-deep.
.sprk-u-Color--green Sets the font color to green.
.sprk-u-Color--yellow Sets the font color to yellow.
.sprk-u-Color--blue Sets the font color to blue.
.sprk-u-BackgroundColor--red Sets the background color to red.
.sprk-u-BackgroundColor--black Sets the background color to black.
.sprk-u-BackgroundColor--black-tint-75 Sets the background color to the black tinted at 75%.
.sprk-u-BackgroundColor--black-tint-50 Sets the background color to the black tinted at 50%.
.sprk-u-BackgroundColor--black-tint-25 Sets the background color to the black tinted at 25%.
.sprk-u-BackgroundColor--white Sets the background color to white.
.sprk-u-BackgroundColor--gray Sets the background color to gray.
.sprk-u-BackgroundColor--gray-tint-75 Sets the background color to the gray tinted at 75%.
.sprk-u-BackgroundColor--gray-tint-50 Sets the background color to the gray tinted at 50%.
.sprk-u-BackgroundColor--gray-tint-25 Sets the background color to the gray tinted at 25%.
.sprk-u-BackgroundColor--red-mid Sets the background color to red-mid.
.sprk-u-BackgroundColor--red-deep Sets the background color to red-deep.
.sprk-u-BackgroundColor--green Sets the background color to green.
.sprk-u-BackgroundColor--yellow Sets the background color to yellow.
.sprk-u-BackgroundColor--blue Sets the background color to blue.

Height

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

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