4.33.0

CSS Utils

Helpful CSS utility classes that can be mixed and matched

Demo

API

Text

Class Description
text-[start|center|end|justify] Aligns text
text-[left|right] (Deprecated) Use text-[start|end] instead.
text-[xs|xs-strong|sm|sm-strong|md-regular|md|lg|xl|xxl] Text size/weight
text-underline Text decoration
text-white Text color (white)
text-red-medium Text color (red-medium)
text-red-dark Text color (red-dark)
text-yellow-darker Text color (yellow-darker)
text-green-dark Text color (green-dark)
text-blue-medium Text color (blue-medium)
text-space Adds standard letter spacing
text-capitalize Capitalize text transform
text-uppercase Uppercase text transform
text-lowercase Lowercase text transform
text-strikethrough Strikethrough text transform
text-default Default text transform (reset inside a transformed block)
text-label Text style that matches label elements
text-ellipsis Truncates overflow text with ellipsis. You must also set a width (in pixels) on the text container.

Font

Class Description
font-[light|normal|semibold|bold] Font weight
font-italic Italic font
font-normal Normal font

Display

Class Description
flex Display flex
inline-flex Display inline-flex
flex-dir-[row|col] Sets main axis of flexbox.
justify-[self|content]-[center|start|end|stretch|space] Aligns content along main axis of flexbox. Space is only available for content and applies space-between style.
align-[self|items]-[center|start|end|stretch] Aligns content along cross axis of flexbox.
flex-wrap Wraps items in flexbox.
block Display block
inline Display inline
inline-block Display inline-block
hidden Display none
visually-hidden Visually hidden but visible to screen readers
end Float inline-end
right (Deprecated)Use end instead.
clear Clear both

Size

Class Description
full-width 100% width

Position

Class Description
absolute Position absolute
relative Position relative
sticky Position sticky.

Element must also have one of the following set: top|inset-block-start, bottom|inset-block-end, left|inset-inline-start, or right|inset-inline-end.

The pin utility classes make this easy, e.g. <div class="sticky pin-t">

This isn't set by default because some sticky designs stick vertically and some horizontally.

Parent containers must not have overflow set.
static Position static
fixed Position fixed
pin Position top, right (inline-end), bottom, left (inline-start) to 0
pin-auto Position top, right (inline-end), bottom, left (inline-start) to auto
pin-[t|ie|b|is] Position top, right (inline-end), bottom, left (inline-start) to 0
pin-[l|r] (Deprecated) Use pin-[is|ie] instead.

Spacing

Class Description
pad-[all|top|end|bottom|start]-[none|xs|sm|md|lg|xl] Applies padding of the specified size to the specified area
pad-[left|right]-[none|xs|sm|md|lg|xl] (Deprecated) Use pad-[start|end]-[none|xs|sm|md|lg|xl] instead.
margin-[all|top|end|bottom|start]-[none|auto|xs|sm|md|lg|xl] Applies margin of the specified size to the specified area. Auto is only available for start and end.
margin-[left|right]-[none|auto|xs|sm|md|lg|xl] (Deprecated) Use margin-[start|end]-[none|auto|xs|sm|md|lg|xl] instead.

Vertical dividers

Class Description
divider-[start|end] Creates gray vertical divider
divider-[left|right] (Deprecated) Use divider-[start|end] instead.

Guidelines

Utils override all other styles

Util classes are by definition meant to override all other styling. CSS provides a property to ensure that a style will take precedence: !important. The only CSS in the Skylab SDK codebase where !important is implemented is for these util classes.

Use 'em

Leverage these utils and focus your efforts on any custom styles you might have. The utils use known best-practices and are tested across browsers and can help you achieve a CSS-free app!

Don't recreate existing styles

Avoid using utility classes to create what's already available. For example, a <p> shouldn't be restyled to match the look of an <h1> because you should just use <h1>.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com