Documentation Template

A content-focused template with left sidebar navigation, article content, and right table of contents. Ideal for docs sites, wikis, and knowledge bases.

Preview

Open in New Tab →

Structure

Left Sidebar — Logo, section nav, nav groups (sticky on desktop)
Header — Mobile menu, breadcrumbs, theme toggle (sticky)
Article — Title, sections with headings, code blocks, cards
Right Sidebar — Table of contents (hidden on smaller screens)
Pagination — Previous/next article navigation

Key Patterns

Three-Column Layout

<div class="flex min-h-screen">
    <aside class="hidden lg:flex w-56 shrink-0 border-r sticky top-0 h-screen">
        <!-- Left nav -->
    </aside>
    <div class="flex-1 flex flex-col">
        <header class="sticky top-0 bg-primary z-10">...</header>
        <div class="flex flex-1">
            <main class="flex-1 p-6 max-w-4xl">...</main>
            <aside class="hidden xl:block w-48 shrink-0 border-l sticky top-16">
                <!-- Right TOC -->
            </aside>
        </div>
    </div>
</div>

Article Sections

<section id="overview" class="space-y-3">
    <h2 class="text-base text-accent border-b border-secondary/30 pb-2">Overview</h2>
    <p class="text-secondary">...</p>
    <div class="ip-alert ip-alert-info">Note...</div>
</section>

Patterns Used

This template uses the following patterns from the Layouts & Patterns documentation:

Sidebar Layout — Fixed left navigation with main content area

Theme Switcher

This template includes the theme switcher component for real-time theme, font, and mode changes. Theme preferences persist across page navigations via localStorage.

<!-- Include theme switcher in head -->
<link rel="stylesheet" href="/path/to/themes/planetary.css" id="theme-css">
<link rel="stylesheet" href="/path/to/fonts/terminal.css" id="font-css">
<script src="/path/to/theme.js"></script>
<script src="/path/to/theme-switcher.js" data-theme-base="/path/to/css"></script>

<!-- Add container in header -->
<div id="theme-switcher-container"></div>

<!-- Initialize on DOMContentLoaded -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    themeSwitcher.createSwitcher('#theme-switcher-container');
});
</script>

Source Code

docs.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documentation — Interplanetary UI</title>
    
    <link rel="stylesheet" href="../interplanetary-ui/css/themes/planetary.css" id="theme-css">
    <link rel="stylesheet" href="../interplanetary-ui/css/fonts/terminal.css" id="font-css">
    <link rel="stylesheet" href="./css/styles.css">
    
    <script src="../interplanetary-ui/js/theme.js"></script>
    <script src="../interplanetary-ui/js/theme-switcher.js" data-theme-base="../interplanetary-ui/css"></script>
</head>
<body class="bg-primary text-secondary font-body text-xs min-h-screen">
    
    <div class="flex min-h-screen">
        
        <!-- Left Sidebar -->
        <aside class="hidden lg:flex w-56 shrink-0 border-r border-secondary flex-col sticky top-0 h-screen">
            <div class="p-4 border-b border-secondary">
                <a href="#" class="font-display text-sm text-accent uppercase">Docs</a>
            </div>
            <nav class="flex-1 p-3 space-y-4 overflow-y-auto">
                <div class="space-y-1">
                    <a href="#" class="block py-1 font-nav text-xs uppercase text-accent">Introduction</a>
                    <a href="#" class="block py-1 font-nav text-xs uppercase hover:text-accent">Installation</a>
                </div>
                <div class="ip-nav-group">
                    <div class="ip-nav-group-label">Components</div>
                    <div class="ip-nav-list-vertical">
                        <a href="#">Buttons</a>
                        <a href="#">Forms</a>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col min-h-screen">
            
            <!-- Header -->
            <header class="border-b border-secondary px-4 py-3 sticky top-0 bg-primary z-10">
                <div class="flex items-center justify-between">
                    <nav class="ip-breadcrumbs">
                        <a href="#">Docs</a>
                        <span class="ip-breadcrumbs-separator">/</span>
                        <span class="ip-breadcrumbs-current">Introduction</span>
                    </nav>
                    <div id="theme-switcher-container"></div>
                </div>
            </header>

            <!-- Content Area -->
            <div class="flex flex-1">
                
                <!-- Article -->
                <main class="flex-1 p-6 max-w-4xl">
                    <article class="space-y-6">
                        <h1 class="font-display text-lg text-accent uppercase">Introduction</h1>
                        
                        <section id="overview" class="space-y-3">
                            <h2 class="text-base text-accent border-b border-secondary/30 pb-2">Overview</h2>
                            <p class="text-secondary">Content here...</p>
                        </section>
                    </article>
                    
                    <div class="border-t border-secondary mt-8 pt-6 flex justify-between">
                        <div></div>
                        <a href="#" class="ip-btn">Next: Installation →</a>
                    </div>
                </main>

                <!-- Right Sidebar (TOC) -->
                <aside class="hidden xl:block w-48 shrink-0 border-l border-secondary p-4 sticky top-16 h-[calc(100vh-4rem)]">
                    <div class="font-nav text-xs uppercase text-secondary/50">On This Page</div>
                    <nav class="space-y-1 mt-2">
                        <a href="#overview" class="block py-0.5 text-xs hover:text-accent">Overview</a>
                    </nav>
                </aside>

            </div>
        </div>
    </div>

    <script src="../interplanetary-ui/js/window.js"></script>
    <script src="../interplanetary-ui/js/actions.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        themeSwitcher.createSwitcher('#theme-switcher-container');
    });
    </script>

</body>
</html>

← Dashboard Blog →