Cirrus

#Absolutes

Updated
0.7.2

Utility classes used to place positioned elements.

ClassStyles
u-top-0
top: 0 !important
u-top-px
top: 1px !important
u-top-auto
top: auto !important
u-top-25p
top: 25% !important
u-top-50p
top: 50% !important
u-top-75p
top: 75% !important
u-top-100p
top: 100% !important
u-top-n25p
top: -25% !important
u-top-n50p
top: -50% !important
u-top-n75p
top: -75% !important
u-top-n100p
top: -100% !important
u-top-0
top: 0px !important
u-top-1
top: 8px !important
u-top-2
top: 16px !important
u-top-3
top: 24px !important
u-top-4
top: 32px !important
u-top-5
top: 40px !important
u-top-6
top: 48px !important
u-top-8
top: 64px !important
u-top-n1
top: -8px !important
u-top-n2
top: -16px !important
u-top-n3
top: -24px !important
u-top-n4
top: -32px !important
u-top-n5
top: -40px !important
u-top-n6
top: -48px !important
u-top-n8
top: -64px !important
u-left-0
left: 0 !important
u-left-px
left: 1px !important
u-left-auto
left: auto !important
u-left-25p
left: 25% !important
u-left-50p
left: 50% !important
u-left-75p
left: 75% !important
u-left-100p
left: 100% !important
u-left-n25p
left: -25% !important
u-left-n50p
left: -50% !important
u-left-n75p
left: -75% !important
u-left-n100p
left: -100% !important
u-left-0
left: 0px !important
u-left-1
left: 8px !important
u-left-2
left: 16px !important
u-left-3
left: 24px !important
u-left-4
left: 32px !important
u-left-5
left: 40px !important
u-left-6
left: 48px !important
u-left-8
left: 64px !important
u-left-n1
left: -8px !important
u-left-n2
left: -16px !important
u-left-n3
left: -24px !important
u-left-n4
left: -32px !important
u-left-n5
left: -40px !important
u-left-n6
left: -48px !important
u-left-n8
left: -64px !important
u-bottom-0
bottom: 0 !important
u-bottom-px
bottom: 1px !important
u-bottom-auto
bottom: auto !important
u-bottom-25p
bottom: 25% !important
u-bottom-50p
bottom: 50% !important
u-bottom-75p
bottom: 75% !important
u-bottom-100p
bottom: 100% !important
u-bottom-n25p
bottom: -25% !important
u-bottom-n50p
bottom: -50% !important
u-bottom-n75p
bottom: -75% !important
u-bottom-n100p
bottom: -100% !important
u-bottom-0
bottom: 0px !important
u-bottom-1
bottom: 8px !important
u-bottom-2
bottom: 16px !important
u-bottom-3
bottom: 24px !important
u-bottom-4
bottom: 32px !important
u-bottom-5
bottom: 40px !important
u-bottom-6
bottom: 48px !important
u-bottom-8
bottom: 64px !important
u-bottom-n1
bottom: -8px !important
u-bottom-n2
bottom: -16px !important
u-bottom-n3
bottom: -24px !important
u-bottom-n4
bottom: -32px !important
u-bottom-n5
bottom: -40px !important
u-bottom-n6
bottom: -48px !important
u-bottom-n8
bottom: -64px !important
u-right-0
right: 0 !important
u-right-px
right: 1px !important
u-right-auto
right: auto !important
u-right-25p
right: 25% !important
u-right-50p
right: 50% !important
u-right-75p
right: 75% !important
u-right-100p
right: 100% !important
u-right-n25p
right: -25% !important
u-right-n50p
right: -50% !important
u-right-n75p
right: -75% !important
u-right-n100p
right: -100% !important
u-right-0
right: 0px !important
u-right-1
right: 8px !important
u-right-2
right: 16px !important
u-right-3
right: 24px !important
u-right-4
right: 32px !important
u-right-5
right: 40px !important
u-right-6
right: 48px !important
u-right-8
right: 64px !important
u-right-n1
right: -8px !important
u-right-n2
right: -16px !important
u-right-n3
right: -24px !important
u-right-n4
right: -32px !important
u-right-n5
right: -40px !important
u-right-n6
right: -48px !important
u-right-n8
right: -64px !important
Supported Pseudo-Variants
New
0.8.0
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited

See more pseudo-variants.

#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|bottom|right]-[default sizing value].

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 sm:grid-cols-3">
    <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 or enable it in the config in your Sass project.

//_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 lg:u-top-0 class.

<div class="lg:u-top-0">
    <!-- ... -->
</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.