🎉 WebDocs v2.0 is here — See what's new
v2.0 Released Stable

Build better docs
faster than ever

A complete, accessible, responsive documentation template with dark mode, search, syntax highlighting, and more. Zero dependencies.

Get Started View Components →

Overview

WebDocs is a complete, production-ready documentation website template built with semantic HTML5, CSS custom properties, and vanilla JavaScript. It follows WCAG 2.1 AA accessibility standards, implements a mobile-first responsive design, and ships with a full dark mode system.

Every component adheres to the design principles from the UI/UX Pro Max skill: 44×44px minimum touch targets, 4.5:1 color contrast, keyboard navigation, focus rings, and reduced-motion support.

No build step required

WebDocs is pure HTML, CSS, and JavaScript. Drop the files into any static host (GitHub Pages, Netlify, Vercel, Cloudflare Pages) and you're live immediately.

Key Features

Fully Responsive

Mobile-first breakpoints. Sidebar collapses on small screens with smooth overlay navigation.
Dark Mode

Automatic system detection + manual toggle. Persisted in localStorage. Zero flash on load.
Accessible

WCAG 2.1 AA compliant. Skip links, ARIA labels, keyboard nav, focus rings, reduced motion.
Search

Full-text search modal. Keyboard shortcut ⌘K. Easily extensible with your own index.
Design Tokens

CSS custom properties for every color, spacing, shadow and radius. Theme in one place.
Fast

No JavaScript frameworks. No runtime CSS. PageSpeed 100. CLS < 0.1 guaranteed.

Quick Start

Get your documentation site running in minutes:

Download or clone the template
Get the source files from GitHub or download the ZIP from this page.
Customize your content
Edit the HTML pages, update the sidebar links, and replace the placeholder text with your docs.
Adjust the design tokens
Change --color-accent, fonts, and spacing in css/style.css to match your brand.
Deploy
Push to GitHub and enable GitHub Pages, or drag the folder to Netlify. Done!

Installation via Git

bash 
# Clone the repository
git clone https://github.com/your/webdocs.git

# Enter the directory
cd webdocs

# Open in your browser (no build needed!)
open index.html

Basic Usage

Each page follows the same structure. Copy any .html file and update the content:

html 
<html lang="en" data-theme="light">
  <body>
    <!-- Header, Sidebar, Main -->
    <main id="main-content">
      <div class="content">
        <h1 class="page-title">Your Page Title</h1>
        <p>Your content here.</p>
      </div>
    </main>
  </body>
</html>
css 
/* Change brand color */
:root {
  --color-accent: #6366f1;  /* Indigo */
  --color-accent-hover: #4f46e5;
  --font-sans: 'Inter', system-ui;
}

/* Dark mode overrides automatically */
[data-theme="dark"] {
  --color-bg: #0f172a;
}
javascript 
// All JS is in js/main.js — no framework needed
// Extend Search with your own data:
Search.data = [
  {
    title: 'My Page',
    desc: 'Description here',
    href: 'my-page.html'
  }
];

Components at a Glance

Callouts

Success

Operation completed successfully. Your changes have been saved.

Warning

This feature is experimental. Behavior may change in future releases.

Danger

This action is irreversible. Proceed with caution.

Badges

Default Accent Success Warning Danger

Table

Property Type Default Description
theme string "light" Initial color theme
sidebarWidth number 280 Sidebar width in pixels
searchEnabled boolean true Enable search modal
tocEnabled boolean true Show table of contents on large screens

Next Steps

Ready to dive deeper? Explore these sections:

Quick Start

Set up in 5 minutes
Components

Full component library
API Docs

All options & methods