Common CSS (Spacing & Position Utilities)

FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, and spacing. These utilities form the foundation for more advanced responsive interfaces.

Demo: This element has class fixed-top. It is fixed at the top of the viewport.

Demo: This element has class fixed-bottom. It is fixed at the bottom of the viewport.

Responsive Breakpoints

Position helper classes have responsive variations that apply at specific viewport width thresholds. The pattern follows .{class}-{breakpoint}.

Exception Note: The classes .pos-sticky, .fixed-top, and .fixed-bottom do not have responsive variants.

Breakpoint Prefix	Applies At	Example Class
-xs	≥ 480px	.pos-relative-xs
-sm	≥ 576px	.pos-absolute-sm
-md	≥ 768px	.pos-static-md
-lg	≥ 992px	.pos-fixed-lg
-xl	≥ 1200px	.pos-relative-xl
-xxl	≥ 1400px	.pos-absolute-xxl
-xxxl	≥ 1600px	.pos-static-xxxl

Responsive Code Example

<!-- Absolute positioned block on large screens, standard relative block on mobile -->
<div class="pos-relative pos-absolute-lg" style="top: 20px; right: 20px;">
    <span>Responsive Badge</span>
</div>

<!-- Element fixed on tablet screens and above, static on mobile -->
<div class="pos-static pos-fixed-md" style="bottom: 10px; left: 10px;">
    <p>Floating Action Bar</p>
</div>