#Absolutes

New
0.7.0

Utility classes used to place positioned elements.

ClassStyles
u-top-0
top: 0 !important
u-top-50p
top: 50% !important
u-top-100p
top: 100% !important
u-top-n50p
top: -50% !important
u-top-n100p
top: -100% !important
u-top-auto
top: auto !important
u-left-0
left: 0 !important
u-left-50p
left: 50% !important
u-left-100p
left: 100% !important
u-left-n50p
left: -50% !important
u-left-n100p
left: -100% !important
u-left-auto
left: auto !important
u-bottom-0
bottom: 0 !important
u-bottom-50p
bottom: 50% !important
u-bottom-100p
bottom: 100% !important
u-bottom-n50p
bottom: -50% !important
u-bottom-n100p
bottom: -100% !important
u-bottom-auto
bottom: auto !important
u-right-0
right: 0 !important
u-right-50p
right: 50% !important
u-right-100p
right: 100% !important
u-right-n50p
right: -50% !important
u-right-n100p
right: -100% !important
u-right-auto
right: auto !important

#Examples

Cirrus comes with utility classes that allow you to anchor any element in any of the 4 directions with both positive and negative offsets. The utility classes generally follow this form: u-[top|left|right|bottom]-[0|50p|100p|n50p|n100p|auto].

These utilities can be used with both Margin and Padding utility classes to help size and position elements.

<div class="grid u-gap-3 grid-cols-2 grid-cols-3-sm">
    <div class="u-relative">
        <div class="u-absolute u-left-0 u-top-0 u-right-50p u-bottom-50p"></div>
    </div>
    <div class="u-relative">
        <div class="u-absolute u-left-0 u-top-0 u-right-0 u-bottom-50p"></div>
    </div>
    <div class="u-relative">
        <div class="u-absolute u-left-50p u-top-0 u-right-0 u-bottom-50p"></div>
    </div>
    <div class="u-relative">
        <div class="u-absolute u-left-0 u-top-0 u-right-50p u-bottom-0"></div>
    </div>
    <div class="u-relative">
        <div class="u-absolute u-left-0 u-top-0 u-right-0 u-bottom-0"></div>
    </div>
    <div class="u-relative">
        <div class="u-absolute u-left-50p u-top-0 u-right-0 u-bottom-0"></div>
    </div>
    <div class="u-relative">
        <div class="u-absolute u-left-0 u-top-50p u-right-50p u-bottom-0"></div>
    </div>
    <div class="u-relative">
        <div class="u-absolute u-left-0 u-top-50p u-right-0 u-bottom-0"></div>
    </div>
    <div class="u-relative">
        <div class="u-absolute u-top-50p u-right-0 u-bottom-0 u-left-50p"></div>
    </div>
</div>

Negative Offsets

By convention, negative values are prefixed with an n before numerical value. For example, u-left-n50p will set a left offset of -50%.

<div class="u-relative bg-indigo-100 u-round-sm" style="height: 8rem; width: 8rem;">
    <div class="u-absolute u-top-n50p u-right-n50p bg-indigo-500 u-round-sm u-shadow-xl" style="height: 8rem; width: 8rem;"></div>
</div>

#Responsive

⚠ Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build.

//_configs.scss
$config: (
    viewports: (
        flags.$ABSOLUTES: true,
    )
) !default;

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want u-top-0 to be applied to some element for lg and above, then I would use the u-top-0-lg class.

<div class="u-top-0-lg">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.

#Variants

The classes specified above are the default utility classes for setting absolutes. You can add, change, or remove classes within the _config.scss file of Cirrus.

// _config.scss
$config: (
    extend: (
        absolute: (
            '10px': 10px
        )
    )
) !default;

This would generate the following additonal classes.

.u-top-10px {
    top: 10px !important
}
.u-left-10px {
    left: 10px !important
}
.u-right-10px {
    right: 10px !important
}
.u-bottom-10px {
    bottom: 10px !important
}

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.