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.

Flexbox Utilities

FrankUI provides standard flexbox utilities to construct responsive layouts, manage child alignments, distribution, wrapping, and spacings in real-time.

Live Flexbox Sandbox

Customize the flex direction, justification, alignment, and gap to see how the child items flow.

Flex Direction

Justify Content

Align Items

Gap Spacing

Item 1

Item 2

Item 3

                    Classes: d-flex flex-row flex-justify-start flex-align-stretch gap-4
                

Flexbox Reference

Class Pattern	Applied Style	Description
.d-flex .d-inline-flex	display: flex !important; display: inline-flex !important;	Enables flex context on container
.flex-row .flex-column ...-reverse	flex-direction: row !important; flex-direction: column !important; ...-reverse !important;	Controls flow direction of flex children
.flex-wrap .flex-nowrap .flex-wrap-reverse	flex-wrap: wrap !important; flex-wrap: nowrap !important; flex-wrap: wrap-reverse !important;	Controls wraps when children exceed dimensions
.flex-justify-start ... end ...-center / between / around	justify-content: flex-start !important; justify-content: space-between !important;	Distributes children along the main flow axis
.flex-align-start ... end ...-center / stretch	align-items: flex-start !important; align-items: center !important;	Aligns children along the cross axis
.flex-self-start ... end ...-center / stretch	align-self: flex-start !important; align-self: center !important;	Applied to children; overrides parent's cross alignment
.flex-grow-0 .flex-grow-1	flex-grow: 0 !important; flex-grow: 1 !important;	Controls item growth capacity
.order-0 ... 12	order: [index] !important;	Sets rendering order order index
.gap-0 ... 12	gap: [level * 4]px !important;	Sets spacing gap between rows/columns (0px to 48px)

Responsive Breakpoint Utilities

Responsive variants (e.g. .flex-column-md) allow you to rearrange column listings on mobile/tablets into side-by-side row grids on desktop:

<!-- Stack on mobile, horizontal row layout on desktop (medium screen & above) -->
<div class="d-flex flex-column flex-row-md gap-4">
    <div class="card">Sidebar content</div>
    <div class="card flex-grow-1">Main content area</div>
</div>