Utilities - Wilout UI

Spacing

Margin and padding utilities: ui-m-*, ui-p-*

Class	Property
`ui-m-0` to `ui-m-12`	margin: 0 to 3rem
`ui-mt-`, `ui-mr-`, `ui-mb-`, `ui-ml-`	margin-top/right/bottom/left
`ui-mx-`, `ui-my-`	margin horizontal/vertical
`ui-p-*`	padding (same pattern)

<div class="ui-m-4">margin: 1rem</div>
<div class="ui-mt-2 ui-mb-4">margin-top: 0.5rem, margin-bottom: 1rem</div>
<div class="ui-p-3">padding: 0.75rem</div>
<div class="ui-px-4 ui-py-2">padding horizontal/vertical</div>

Display

.ui-d-none         { display: none; }
.ui-d-block        { display: block; }
.ui-d-inline       { display: inline; }
.ui-d-inline-block { display: inline-block; }
.ui-d-flex         { display: flex; }
.ui-d-inline-flex  { display: inline-flex; }
.ui-d-grid         { display: grid; }

/* Responsive: ui-d-{breakpoint}-{value} */
.ui-d-md-none      { @media (min-width: 768px) { display: none; } }

Flexbox

/* Direction */
.ui-flex-row, .ui-flex-col, .ui-flex-row-reverse, .ui-flex-col-reverse

/* Justify Content */
.ui-justify-start, .ui-justify-end, .ui-justify-center
.ui-justify-between, .ui-justify-around, .ui-justify-evenly

/* Align Items */
.ui-items-start, .ui-items-end, .ui-items-center
.ui-items-baseline, .ui-items-stretch

/* Gap */
.ui-gap-0, .ui-gap-1, .ui-gap-2, .ui-gap-3, .ui-gap-4, .ui-gap-6, .ui-gap-8

Flex item 1 Flex item 2 Flex item 3

<div class="ui-d-flex ui-justify-between ui-items-center ui-gap-4">
  <span>Flex item 1</span>
  <span>Flex item 2</span>
  <span>Flex item 3</span>
</div>

Position

.ui-static, .ui-relative, .ui-absolute, .ui-fixed, .ui-sticky

/* Positioning */
.ui-top-0, .ui-right-0, .ui-bottom-0, .ui-left-0
.ui-inset-0, .ui-inset-x-0, .ui-inset-y-0

Width & Height

.ui-w-full   { width: 100%; }
.ui-w-auto   { width: auto; }
.ui-w-screen { width: 100vw; }
.ui-h-full   { height: 100%; }
.ui-h-screen { height: 100vh; }
.ui-min-h-screen { min-height: 100vh; }

Overflow

.ui-overflow-auto, .ui-overflow-hidden, .ui-overflow-visible, .ui-overflow-scroll
.ui-overflow-x-auto, .ui-overflow-y-auto

Visibility

.ui-visible   { visibility: visible; }
.ui-invisible { visibility: hidden; }
.ui-sr-only   { /* Screen reader only */ }

Z-Index

.ui-z-0, .ui-z-10, .ui-z-20, .ui-z-30, .ui-z-40, .ui-z-50

Text

/* Text Alignment */
.ui-text-left, .ui-text-center, .ui-text-right

/* Font Weight */
.ui-font-normal, .ui-font-medium, .ui-font-semibold, .ui-font-bold

/* Font Size */
.ui-text-xs, .ui-text-sm, .ui-text-base, .ui-text-lg, .ui-text-xl