frikwork v0.0.9 style guide

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

h1 — Heading one

h2 — Heading two

h3 — Heading three

h4 — Heading four

h5 — Heading five
h6 — heading six

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

A lead paragraph sets the scene with slightly larger, relaxed type.

Body copy uses inline links, strong emphasis, italics, highlighted text, CSS abbreviations, inline code, Ctrl+K keys, H2O subscripts, x2 superscripts, struck inserted edits, and small print.

Design is not just what it looks like and feels like. Design is how it works. Steve Jobs

Ordered & unordered lists

  • Unordered item one
  • Item two, with a nested list
    • Nested A
    • Nested B
  • Item three
  1. First step
  2. Second step
  3. Third step
function greet(name) {
  return `Hello, ${name}`;  // preformatted block
}

Description list

frikwork
CCM's in-house, dependency-free CSS + JS UI framework.
CDN
Served from frikwork.com on Cloudflare Pages.

Figure

📊
Fig 1. A captioned figure.

Unclassed table (styled variant is .fw-table)

Table 1. Raw <table> with a caption.
ElementTag
Anchor<a>
Blockquote<blockquote>
Definition<dfn>

Native <details>, <progress>, <meter>

Unclassed disclosure

Native <details> without a class.

Buttons

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)

Glass card
Hover + status edge

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

Brand (default)
Success
Warning
Danger

Lively data-fw-motion="lively"

Glass card — lively
Hover + status edge — lively

Stat cards

$0
Revenue
0
Uptime %
42
Servers
30s
Poll

Forms

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

Enter a valid email
https://
Radio group
Toggles & checkboxes

Nav tabs

Overview pane
Activity pane
Settings pane

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

89
Total
55
Online
0
Offline
0
Attention

Dropdown / settings panel

Modal & toast

Confirm action
This is a frikwork modal. Press Escape, click the backdrop, or the × to close.

Badges & severity

Primary Online Warning Danger Critical High Medium Low

Table

ServerStatusLoad
amorphisOnline0.42
sireniaWarn1.87

Accordion

▸ Section one
Native <details> accordion body.
▸ Section two
Second body.

Progress, spinner, tooltip

Hover me

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.

Card 1

Drops in last.

Card 2

Third to land.

Card 3

Second to land.

Card 4

Drops in first.

Extras (opt-in)

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