111k

Layout Rules

Actual page spacing, content width, card placement, sidebar relationships, and shell rules extracted from the current Topoo documentation system.

Layout rules define where documentation blocks live on the page in the current live shell.

Preview + spec

The documentation shell always reads as one page frame: top navigation across the board, left topic rail, center reading column, and right page TOC rail.

Left topic rail

Active topic

Main reading column

Right page TOC

Helper card

{"topNavigation": "board switcher across the full page width","sidebarWidth": "224px",

Topic pages keep a tall airy shell so the content does not collapse against the header.

Header offset zoneTopic page titleBody content starts hereBottom breathing room before the next section
{"outerPadding": "px-4","topPadding": "pt-10",

Board home pages use overview card grids instead of long list pages.

Board card
Board card
Board card
{"containerSpacing": "mt-6","gridGap": "1rem",

The system uses different shells for overview cards and framework cards. They should not be mixed.

Standard overview card
Framework / installation card
{"overviewCard": "rounded-xl / border / bg-background / p-6 / min-height 132px","frameworkCard": "rounded-xl / bg-surface / p-6 / sm:p-10 / centered content"

The visual language is already established: muted block label, denser topic links, accent highlight on the active page.

Document

Typography

Layout Rules

{"sidebarStickiness": "top: calc(var(--header-height) + 0.6rem)","sidebarWidth": "w-56",

Layout owns

  • shell grid
  • column widths
  • sidebar placement
  • TOC placement
  • card grid spacing
  • preview/code placement

Layout does not own

  • topic naming
  • content semantics
  • typography values
  • schema hierarchy

Those are handled by content model, renderer contract, and typography.