Getting started
frikwork is one stylesheet and one script. There
is no build step and nothing to install — drop two tags into your <head> and every
.fw-* class is available.
1 · Add the two tags
<link rel="stylesheet" href="https://frikwork.com/v0/frikwork.css">
<script src="https://frikwork.com/v0/frikwork.js" defer></script>2 · Kill the theme flash (recommended)
Apply the saved or system theme before first paint, so a returning dark-mode user never sees a white flash:
<script>
(function () {
var saved = null;
try { saved = localStorage.getItem('fw-theme'); } catch (e) {}
var theme = saved || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
document.documentElement.setAttribute('data-fw-theme', theme);
})();
</script>3 · Optional extras
- Add
data-fw-motion="lively"to<html>for the showpiece animations. - Load
<script src="https://frikwork.com/v0/frikwork-extras.js" defer></script>for the hero takeover. - Wrap the page in
class="fw-page"with a trailing.fw-footerfor a sticky footer.
Theming
frikwork is dark-first with a complete light theme. The theme is controlled by
data-fw-theme on the <html> element.
| Value | Result |
|---|---|
data-fw-theme="dark" | Explicit dark (default). |
data-fw-theme="light" | Explicit light. |
| (absent) | Follows the OS prefers-color-scheme. |
The built-in toggle button flips the theme and persists the choice
to localStorage['fw-theme']:
<button class="fw-icon-btn" data-fw-toggle="theme">◐</button>Design tokens
Everything is driven by --fw-* CSS custom properties on :root. Override any of
them in your own stylesheet to re-skin frikwork — no recompile needed.
| Group | Examples |
|---|---|
| Brand | --fw-brand, --fw-brand-text, --fw-brand-2 |
| Surfaces | --fw-bg, --fw-bg-card, --fw-bg-hover, --fw-border |
| Text | --fw-text, --fw-text-2, --fw-text-muted |
| Glass | --fw-glass-bg, --fw-glass-border, --fw-glass-shadow |
| Status | --fw-success, --fw-warning, --fw-danger, --fw-info |
| Spacing | --fw-space-xs … --fw-space-xl |
| Radii | --fw-radius-sm … --fw-radius-xl, --fw-radius-pill |
| Shadows | --fw-shadow-sm/md/lg, --fw-shadow-glass, --fw-shadow-glow |
| Motion | --fw-dur, --fw-ease-settle, --fw-ease-pop |
:root {
--fw-brand: #7c3aed; /* re-skin to purple */
--fw-radius-lg: 1rem; /* rounder cards */
}Motion
The lively tier is opt-in. Add data-fw-motion="lively" to
<html> (site-wide) or to any container (scoped). Cards inside then breathe, gain a
travelling border ring, and — with data-fw-entrance — drop in on a staggered, last-to-first
timeline.
<div class="fw-grid fw-grid--cols-4" data-fw-motion="lively" data-fw-entrance>
<div class="fw-card">…</div>
</div>- Toggle it live with
data-fw-toggle="motion". - All motion is disabled automatically under
prefers-reduced-motion. - Don't want any of it in the bundle? Ship
frikwork-core.css— identical, minus the lively tier.
Layout
| Class | Purpose |
|---|---|
.fw-container | Centered max-width page gutter. |
.fw-grid + --cols-2/3/4 | Responsive equal-column grid (collapses on small screens). |
.fw-stack / --lg | Vertical flex stack with a consistent gap. |
.fw-page + .fw-footer | Full-height column so the footer sticks to the bottom on short pages. |
Responsive Grids collapse to fewer columns at 1000px and to a single column at 640px, the header nav stacks on phones, and grid/stack children are overflow-guarded so long content scrolls instead of breaking the layout.
Components
Every component below has a live example on the demo page. Class names follow a
.fw-block / .fw-block__element / .fw-block--modifier convention.
| Component | Key classes |
|---|---|
| Buttons | .fw-btn, --primary/secondary/outline/ghost/danger/warning, --sm/lg/block, .fw-icon-btn |
| Cards | .fw-card, --solid/hover, --success/warning/danger/info, .fw-stat-card |
| Forms | .fw-field, .fw-input, .fw-select, .fw-textarea, .fw-radio, .fw-switch, .fw-range, .fw-file, .fw-fieldset |
| Tabs | .fw-tabs, --underline/segmented, .fw-cardtabs |
| Overlays | .fw-modal, .fw-drawer (off-canvas), .fw-popover, .fw-command (⌘K palette), .fw-dropdown, .fw-toast, .fw-tooltip — all focus-trapped |
| Navigation | .fw-breadcrumb, .fw-steps / .fw-step (stepper), .fw-pagination |
| Display | .fw-timeline, .fw-chip (removable), .fw-ring (radial progress) |
| Data | .fw-table (+ .fw-table-wrap), .fw-badge, .fw-sev--*, .fw-meter, .fw-accordion, .fw-spinner, .fw-pagination |
| Feedback | .fw-alert (+ --info/success/warning/danger, dismissible), .fw-toast, .fw-skeleton (loading), .fw-empty |
| Media | .fw-avatar (+ --sm/lg/brand, data-fw-status, .fw-avatar-group) |
| Utilities | .fw-sr-only, .fw-hide-mobile, .fw-show-mobile |
| Sortable | data-fw-sortable (+ shared value = cross-container), .fw-drag-handle, data-fw-sortable-controlled |
| Lightbox | data-fw-lightbox (click an image to view full-screen; shared value = gallery) |
| Mobile menu | data-fw-toggle="menu" + .fw-menu (right-slide drawer, drill-down panels), .fw-menu-trigger |
| Chrome | .fw-header, .fw-navlink, .fw-footer |
JavaScript API
frikwork.js exposes a single global, window.frikwork. Most behaviour is wired declaratively
with data-* attributes, so you rarely need to call methods directly.
Declarative attributes
| Attribute | Effect |
|---|---|
data-fw-toggle="theme|motion|fullscreen|modal|dropdown" | Wire a control to a built-in action. |
data-fw-target="id" / data-fw-dismiss | Target / close a modal. |
data-fw-tabs / data-fw-tab="id" | Tab group and its triggers. |
data-fw-countup="1250" / data-fw-format="currency" | Animated number that counts up on load. |
data-fw-tooltip="text" | Cursor-following tooltip. |
data-fw-sortable | Drag-to-reorder children; a shared value drags between containers. Fires fw:reorder {from,to,fromContainer,toContainer,group}. Add data-fw-sortable-controlled so it reverts the DOM on drop (React owns state). |
data-fw-lightbox | Click an image to view it full-screen; a shared value groups images into a gallery. |
data-fw-toggle="menu" + data-fw-target | Open a .fw-menu drawer. Nested <ul class="fw-menu__list"> become drill-down panels. |
data-fw-toggle="drawer|popover|command" + data-fw-target | Open a drawer, popover (see data-fw-placement) or command palette (see data-fw-hotkey for ⌘K). |
data-fw-copy="text" / data-fw-copy="#sel" data-fw-copy-target | Copy text (or a target element's text) to the clipboard; toasts and fires fw:copy. |
Methods
| Call | Does |
|---|---|
frikwork.toast(msg, { type }) | Show a toast (success/danger/warning/info). |
frikwork.theme.set('light') | Set + persist the theme. |
frikwork.modal.open(id) / .close() | Control modals programmatically. |
frikwork.countup(el) | Animate a single counter. |
frikwork.hero(card, { report }) | Hero takeover (needs frikwork-extras.js). |
Versioning & CDN
frikwork is served from Cloudflare Pages at frikwork.com. Choose a rolling path for always-latest, or pin an exact version for reproducible builds.
| URL | Cache | Use when |
|---|---|---|
/v0/frikwork.css | 5 min, rolling | You want automatic patch updates within 0.x. |
/0.0.14/frikwork.css | 1 year, immutable | You need a reproducible, pinned build. |
/v0/frikwork-core.css | rolling | Full bundle minus the lively motion tier. |
/v0/frikwork-extras.js | rolling | Opt-in hero takeover effect. |
Tip Pin an exact
version in production and bump it deliberately; use /v0/ in prototypes.