documentation docs sidebar toc code-blocks developer technical minimal
Documentation
Clean documentation page with sidebar navigation, content area, and table of contents.
minimal Responsive
Live Preview
Sections
navbarsidebarbreadcrumbcontentcode-blockscalloutsnext-prevtoc
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documentation — Getting Started</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
body { font-family: 'Inter', sans-serif; }
code, pre { font-family: 'JetBrains Mono', monospace; }
/* Brand tokens — neutral blue docs identity */
:root {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-primary-soft: #eff6ff;
--color-primary-text: #ffffff;
}
.sidebar-link.active {
color: var(--color-primary);
background-color: var(--color-primary-soft);
border-left-color: var(--color-primary);
}
.toc-link.active {
color: var(--color-primary);
border-left-color: var(--color-primary);
}
/* interactions/scrollbar — sidebar + toc */
.custom-scrollbar {
--scrollbar-width: 0.5rem;
--scrollbar-track: oklch(0.95 0 0);
--scrollbar-thumb: oklch(0.75 0 0);
--scrollbar-thumb-hover: oklch(0.55 0 0);
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.custom-scrollbar::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); }
.custom-scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
/* interactions/hover-lift — next-step cards */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
</style>
</head>
<body class="bg-white text-slate-900 antialiased">
<!-- Top Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-white border-b border-slate-200" aria-label="Main navigation">
<div class="max-w-[90rem] mx-auto flex items-center justify-between px-4 sm:px-6 py-3">
<div class="flex items-center gap-6">
<a href="#" class="flex items-center gap-2 text-lg font-bold">
<div class="w-7 h-7 rounded-lg flex items-center justify-center" style="background-color: var(--color-primary);">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
</div>
Acme Docs
</a>
<span class="hidden sm:inline text-xs font-medium px-2 py-0.5 rounded" style="background-color: var(--color-primary-soft); color: var(--color-primary);">v2.4.0</span>
</div>
<div class="hidden md:flex flex-1 max-w-sm mx-8">
<label for="search" class="sr-only">Search documentation</label>
<div class="relative w-full">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input id="search" type="search" placeholder="Search docs..." class="w-full pl-10 pr-4 py-2 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent" style="--tw-ring-color: var(--color-primary);" />
<kbd class="absolute right-3 top-1/2 -translate-y-1/2 hidden sm:inline text-[10px] font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded px-1.5 py-0.5">Ctrl K</kbd>
</div>
</div>
<div class="flex items-center gap-4">
<a href="#" class="text-sm text-slate-600 hover:text-slate-900 hidden sm:block">GitHub</a>
<a href="#" class="text-sm text-slate-600 hover:text-slate-900 hidden sm:block">API</a>
<button class="md:hidden p-2 text-slate-600" aria-label="Toggle sidebar">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
</div>
</nav>
<!-- 3-Column Layout -->
<div class="max-w-[90rem] mx-auto flex">
<!-- Sidebar -->
<aside class="ws-sidebar hidden lg:block w-64 shrink-0 border-r border-slate-100 sticky top-[53px] h-[calc(100vh-53px)] overflow-y-auto custom-scrollbar py-8 px-4" aria-label="Documentation navigation">
<nav>
<!-- Section 1 -->
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3 px-3">Getting Started</h3>
<ul class="space-y-0.5 mb-6">
<li><a href="#" class="sidebar-link active block text-sm px-3 py-1.5 rounded-md border-l-2 border-transparent">Introduction</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Installation</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Quick Start</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Project Structure</a></li>
</ul>
<!-- Section 2 -->
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3 px-3">Core Concepts</h3>
<ul class="space-y-0.5 mb-6">
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Configuration</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Routing</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Data Fetching</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Authentication</a></li>
</ul>
<!-- Section 3 -->
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3 px-3">Components</h3>
<ul class="space-y-0.5 mb-6">
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Button</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Card</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Modal</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Table</a></li>
</ul>
<!-- Section 4 -->
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3 px-3">API Reference</h3>
<ul class="space-y-0.5 mb-6">
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">REST API</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">GraphQL</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Webhooks</a></li>
</ul>
<!-- Section 5 -->
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3 px-3">Deployment</h3>
<ul class="space-y-0.5">
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Vercel</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Docker</a></li>
<li><a href="#" class="sidebar-link block text-sm px-3 py-1.5 text-slate-600 hover:text-slate-900 rounded-md border-l-2 border-transparent hover:bg-slate-50">Self-Hosted</a></li>
</ul>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 min-w-0 px-6 sm:px-10 py-10 max-w-3xl">
<!-- Breadcrumb -->
<nav class="ws-breadcrumb flex items-center gap-2 text-sm text-slate-400 mb-8" aria-label="Breadcrumb">
<a href="#" class="hover:text-slate-600">Docs</a>
<span>/</span>
<a href="#" class="hover:text-slate-600">Getting Started</a>
<span>/</span>
<span class="text-slate-700">Introduction</span>
</nav>
<h1 id="introduction" class="text-3xl sm:text-4xl font-bold mb-4">Getting Started</h1>
<p class="text-slate-500 text-lg mb-10 leading-relaxed">Learn how to install, configure, and build your first project with Acme in under 5 minutes.</p>
<!-- Callout -->
<div class="ws-callout rounded-xl p-4 mb-10" style="background-color: var(--color-primary-soft); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);">
<div class="flex gap-3">
<svg class="w-5 h-5 shrink-0 mt-0.5" style="color: var(--color-primary);" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
<div>
<p class="text-sm font-semibold mb-1" style="color: color-mix(in srgb, var(--color-primary) 80%, #000);">Prerequisites</p>
<p class="text-sm" style="color: color-mix(in srgb, var(--color-primary) 60%, #334155);">You need Node.js 18+ and npm 9+ installed. We recommend using <a href="#" class="underline">nvm</a> to manage Node versions.</p>
</div>
</div>
</div>
<h2 id="installation" class="text-2xl font-bold mb-4 mt-12">Installation</h2>
<p class="text-slate-600 leading-relaxed mb-6">Install Acme globally using your preferred package manager:</p>
<!-- Code block -->
<div class="ws-code-preview bg-slate-950 rounded-xl overflow-hidden mb-6">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900 border-b border-slate-800">
<span class="text-slate-400 text-xs">Terminal</span>
<button class="text-slate-400 hover:text-white text-xs transition-colors">Copy</button>
</div>
<pre class="p-4 text-sm text-slate-300 overflow-x-auto"><code>npm install -g @acme/cli
# Or with pnpm
pnpm add -g @acme/cli
# Or with yarn
yarn global add @acme/cli</code></pre>
</div>
<h2 id="create-project" class="text-2xl font-bold mb-4 mt-12">Create a New Project</h2>
<p class="text-slate-600 leading-relaxed mb-6">Once installed, create a new project using the <code class="text-sm bg-slate-100 px-1.5 py-0.5 rounded">init</code> command:</p>
<div class="ws-code-preview bg-slate-950 rounded-xl overflow-hidden mb-6">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900 border-b border-slate-800">
<span class="text-slate-400 text-xs">Terminal</span>
<button class="text-slate-400 hover:text-white text-xs transition-colors">Copy</button>
</div>
<pre class="p-4 text-sm text-slate-300 overflow-x-auto"><code>acme init my-project
cd my-project
npm install
npm run dev</code></pre>
</div>
<p class="text-slate-600 leading-relaxed mb-6">This will scaffold a new project with the following structure:</p>
<div class="ws-code-preview bg-slate-950 rounded-xl overflow-hidden mb-6">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900 border-b border-slate-800">
<span class="text-slate-400 text-xs">Project Structure</span>
</div>
<pre class="p-4 text-sm text-slate-300 overflow-x-auto"><code>my-project/
├── src/
│ ├── pages/
│ │ └── index.tsx
│ ├── components/
│ │ └── Layout.tsx
│ └── styles/
│ └── globals.css
├── public/
├── acme.config.ts
├── package.json
└── tsconfig.json</code></pre>
</div>
<h2 id="configuration" class="text-2xl font-bold mb-4 mt-12">Configuration</h2>
<p class="text-slate-600 leading-relaxed mb-6">The <code class="text-sm bg-slate-100 px-1.5 py-0.5 rounded">acme.config.ts</code> file at your project root controls all framework behavior:</p>
<div class="ws-code-preview bg-slate-950 rounded-xl overflow-hidden mb-6">
<div class="flex items-center justify-between px-4 py-2 bg-slate-900 border-b border-slate-800">
<span class="text-slate-400 text-xs">acme.config.ts</span>
<button class="text-slate-400 hover:text-white text-xs transition-colors">Copy</button>
</div>
<pre class="p-4 text-sm text-slate-300 overflow-x-auto"><code>import { defineConfig } from '@acme/core';
export default defineConfig({
// Site metadata
site: {
title: 'My Project',
description: 'Built with Acme',
url: 'https://example.com',
},
// Enable features
features: {
typescript: true,
analytics: false,
imageOptimization: true,
},
// Build options
build: {
output: 'dist',
minify: true,
},
});</code></pre>
</div>
<!-- Warning callout -->
<div class="ws-callout bg-amber-50 border border-amber-200 rounded-xl p-4 mb-10">
<div class="flex gap-3">
<svg class="w-5 h-5 text-amber-600 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
<div>
<p class="text-amber-800 text-sm font-semibold mb-1">Breaking Change in v2.4</p>
<p class="text-amber-700 text-sm">The <code class="bg-amber-100 px-1 rounded">output</code> option has moved from the top level to <code class="bg-amber-100 px-1 rounded">build.output</code>. See the <a href="#" class="underline">migration guide</a>.</p>
</div>
</div>
</div>
<h2 id="next-steps" class="text-2xl font-bold mb-4 mt-12">Next Steps</h2>
<p class="text-slate-600 leading-relaxed mb-6">Now that you have a project running, explore these guides to learn more:</p>
<div class="grid sm:grid-cols-2 gap-4 mb-12">
<a href="#" class="hover-lift group p-5 border border-slate-200 rounded-xl transition-all" onmouseover="this.style.borderColor='color-mix(in srgb, var(--color-primary) 40%, transparent)'" onmouseout="this.style.borderColor=''">
<h3 class="font-semibold mb-1 group-hover:text-blue-600" style="">Routing →</h3>
<p class="text-slate-500 text-sm">Learn about file-based routing and dynamic segments.</p>
</a>
<a href="#" class="hover-lift group p-5 border border-slate-200 rounded-xl transition-all" onmouseover="this.style.borderColor='color-mix(in srgb, var(--color-primary) 40%, transparent)'" onmouseout="this.style.borderColor=''">
<h3 class="font-semibold mb-1 group-hover:text-blue-600">Data Fetching →</h3>
<p class="text-slate-500 text-sm">Server-side and client-side data loading patterns.</p>
</a>
<a href="#" class="hover-lift group p-5 border border-slate-200 rounded-xl transition-all" onmouseover="this.style.borderColor='color-mix(in srgb, var(--color-primary) 40%, transparent)'" onmouseout="this.style.borderColor=''">
<h3 class="font-semibold mb-1 group-hover:text-blue-600">Components →</h3>
<p class="text-slate-500 text-sm">Pre-built, accessible components ready to use.</p>
</a>
<a href="#" class="hover-lift group p-5 border border-slate-200 rounded-xl transition-all" onmouseover="this.style.borderColor='color-mix(in srgb, var(--color-primary) 40%, transparent)'" onmouseout="this.style.borderColor=''">
<h3 class="font-semibold mb-1 group-hover:text-blue-600">Deployment →</h3>
<p class="text-slate-500 text-sm">Deploy to Vercel, Docker, or your own server.</p>
</a>
</div>
<!-- Prev / Next navigation -->
<div class="flex items-center justify-between border-t border-slate-200 pt-8">
<div></div>
<a href="#" class="group flex items-center gap-2 text-sm font-medium transition-colors" style="color: var(--color-primary);" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
Installation
<svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
</main>
<!-- Table of Contents -->
<aside class="hidden xl:block w-56 shrink-0 sticky top-[53px] h-[calc(100vh-53px)] overflow-y-auto custom-scrollbar py-10 pr-4" aria-label="Table of contents">
<h3 class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">On This Page</h3>
<nav>
<ul class="space-y-2">
<li><a href="#introduction" class="toc-link active block text-sm pl-3 py-0.5 border-l-2 border-transparent" style="color: var(--color-primary);">Introduction</a></li>
<li><a href="#installation" class="toc-link block text-sm pl-3 py-0.5 border-l-2 border-transparent text-slate-500 hover:text-slate-700">Installation</a></li>
<li><a href="#create-project" class="toc-link block text-sm pl-3 py-0.5 border-l-2 border-transparent text-slate-500 hover:text-slate-700">Create a New Project</a></li>
<li><a href="#configuration" class="toc-link block text-sm pl-3 py-0.5 border-l-2 border-transparent text-slate-500 hover:text-slate-700">Configuration</a></li>
<li><a href="#next-steps" class="toc-link block text-sm pl-3 py-0.5 border-l-2 border-transparent text-slate-500 hover:text-slate-700">Next Steps</a></li>
</ul>
</nav>
<div class="mt-8 pt-6 border-t border-slate-100">
<a href="#" class="text-xs text-slate-400 hover:text-slate-600 transition-colors">Edit this page on GitHub</a>
</div>
</aside>
</div>
</body>
</html>
Clean, three-column documentation layout inspired by modern developer docs. Features a sidebar with 5 navigation sections, main content area with code blocks, info/warning callouts, a table of contents sidebar, breadcrumb navigation, and prev/next page links.