folio-base

A frontend reference base for portfolio and works-focused projects. Provides a design system (color tokens, typography, dark/light mode) and HTML patterns (sidebar layout, filters, pagination) that can be adapted to any backend — Kirby, headless CMS, static or otherwise. Not a clone-and-deploy template, but a documented starting point to copy from.

Project structure

folio-base/
├── src/
│   └── app.css              ← Tailwind entry, color tokens, form base styles
├── dist/
│   └── app.css              ← compiled CSS (do not edit manually)
├── public/
│   ├── fonts/
│   │   └── KodeMono-VariableFont_wght.ttf
│   └── icons/
│       └── icon.svg         ← app icon (placeholder, replace with PNG for production)
├── patterns/
│   └── works.html           ← works page pattern
├── manifest.json            ← PWA manifest
├── .nvmrc                   ← Node 22 (required for Tailwind v4)
└── package.json

Requirements

Tailwind v4 requires Node >= 20. The correct version is pinned in .nvmrc:

nvm use

Development

npm run dev     # Tailwind watcher + Browser-Sync with auto-reload
npm run build   # one-off build

Browser-Sync opens http://localhost:3000 automatically. The works pattern is at /patterns/works.html.

Using Tailwind in new HTML files

Link the compiled CSS from dist/app.css with a relative path:

<!-- from root -->
<link rel="stylesheet" href="dist/app.css">

<!-- from a subfolder -->
<link rel="stylesheet" href="../dist/app.css">

Tailwind v4 scans all project files automatically — no content array needed in a config file.

Color tokens

All colors are defined as semantic CSS custom properties and available as Tailwind utilities. Light and dark mode follow prefers-color-scheme automatically.

Token	Utility	Usage
--c-canvas	bg-canvas	page background
--c-panel	bg-panel	sidebar, cards, inputs
--c-line	border-line	borders, dividers
--c-ink	text-ink	primary text
--c-ink-muted	text-ink-muted	secondary text (≥ 6:1 contrast)
--c-ink-faint	text-ink-faint	labels, decorative (≥ 4.5:1 contrast)

Edit tokens in src/app.css — the build takes care of the rest.

Typography

Kode Mono (variable font) is used globally as the sole typeface. Weight is controlled with standard Tailwind utilities (font-normal, font-medium, font-semibold, font-bold).

Layout

The works page uses a sidebar layout:

• Desktop — sidebar fixed on the left (w-80), main area scrolls independently
• Mobile — sidebar as overlay, toggled via pure CSS (checkbox hack, no JS)

The sidebar contains navigation, a search field, filters (category, year, tags) and scrolls independently when content overflows.

Note: PWA icon

public/icons/icon.svg is a placeholder. For full compatibility (iOS, older Android) add icon-192.png and icon-512.png and register them in manifest.json.