Utils

The utils section of Cirrus is designed to provide helpers to make minor modifications to elements without having to redefine properties multiple times.

Layout this-inline Makes the container or element display inline like a span.
this-inline-block The container is rendered as an inline element while its children are formatted as block-level boxes.
this-block The container is rendered as a block element.
this-inline-flex Displays an element as an inline-level flex container.
this-overlay Displays element absolutely overlaying other elements.
Floats clear-left When using floats with other elements,moves element such that it is not overlapping an element with float-left.
clear-right When using floats with other elements,moves element such that it is not overlapping an element with float-right.
clear-both When using floats with other elements,moves element such that it is not overlapping any element with floats left or right.
pull-left Makes an element float left.
clear-both Makes an element float right.
Centering center Centers an element using flexbox with automatic margin on the sides.
center-alt Backwards compatible version of the center class that centers the element absolutely relative to the other elements.
vertical-center Centering elements vertically using flexbox.
horizontal-center Aligns elements in the center horizontally using flexbox.
Text text-center Aligns text in the center.
text-left Aligns text in the left
text-right Aligns text in the right.
Size box A box style for any div with a box shadow and 1 rem padding.
fill-width Makes element width 100% of the parent container's width.
Shapes round Rounds the corner of the element.
circle Turns the element into a circle.
Misc no-margin Removes margin from element.
no-padding Removes padding from element.