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.
Serif Text
A class of spark-serif will force text to use the defined serif font.
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
Margin
A class of spark-margin will add a margin of 1rem to an element. Similarly, spark-margin-top, spark-margin-bottom, spark-margin-left and spark-margin-right will add 1rem of margin to the top, bottom, left, or right of an element, respectively.
Size variants of these margins are also available. Adding a modifier of --sm or --lg to one of the margin classes above will create a margin of .5rem or 2rem.
Padding
A class of spark-padding will add a padding of 1rem to an element. Similarly, spark-padding-top, spark-padding-bottom, spark-padding-left and spark-padding-right will add 1rem of padding to the top, bottom, left or right of an element, respectively.
Size variants of these paddings are also available. Adding a modifier of --sm or --lg to one of the padding classes above will create a padding of .5rem or 2rem.
Remove Padding
A class of spark-remove-padding inside of a grid row will remove the left and right padding on a column. Breakpoint-specific padding removal can be achieved using modifier classes.
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
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 will create an invisible element that is still accessible to screen readers. This should be used at the top of a page to create a link to skip a screen reader past reading the navigation.
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:
--xsapplies to an element at the extra small breakpoint--gte-xsapplies to an element at and above the extra small breakpoint--smapplies to an element at the small breakpoint--gte-smapplies to an element at and above the small breakpoint--lte-smapplies to an element at and below the small breakpoint--mdapplies to an element at the medium breakpoint--gte-mdapplies to an element at and above the medium breakpoint--lte-mdapplies to an element at and below the medium breakpoint--lgapplies to an element at the large breakpoint--gte-lgapplies to an element at and above the large breakpoint--lte-lgapplies to an element at and below the large breakpoint--xlapplies to an element at the extra large breakpoint--lte-xlapplies to an element at and below the extra large breakpoint