Typography & base elements

Unclassed HTML looks like frikwork out of the box. Headings carry a proportional vertical rhythm; block content flows with sensible spacing. Every rule here is zero-specificity (:where()), so any .fw-* component or inline style overrides it freely.

Heading scale

Prose — wrap long-form copy in .fw-prose for a readable measure + article rhythm

function greet(name) {
  return `Hello, ${name}`;  // preformatted block
}

Buttons

App shell

.fw-shell is a full-height frame for sidebar apps: the page itself never scrolls, the nav and the content scroll independently. Scroll inside each side below — the long project list can't drag the content off the top. Normally it's 100dvh; here it's capped to 300px so it fits on this page.

Cards

Cards are glass by default. Two variants: plain, and hover + status edge. Add data-fw-motion="lively" to any ancestor and every card inside automatically gains breathe + ring + drop — no extra classes.

Calm (default)

Coloured hover highlight — hover each; the border + glow use the card's status colour

Lively data-fw-motion="lively"

Stat cards

Forms

Full control styling is opt-in via .fw-* classes; native controls keep the brand accent-color. Every input type is covered below.

Searchable select — data-fw-search enhances a native <select>; type to filter big lists (select2-style). AJAX-ready.

Nav tabs

With icons — .fw-tab and .fw-navlink are inline-flex, so an inline <svg> sits beside the label. Give the SVG a width/height (the reset makes bare ones 300×150).

Segmented bar — .fw-tabs--segmented, optional .fw-tab__count; active glows when lively

Card-tabs — .fw-cardtabs / .fw-cardtab; a selector styled as cards, only the active one goes lively

Dropdown / settings panel

Modal & toast

Badges & severity

Alerts — static inline messaging (persistent, unlike toasts); dismissible

Skeleton loading

Avatars

Pagination

Breadcrumb

Steps

1. Account
2. Profile
3. Billing
4. Done

Timeline

• 09:24
  Deploy succeeded
  v0.0.14 shipped to production.
• 09:18
  Build passed
  All checks green.
• 09:02
  Cache purged
• 08:55
  Commit pushed

Chips — removable; the × fires fw:chipremove

Ring progress

Drawer, popover & command palette — focus-trapped overlays

Copy to clipboard bonus

Add data-fw-copy="text" to any element (or data-fw-copy="#selector" data-fw-copy-target to copy another element's text). Fires a toast + fw:copy.

<link rel="stylesheet" href="https://frikwork.com/v0/frikwork.css">
<script src="https://frikwork.com/v0/frikwork.js" defer></script>

Table

Wrap wide tables in .fw-table-wrap so they scroll horizontally on narrow screens instead of overflowing the page.

Sortable columns — add data-fw-sort to the table, then click a header

Column type is auto-detected (numbers, $/%/thousands stripped) or forced per column with data-fw-sort="num|date|text"; data-fw-sort="off" excludes a column, data-fw-sort-init="asc|desc" sorts one on load, and a cell's data-fw-sort-value overrides its text (used on the Deployed dates below). Blank cells always sink to the bottom. Each sort fires fw:sort.

In React, add data-fw-sort-controlled so rows aren't reordered — frikwork still cycles the headers and sets aria-sort; listen for fw:sort and sort your own state: <table class="fw-table" data-fw-sort data-fw-sort-controlled>

Drag to reorder sortable

Add data-fw-sortable to any container to make its direct children reorderable — mouse and touch. A drop that changes the order fires a fw:reorder event. Works on grids and lists.

Sortable cards — drag anywhere on a card

Sortable list with handles — grab the ⠿ handle; the rest of the row stays interactive

Cross-container — give lists the same data-fw-sortable="board"; drag cards between them

Fires fw:reorder with fromContainer / toContainer. In React, add data-fw-sortable-controlled so the DOM reverts on drop and you apply the move from the event in state.

Lightbox images

Add data-fw-lightbox to an image to open it full-screen on click. Give several images the same value to form a gallery with prev/next arrows and ← → keys. Esc or a backdrop click closes it.

Mobile menu drill-down

A right-slide drawer with drill-down panels for multi-level navigation (top → sub → sub-sub → sub-sub-sub). On phones it's the hamburger in the header; the button below opens the same menu at any width so you can try it here. Tap Components → Cards → By region to drill four levels deep, then use ‹ Back or Esc.

Accordion

Progress, spinner, tooltip

Lively motion live sample

This grid is wrapped in data-fw-motion="lively", so its plain .fw-cards automatically drop in — last card first, first card last — then settle into a slow breathing glow with a conic border ring travelling the edge. Hit replay to watch the staggered entrance again. Everything disables under prefers-reduced-motion.

Extras (opt-in)

Load frikwork-extras.js and call frikwork.hero(cardEl, {report:'Up $505'}) for the takeover effect.