Typography

Type scale, weight, alignment & transforms — each example followed by its code.

Type scale

Heading XXL
Heading XL
Heading LG
Body Base
Small muted text
Extra small uppercase
<div class="text-xxl fw-bold lh-heading">Heading XXL</div>
<div class="text-xl fw-semibold lh-heading">Heading XL</div>
<div class="text-lg fw-medium lh-heading">Heading LG</div>
<div class="text-base">Body Base</div>
<div class="text-sm text-muted">Small muted text</div>
<div class="text-xs text-uppercase">Extra small uppercase</div>

Alignment

Left aligned
Center aligned
Right aligned
<div class="text-left">Left aligned</div>
<div class="text-center">Center aligned</div>
<div class="text-right">Right aligned</div>

Weights & transforms

Light
Normal
Semibold
Uppercase bold
Underline
Line-through
No decoration
<div class="fw-light">Light</div>
<div class="fw-normal">Normal</div>
<div class="fw-semibold">Semibold</div>
<div class="fw-bold text-uppercase">Uppercase bold</div>
<div class="text-underline">Underline</div>
<div class="text-line-through">Line-through</div>
<div class="text-no-decoration">No decoration</div>

Color Utilities

Text, background, border & spinner colors.

Text

Primary
Success
Danger
Info
Gray
Muted
<div class="text-primary">Primary</div>
<div class="text-success">Success</div>
<div class="text-danger">Danger</div>
<div class="text-info">Info</div>
<div class="text-gray">Gray</div>
<div class="text-muted">Muted</div>

Background

Primary
Success
Warning
Danger
<div class="p-2 bg-primary text-white rounded-sm">Primary</div>
<div class="p-2 bg-success text-white rounded-sm">Success</div>
<div class="p-2 bg-warning rounded-sm">Warning</div>
<div class="p-2 bg-danger text-white rounded-sm">Danger</div>

Border

Primary
Success
Danger
<div class="p-2 border border-primary rounded-sm">Primary</div>
<div class="p-2 border border-success rounded-sm">Success</div>
<div class="p-2 border border-danger rounded-sm">Danger</div>

Spinner

<span class="spinner spinner-primary"></span>
<span class="spinner spinner-success"></span>
<span class="spinner spinner-danger"></span>
<span class="spinner spinner-info"></span>

Spacing & Sizing

Margin/padding utilities and width/height tokens.

Margin & Padding

m-1 p-2
mx-2 my-1
px-4 py-2
pt-5 pb-1
<div class="m-1 p-2">...</div>
<div class="mx-2 my-1 p-3">...</div>
<div class="px-4 py-2">...</div>
<div class="pt-5 pb-1">...</div>

Percentage widths

w-25
w-50
w-75
w-100
<div class="w-25">...</div>
<div class="w-50">...</div>
<div class="w-75">...</div>
<div class="w-100">...</div>

Fixed & viewport sizes

wpx-64
wrem-4
wvw-25
hvh-25
<div class="wpx-64">...</div>
<div class="wrem-4">...</div>
<div class="wvw-25">...</div>
<div class="hvh-25">...</div>

Layout

Containers, flex row/cols, and CSS grid helpers.

Containers

.container-narrow
.container-wide
<div class="container-narrow">...</div>
<div class="container-wide">...</div>

Flex grid (.row / .col)

col-4
col-4
col-4
<div class="row">
  <div class="col-4">...</div>
  <div class="col-4">...</div>
  <div class="col-4">...</div>
</div>

CSS Grid

1
2
3
<div class="grid grid-cols-3 gap-2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Flexbox: Alignment & Justify

Use .flex-*, .items-*, and .justify-* to control layout.

Center both axes
.flex .items-center .justify-center
Space between horizontally, start vertically
ABC
Column + center
123 
<div class="flex items-center justify-center">...</div>
<div class="flex items-start justify-between">...</div>
<div class="flex-column items-center">...</div>

Grid: Item Placement

Span columns/rows and reorder visually when needed.

1
2 spans 2 cols
3
4 full row
<div class="grid grid-cols-4">
  <div>1</div>
  <div style="grid-column: span 2;">2</div>
  <div>3</div>
  <div style="grid-column: 1 / -1;">4</div>
</div>

Flex vs Grid (Quick Patterns)

Use flex for 1-dimensional alignment; use grid for true 2-D layouts.

Nav bar (Flex)
Logo
LinkLinkLink 
<div class="flex items-center justify-between">...</div>
Card gallery (Grid)
Card
Card
Card
<div class="grid grid-auto-fit-md gap-2">...</div>

Borders, Radius, Shadows

Border widths, corner radii, and shadow levels.

Borders & radius

.border .rounded-sm
.border-2 .rounded-lg
.border-3 .rounded-xl
<div class="border rounded-sm">...</div>
<div class="border-2 rounded-lg">...</div>
<div class="border-3 rounded-xl">...</div>

Card shadows

.card
.card .card-shadow-4
.card .shadow-none
<article class="card">...</article>
<article class="card card-shadow-4">...</article>
<article class="card shadow-none">...</article>

Controls

Shared blueprint, sizes, and variants.

Inputs

<input class="input input-sm" placeholder="Small" />
<input class="input input-md" placeholder="Medium" />
<input class="input input-lg" placeholder="Large" />
<input class="input input-xl" placeholder="XL" />

Buttons

<button class="btn btn-sm btn-primary">Primary</button>
<button class="btn btn-md btn-success">Success</button>
<button class="btn btn-lg btn-outline-danger">Outline Danger</button>
<button class="btn btn-xl btn-ghost-info">Ghost Info</button>
<button class="btn btn-md" disabled>Disabled</button>

Alerts

Contextual feedback banners.

Variants

Base alert
Primary alert
Success alert
Warning alert
Danger alert
Info alert
<div class="alert">Base alert</div>
<div class="alert alert-primary">Primary alert</div>
<div class="alert alert-success">Success alert</div>
<div class="alert alert-warning">Warning alert</div>
<div class="alert alert-danger">Danger alert</div>
<div class="alert alert-info">Info alert</div>

Cards

Surface container with border/shadow variants.

Examples

Default card
Bordered (primary)
Shadow level 4
<article class="card">...</article>
<article class="card card-border-primary">...</article>
<article class="card card-shadow-4">...</article>

Tabs (With Panels)

Each tab points to a content panel by href="#panel-id". The JS shows the matching panel and hides the others.

One Two Three
Content for tab one.
<div class="tabs">
  <a class="tab active" href="#tab-panel-1">One</a>
  <a class="tab" href="#tab-panel-2">Two</a>
  <a class="tab" href="#tab-panel-3">Three</a>
</div>

<div class="stack-2 mt-2">
  <div class="tab-panel card p-2" id="tab-panel-1">Content for tab one.</div>
  <div class="tab-panel card p-2" id="tab-panel-2" hidden>Content for tab two.</div>
  <div class="tab-panel card p-2" id="tab-panel-3" hidden>Content for tab three.</div>
</div>

Modal

Click the button to open a modal. Close it by clicking the overlay or the ✕ button. Works with the class-based JS you added (looks for .modal-open, .modal__overlay, .modal__close). 

<button class="btn btn-md btn-primary modal-open" href="#demoModal">Open demo modal</button>

<div class="modal" id="demoModal" aria-hidden="true" role="dialog" aria-modal="true">
  <div class="modal__overlay"></div>
  <div class="modal__dialog" role="document">
    <div class="modal__header">
      <h3 class="modal__title">Demo modal</h3>
      <button class="modal__close" aria-label="Close">✕</button>
    </div>
    <div>
      <p>Put your content here.</p>
      <div class="flex items-center gap-2">
        <input class="input input-md" placeholder="Your name" />
        <button class="btn btn-md btn-success">Save</button>
      </div>
    </div>
  </div>
</div>

Utilities

Motion, overflow, ratio, cursors & opacity.

Motion & text

.hover-raise
.hover-glow
This is a very long line that will be truncated.
<div class="hover-raise">...</div>
<div class="hover-glow">...</div>
<div class="truncate w-50">Long long text...</div>

Effects, overflow, ratios

.opacity-50
.cursor-not-allowed
.overflow-scroll
Line 2
Line 3
Line 4
.blur-sm
<div class="opacity-50">...</div>
<div class="cursor-not-allowed">...</div>
<div class="overflow-scroll">...</div>
<div class="ratio ratio-16x9"><img class="object-cover" ... /></div>
<div class="ratio ratio-1x1"><img class="object-contain" ... /></div>
<div class="blur-sm">...</div>

JavaScript Helpers (Reference)

Lightweight utilities used across the docs and components. Keep logic simple and colocated. This card describes the functions and expected usage; copy snippets as needed.

HTTP

Post JSON-ish data via FormData to the PHP handler.

_post(formObj, target, func)

Builds a FormData payload and POSTs to /rss/php/handler.php, returning JSON.

// Example
const res = await _post(
  { name: 'Ada', roles: ['admin','editor'] },
  'users',
  'create'
);
// res → parsed JSON (or { ok:false, error:"..." } on failure)
createFormData(data, target, func)

Converts plain objects/arrays into FormData and appends target/function.

// Example
const fd = await createFormData({ tags: ['a','b'], avatar: file }, 'profile', 'update');

DOM

Small helpers to create elements and IDs.

createEl(tag, classArr?, text?, dataAttrs?)

Create an element, add classes, text, and data-* attributes.

// Example
const btn = createEl('button', ['btn','btn-md','btn-primary'], 'Save', { action: 'save' });
document.body.append(btn);
getRandomID()

Generates a unique id (uses crypto.randomUUID() if available).

// Example
const id = getRandomID(); // "c1c0f33a-..." or base36 fallback

Alerts

Create and remove framework-styled alerts using .alert and .alert-{color}.

generateAlert(type, text, options?) → HTMLElement

Types align with your color tokens: primary, success, warning, danger, info, etc. 

// Create and insert
const alertEl = await generateAlert('warning', 'Heads up!', { withClose: true, dismissAfter: 4000 });
document.querySelector('#alertHost').append(alertEl);

// Common types
await generateAlert('success', 'Saved!');
await generateAlert('danger', 'Something went wrong', { role: 'alert' });
removeAlert(scope?)

Remove all alerts in scope (default: document).

// Example
removeAlert(); // or removeAlert(document.querySelector('#alertHost'));