A collection of project agnostic, semantic, and modular CSS utility classes.
The library is composed of dozens of utility classes written in raw CSS (not a preprocessor such as Sass or Less). All the utilities are grouped into the following categories:
Class
Description
clearfixAllows an element to stretch to accommodate floating elements.
pull-leftFloat an element left.
pull-rightFloat an element right.
responsive-widthSets a maximum width relative to the parent and auto scales the height.
responsive-heightSets a maximum height relative to the parent and auto scales the widt (parent element must have a fixed height).
border-boxReset the box model so that it doesn't include the padding and border as part of the width and height of the element.
Class
Description
flexBlock element that lays out its content according to flexbox.
inline-flexInline element that lays out its content according to flexbox.
flex-align-topPlace an item to the top of the container.
flex-align-middlePlace an item to the bottom of the container.
flex-align-bottomPlace an item to the bottom of the container.
flex-align-leftPack items toward the start line.
flex-align-centerItems are centered along the line.
flex-align-rightPack items toward the end line.
flex-align-justifyItems are evenly distributed on the line; first item is on the start line, last item on the end line.
flex-align-evenItems are evenly distributed on the line with equal space between them.
flex-align-lines-topLines are packed to the top of the container.
flex-align-lines-middleLines are packed to the middle of the container.
flex-align-lines-bottomLines are packed to the bottom of the container.
flex-align-lines-justifyLines are evenly distributed; the first line is at the top of the container, the last line is at the end.
flex-align-lines-evenLines are evenly distributed with equal space between them.
flex-rowItems are stacked horizontally, side-by-side.
flex-colItems are stacked vertically, top-to-bottom.
flex-nowrapForce items to be laid out on a single line.
flex-wrapAllow items to break into multiple lines.
Class
Description
showShow an element.
hideHide an element visually and from screen readers.
invisibleHide an element visually and from screen readers, but maintain layout.
transparentHide an element visually, but still allow it to be accessible to screen readers, maintain layout, and allow pointer events.
hidden-accessibleHide an element visually, but still allow it to be accessible to screen readers.
focusableAllows a hidden-accessible element to be focusable when navigated to via the keyboard.
hidden-measurableHide an element visually, but maintain its layout offscreen so that its width and height and still be accurately measured.
visible-extra-smallMake an element visible only on extra small screens (less than 767px).
hidden-extra-smallMake an element hidden only on extra small screens (less than 767px).
visible-smallMake an element visible only on small screens (768px to 991px).
hidden-smallMake an element hidden only on small screens (768px to 991px).
visible-mediumMake an element visible only on medium-sized screens (992px to 1199px).
hidden-mediumMake an element hidden only on medium-sized screens (992px to 1199px).
visible-largeMake an element visible only on large screens (1200px and up).
hidden-largeMake an element hidden only on large screens (1200px and up).
visible-high-resMake an element visible only on high resolution devices.
hidden-high-resMake an element hidden only on high resolution devices.
Class
Description
centerCenter an element horizontally (requires width).
middleCenter an element vertically.
middle-centerCenter an element horizontally and vertically
abs-top-leftAlign an absolutely positioned element to the top-left of its container.
abs-top-centerAlign an absolutely positioned element to the top-center of its container (requires width).
abs-top-rightAlign an absolutely positioned element to the top-right of its container.
abs-middle-leftAlign an absolutely positioned element to the middle-left of its container (requires height).
abs-middle-centerAlign an absolutely positioned element to the middle-center of its container (requires width & height).
abs-middle-rightAlign an absolutely positioned element to the middle-right of its container (requires height).
abs-bottom-leftAlign an absolutely positioned element to the bottom-left of its container.
abs-bottom-centerAlign an absolutely positioned element to the bottom-center of its container (requires width).
abs-bottom-rightAlign an absolutely positioned element to the bottom-right of its container.
Class
Description
antialiasedEnable antialiasing for a smoother font.
kernEnable font kerning for optimal character spacing.
text-truncatePrevent text from wrapping and truncate with an ellipsis.
text-breakBreak strings when their length exceeds the width of their container.
text-leftAlign text to the left of its container.
text-rightAlign text to the right of its container.
text-centerAlign text in the center of its container.
text-justifyEnsure text is spaced to fill the width of its container.
text-lowercaseConvert text to lowercase.
text-uppercaseConvert text to uppercase.
text-capitalizeCapitalize text.
text-normalMake text normal font weight.
text-boldMake text bold.
text-italicMake text italic.
Class
Description
hide-textImage replacement to provide a caption to an image that is only available to web crawlers and screen readers.
img-responsiveMake an image responsive while maintaining aspect ratio.
Class
Description
transitionAllow an element to transition whenever a property changes.
fadableProvides a fade in/out effect to an element.
collapsibleProvides a collapse/expand effect to an element.
acceleratedCreate a new stacking context (composite layer) in order to invoke hardware acceleration for smoother animations.
Class
Description
disabledIndicate than an element is disabled and prevent user interaction.
loadingIndicate that an element is loading.
helpIndicate that an element is a helpful resource.
restrictedIndicate that an element is restricted from interaction.
Class
Description
actionableIndicate that an element is actionable (clickable).
draggableAdd drag characteristics to an element.
unselectablePrevent text selection.
unclickablePrevent user interaction.
prevent-calloutPrevent the callout menu appearing in iOS Safari when the user performs tap & hold.
resizableMake an element resizable on both axes.
scrollable-verticalMake an element vertically scrollable
scrollable-horizontalMake an element horizontally scrollable
Class
Description
containerAll-purpose wrapper for UI elements that allow child elements to position absolute relative to the container and automatically clears floats.
overlayGeneral fixed overlay UI element
Download the development or minified version, or install it in one of the following ways:
npm install ryanmorr/util.css
bower install ryanmorr/util.css This project is dedicated to the public domain as described by the Unlicense .
