Skip Navigation

CSS Helper Classes

Description

The Sabre Spark EDL offers a set of CSS classes to solve small, common problems and enforce consistency. If you have implemented any of the Spark components, then you most likely have already used one or more helper classes.

These helpers can be broken down into a few broader categories:

Typography

Bold Text

A class of spark-bold will increase the font-weight of an element to 600.

Thin Text

A class of spark-thin will decrease the font-weight of an element to 100.

Italic Text

A class of spark-italic will set the font-style of an element to italic.

Small Text

A class of spark-small will set the font-size of an element to 1.083rem, which is 81% the size of normal type.

Large Text

A class of spark-large will set the font-size of an element to 1.66rem, which is 125% the size of normal type.

Underlined Text

A class of spark-underline will set text-decoration to underline on an element.

Capitalized Text

A class of spark-caps will set text-transform to uppercase on an element.

Small Capitalized Text

A class of spark-small-caps will use font-feature-settings to force small capital letters on an element. The letter-spacing is adjusted to 0.1rem to track the type out slightly.

Numbers

A class of spark-numerals gives a line-height of 2.5rem to an element, and applies a font-size of 1.9375rem. This is used for creating large lists of numbers.

Additionally, spark-lining-numerals and spark-oldstyle-numerals create full-height or variable-height numbers, respectively.

Centered Text

A class of spark-text-center sets text-align to center on an element.

Left Justified Text

A class of spark-text-left sets text-align to left on an element.

Right Justified Text

A class of spark-text-right sets text-align to right on an element.

Line Height

A class of spark-line-height-1, spark-line-height-2, spark-line-height-3 or spark-line-height-4 will set the line-height on an element to be 1rem, 2rem, 3rem or 4rem, respectively.

Color

Danger Message Color

A class of spark-danger sets the color of an element to red.

Success Message Color

A class of spark-success sets the color of an element to green.

Warning Message Color

A class of spark-warning sets the color of an element to yellow.

Info Message Color

A class of spark-info sets the color of an element to blue.

Alternate Copy Color

A class of spark-alt sets the color of an element to white. This is for use on dark backgrounds.

Alignment

Table Alignment

A class of spark-align-top, spark-align-baseline or spark-align-middle will set an element’s vertical-align to top, middle or baseline, respectively.

Flex Alignment

A class of spark-align-items-center will set align-items to center.

Block Alignment

A class of spark-center-block will set an element’s display to block, remove any float and use the margin: 0 auto centering technique. Breakpoint-specific centering can be achieved using modifier classes.

Floating

A class of spark-pull-left or spark-pull-right will set an element’s float to left or right. Breakpoint-specific floats can be achieved using modifier classes.

Float Clearing

A class of spark-clear, spark-clear-left or spark-clear-right will set an element’s clear to both, left or right, respectively. Breakpoint-specific clearing of floats can be achieved using modifier classes.

Float Clearfix

A “clearfix” is a common technique for ensuring floated elements affect the size of their containing element. Add a class of spark-clearfix to apply the clearfix to an element.

Spacing

It is possible to define the margins and padding of an element using the spark-mar-* and spark-pad-* classes. These classes have a format of: spark-{property}-{modifier}-{size}--{breakpoint}.

Name Required Values
property Yes

mar for margin
pad for padding

modifier No

t for margin-top or padding-top
b for margin-bottom or padding-bottom
l for margin-left or padding-left
r for margin-right or padding-right

size Yes

0 for margin or padding of 0
.5 for margin or padding of 0.5rem
1 for margin or padding of 1rem
2 for margin or padding of 2rem

breakpoint No

Follows the breakpoint-specific class variant structure.

Spacing classes in action

<!-- margin: 0; -->
<div class="spark-mar-0"></div>

<!-- padding: .5rem; -->
<div class="spark-pad-.5"></div>

<!-- margin-left: 1rem; -->
<div class="spark-mar-l-1"></div>

<!-- @media (min-width: 544px) { padding-top: 0; } -->
<div class="spark-pad-t-2--gte-sm"></div>

Display

Block

A class of spark-block will set an element to be display: block. Breakpoint-specific variants are available.

Inline

A class of spark-inline will set an element to be display: inline. Breakpoint-specific variants are available.

Inline Block

A class of spark-inline-block will set an element to be display: inline-block. Breakpoint-specific variants are available.

Flex

A class of spark-flex will set an element to be display: flex. Breakpoint-specific variants are available.

Hidden

A class of spark-hidden will set an element to be display: none. Breakpoint-specific variants are available.

Other

Accessibility

A class of spark-assistive-text allows the addition of text that will be accessible to screen readers, but will not be visible on screen. This could be used in cases where a visual label isn’t necessary as there are other visual cues. This class could also be used to describe charts or other visual data.

<span class="spark-assistive-text">Text for screen readers</span>

Animations

A class of spark-animate-height will set the transform-property of an element to be height. This is used by the menu component to animate the height of expandable components and may be of limited use otherwise.

Inset Content

A class of spark-inset-content will create a light gray background with a top and bottom shadow on an element. This is ideal for creating “drawer” style expand and collapse areas.

Screen Reader Navigation Skip

A class of spark-skip-nav is provided for styling a link that allows users to bypass the main navigation and proceed to the main content landmark of an application or page. The link should be at the top of the HTML source order and prior to the Header component. An example of how to implement this can be found in any of the full page template examples provided by Spark.

Breakpoint-specific classes

Some helper classes include variants which apply only to certain breakpoints. For example, a class of spark-flex--lte-sm specifies that an element will be display: flex at any breakpoint at or below small. The modifier suffixes are:

  • --xs applies to an element at the extra small breakpoint
  • --gte-xs applies to an element at and above the extra small breakpoint
  • --sm applies to an element at the small breakpoint
  • --gte-sm applies to an element at and above the small breakpoint
  • --lte-sm applies to an element at and below the small breakpoint
  • --md applies to an element at the medium breakpoint
  • --gte-md applies to an element at and above the medium breakpoint
  • --lte-md applies to an element at and below the medium breakpoint
  • --lg applies to an element at the large breakpoint
  • --gte-lg applies to an element at and above the large breakpoint
  • --lte-lg applies to an element at and below the large breakpoint
  • --xl applies to an element at the extra large breakpoint
  • --lte-xl applies to an element at and below the extra large breakpoint