Theme:

The Monospace Web Theme

A minimal, character-aligned grid for modern browsers

▶ Click here for the Pandoc-driven example site with GitHub Actions!

Version	v1.1.0	Updated	2025-06-09
Author	Cameron K. Brooks	License	MIT

Show Grid Overlay

Introduction

Monospace fonts offer clarity and a retro aesthetic. This theme enforces a character-aligned grid, perfect for code-style layouts, tables, forms, and ASCII art—all in pure CSS plus a small JS helper.

Switch your OS/browser between light and dark mode to see the inverted colors.

Lists

Unordered list:

Banana
Paper boat
Cucumber
Rocket

Ordered list:

Goals
1. Intrinsic
2. Extrinsic
Second-order Effects

Tree view:

/dev/nvme0n1p2
- usr
  - bin
  - lib
  - games
    - solitaire
    - snake
    - tic-tac-toe
- media
- tmp

Tables

Responsive table:

Name	Dimensions	Location
Boboli Obelisk	1.41m × 1.41m × 4.87m	43°45′50.78″N 11°15′3.34″E
Pyramid of Khafre	215.25m × 215.25m × 136.4m	29°58′34″N 31°07′51″E

Forms

Buttons:

Text inputs:

Radio buttons:

Grids

Note that grids maintain the monospace, so the total width might not be 100%. Six grids with increasing cell count:

If we want one cell to fill the remainder, we set flex-grow: 1; for that particular cell.

Note however that this breaks the monospace alignment, as the grid is not display: grid; but rather display: flex;.

ASCII Drawings

╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │    
    │         │  msg 1  │    
    │         │────────►│    
    │         │         │    
    │  msg 2  │         │    
    │────────►│         │    
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘

Example: Message passing.

Details & Summary

Click to expand

Hidden content inside <details> stays on the grid.

Media

Responsive image example:

Italian Trulli Houses — An image of Trulli Houses (sample)

Responsive video example:

Big Buck Bunny (sample)

Discussion

This demo shows how headings, tables, forms, lists, grids, ASCII art, and media snap to a monospace grid. Toggle “Show Grid Overlay” to verify alignment.