util.css tests

.clearfix

Should stretch to accommodate floating elements

.pull-left

Should float the element left

.pull-right

Should float the element right

.responsive-width

Should fill the width of its container and auto scale the height

.responsive-height

Should fill the height of its container and auto scale the width

.border-box

Should include the padding and border within the width and height of an element

.flex

Should behave like a block element that lays out its content according to flexbox

.inline-flex

Should behave like an inline element that lays out its content according to flexbox

.flex-align-top

Should align at the top left of the container

.flex-align-middle

Should align at the middle left of the container

.flex-align-bottom

Should align at the bottom left of the container

.flex-align-left

Should align at the top left of the container

.flex-align-center

Should align at the top center of the container

.flex-align-right

Should align at the top right of the container

.flex-align-justify

Should evenly distribute the items on the line, with the first item at the start and the last item at the end

.flex-align-even

Should evenly distribute the items on the line with equal space around them

.flex-align-lines-top

Should pack lines at the top of the container

.flex-align-lines-middle

Should pack lines at the middle of the container

.flex-align-lines-bottom

Should pack lines at the bottom of the container

.flex-align-lines-justify

Should evenly distribute the lines with the first line at the top of the container and the last line at the bottom

.flex-align-lines-even

Should evenly distribute the lines with equal space between them

.flex-row

Should stack items horizontally, side-by-side

.flex-col

Should stack items vertically, top-to-bottom

.flex-nowrap

Should force items to be laid out on a single line

.flex-wrap

Should allow items to break into multiple lines

.show

The element should be visible

.hide

The element should not be visible and without layout

.invisible

The element should not be visible

The element should have layout

.transparent

The element should be not visible

The element should have layout

The element should still be a target for mouse events

.hidden-accessible

The element should not be visible and without layout, but available to screen readers

.hidden-accessible.focusable:active, .hidden-accessible.focusable:focus

The element should be focusable when navigated to via the keyboard

.hidden-measurable

The element should not be visible, but maintain layout offscreen

.visible-extra-small

The element should only be visible on extra small screens (less than 767px)

.hidden-extra-small

The element should be hidden only on extra small screens (less than 767px)

.visible-small

The element should only be visible on small screens (768px to 991px)

.hidden-small

The element should be hidden only on small screens (768px to 991px)

.visible-medium

The element should only be visible on medium-sized screens (992px to 1199px)

.hidden-medium

The element should be hidden only on medium-sized screens (992px to 1199px)

.visible-large

The element should only be visible on large screens (1200px and up)

.hidden-large

The element should be hidden only on large screens (1200px and up)

.visible-high-res

The element should only be visible on high resolution devices

.hidden-high-res

The element should be hidden only on high resolution devices

.center

Should center the element horizontally

.middle

Should center the element vertically

.middle-center

Should center the element horizontally and vertically

.abs-top-left

Should align an absolutely positioned element to the top-left of its container

.abs-top-center

Should align an absolutely positioned element to the top-center of its container

.abs-top-right

Should align an absolutely positioned element to the top-right of its container

.abs-middle-left

Should align an absolutely positioned element to the middle-left of its container

.abs-middle-center

Should align an absolutely positioned element to the middle-center of its container

.abs-middle-right

Should align an absolutely positioned element to the middle-right of its container

.abs-bottom-left

Should align an absolutely positioned element to the bottom-left of its container

.abs-bottom-center

Should align an absolutely positioned element to the bottom-center of its container

.abs-bottom-right

Should align an absolutely positioned element to the bottom-right of its container

.antialiased

Should make the text smooth

.kern

Should optimize spacing between characters

.text-truncate

Should prevent text from wrapping and truncate with an ellipsis

.text-break

Should break the text if the length exceeds the width of its container

.text-left

Should align text to the left of its container

.text-right

Should align text to the right of its container

.text-center

Should align text in the center of its container

.text-justify

Should ensure text is spaced to fill the width of its container

.text-lowercase

Should convert text to lowercase

.text-uppercase

Should convert text to uppercase

.text-capitalize

Should capitalize text

.text-normal

Should make text normal font weight

.text-bold

Should make text bold

.text-italic

Should make text italic

.hide-text

Should hide text, but be accessible to web crawlers and screen readers

.img-responsive

Should make an image responsive

.transition

Should transition whenever a property changes

.fadable

Should transition the element to creating a fading in/out effect

.collapsible

Should transition the element to creating a collapsing/expanding effect

.accelerated

Should invoke hardware acceleration for transitions

.disabled:disabled

Indicate that a form field element is disabled

.disabled:not(:disabled)

Indicate that a non-form element is disabled

.loading

Should indicate that the element is loading

.help

Should indicate that the element a helpful resource

.restricted

Should indicate that the element is restricted from interaction

.actionable

Should indicate that an element is actionable

.draggable

Should indicate that the element is draggable

Should prevent text selection of draggable element

.unselectable

Should prevent text selection

.unclickable

Should prevent user interaction

.prevent-callout

Should prevent the callout menu appearing in iOS Safari when the user performs tap & hold

.resizable

Should make an element resizable on both axes

.scrollable-vertical

Should display vertical scrollbar

.scrollable-horizontal

Should display horizontal scrollbar

.container

Should allow child elements to position absolute relative to the container and automatically clear floats

.overlay

Should create a fixed overlay