Layout provides the structural foundation for all Alius interfaces. A consistent layout system ensures that content is organized, scannable, and comfortable to navigate across all devices.

Page Structure

The recommended documentation page layout consists of the following regions:

  • Top Navigation: Global navigation bar with logo, primary links, search, version switch, and language switch
  • Left Sidebar: Documentation table of contents organized by section, with collapsible groups
  • Center Content Area: Main content with headings, body text, code blocks, images, and interactive elements
  • Right Page TOC: On-page table of contents showing headings for the current page, enabling quick jumps
  • Bottom Navigation: Previous/next page links for sequential reading through documentation
  • Resource Download Area: Optional section for downloadable files, assets, and related materials

Width Specifications

Page Max-Width

  • Define a maximum page width to prevent content lines from becoming too long on wide screens
  • Content readability degrades when lines exceed a comfortable character count

Content Area Width

  • The center content area should accommodate a comfortable reading width (roughly 60-80 characters per line for body text)
  • Code blocks may extend slightly wider but should remain within the content area bounds
  • Fixed width, collapsible on smaller screens
  • Wide enough to display section titles and page names without excessive truncation

Right TOC Width

  • Fixed width, visible only on screens with sufficient horizontal space
  • Displays heading text with active state indicators

Grid System

  • Use a consistent grid for component alignment
  • Cards, tables, and form layouts should align to grid columns
  • Gutters between grid columns should follow the standard spacing scale

Card Spacing

  • Consistent padding within cards
  • Consistent gap between cards in grid layouts
  • Card content should maintain internal alignment rules

Page Padding

  • Horizontal padding from screen edges to content
  • Vertical padding between major sections
  • Responsive adjustments at breakpoints

Mobile Breakpoints

Define responsive breakpoints for:

  • Mobile: Single-column layout, hamburger menu, collapsed sidebar
  • Tablet: Optional two-column layout, sidebar available as overlay
  • Desktop: Full three-column layout with sidebar, content, and TOC
  • Wide: Max-width constrained, centered on screen

Key principles for responsive behavior:

  • Content readability is the top priority at every breakpoint
  • Navigation must remain accessible on all screen sizes
  • Code blocks should scroll horizontally rather than break layout
  • Tables should either scroll horizontally or transform to card layout on mobile
  • Images should scale proportionally within their container