# Utils

Added
0.5.5

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.

# Breakpoints

Added
0.5.5

The standard breakpoints used in Cirrus are for mobile, tablet, and desktop.

Type Min (px) Max (px)
Mobile 0 768
Tablet 769 1023
Desktop 1024 -

From that, the class designations in Cirrus so far follow this guideline:

Mobile
Below and including 768px
Tablet
Between 769px and 1023px
Desktop
Above and including 1024px

*-mobile

-

-

*-tablet

-

*-desktop

-

*-tablet-only

-

Classes for hiding content:

u-hide-mobile Hide content for mobile devices.
u-hide-tablet Hide content for tablets and larger screens.
u-hide-tablet-only Hide content only for tablets.
u-hide-desktop Hide content for large screens.

Ignoring Breakpoints

Currently, only the col-* classes which are nested inside row. By adding the ignore-screen class, we instruct Cirrus to not resize for mobile displays. More documentation can be found here.