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