Home / Business Ready Pages / Docs Site

Docs Site CSS Template, Free with Live Demo

Free documentation site template for an API. Sidebar filter, code blocks with copy buttons, callouts, an options table and an on this page menu. Live demo. The example is Quarry, an API documentation site.

Open live demo Download HTML file View code on GitHub

Docs Site CSS template example: Quarry, an API documentation site

What is docs site?

A docs site needs to be easy to scan and easy to trust. A sidebar to find pages, a readable column in the middle, and an on this page menu on the right, like the docs of Stripe or Vercel.

Code blocks have a language label and a copy button. Tips sit in a colored callout, options are in a table, and the sidebar filter hides pages as you type.

Good for

API and developer docs
Product help centers
Open source project docs
Internal team wikis

What you get in this template

Three column layout with sticky sidebars
Sidebar filter that hides pages as you type
Code blocks with language label and copy button
Tip callout and options table
Previous and next page links

The key CSS

This is the part that makes the docs site look work. Copy it into your own project.

.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr) 200px; }
aside.nav { position: sticky; top: 53px; height: calc(100vh - 53px); overflow-y: auto; }
.cb pre { background: #0f1420; color: #e6e9f0; border-radius: 10px; padding: 32px 16px 16px; overflow-x: auto; }
.cb pre code { background: none; padding: 0; }
.note { background: #eef6ff; border-left: 4px solid #0b6bcb; }

How to use it

Click Download HTML file above.
Open the file in any code editor, like VS Code.
Change the text, colors and links to match your project. Colors are at the top of the style tag.
Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.