Minimal Template

A compact personal site layout with centered bordered header and footer. Content panels span full width.

Preview

Open in New Tab →

Structure

Header — Centered, bordered container with logo and nav (max-w-4xl)
Content — Full-width area with ip-panel grid
Footer — Centered, bordered container matching header style

Key Characteristics

Header and footer use border border-secondary instead of border-b/border-t
Header and footer constrained with max-w-4xl mx-auto
Page has padding (p-4) instead of edge-to-edge
Content panels span full width for contrast with tight header/footer
Ideal for personal sites, portfolios, and compact applications

Patterns Used

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

Minimal Layout — Centered bordered header/footer pattern
Card Grid — 2-column responsive grid for content panels

Source Code

minimal.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimal Template</title>
    
    <!-- Core CSS -->
    <link rel="stylesheet" href="./css/styles.css">
    <link rel="stylesheet" href="./css/themes/planetary.css" id="theme-css">
    <link rel="stylesheet" href="./css/fonts/terminal.css" id="font-css">
    <script src="./js/theme.js"></script>
</head>
<body class="bg-primary text-secondary font-body text-xs min-h-screen p-4">
    
    <!-- Header -->
    <header class="border border-secondary p-3 max-w-4xl mx-auto">
        <div class="flex items-center justify-between">
            <a href="#" class="font-display text-sm text-accent uppercase">Site Name</a>
            <div class="flex items-center gap-4">
                <nav class="ip-nav-list">
                    <a href="#" class="active">Home</a>
                    <a href="#">Blog</a>
                    <a href="#">Projects</a>
                </nav>
                <button onclick="themeManager.toggle()" class="ip-btn-icon">
                    <span class="ip-btn-icon-content">◐</span>
                </button>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="py-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="ip-panel" data-minimizable>
                <div class="ip-panel-header">
                    <span>About</span>
                    <button class="ip-btn-icon"><span class="ip-btn-icon-content">−</span></button>
                </div>
                <div class="ip-panel-body">
                    <div class="ip-title">About</div>
                    <p class="text-secondary mt-2">Content here...</p>
                </div>
            </div>
            <!-- More panels... -->
        </div>
    </main>

    <!-- Footer -->
    <footer class="border border-secondary p-3 max-w-4xl mx-auto">
        <div class="flex items-center justify-between">
            <div class="font-nav text-xs text-secondary/50 uppercase">© 2025</div>
            <nav class="ip-nav-list">
                <a href="#">Contact</a>
                <a href="#">RSS</a>
            </nav>
        </div>
    </footer>

    <script src="./js/window.js"></script>
</body>
</html>

← All Templates Landing Page →