Skip to main content
Quick Start

Documentation

Layouts

Build app shells without Sass or build tooling.

Licences

Layouts

Athena layouts use one page shell, one content container, and explicit row helpers so cards line up across rows and do not drift between dashboard sections.

Grid Rules

  • Use .athena-row with .athena-row-2, .athena-row-3, .athena-row-4, or .athena-row-5 for equal columns.
  • Use .athena-col-full for a full-width item inside an Athena row.
  • Use Bootstrap .row and .col-* classes when a page needs standard Bootstrap behaviour.
  • Keep large boards to two or three columns unless the content remains readable at the current breakpoint.

Sidebar Sections

Navigation headings are buttons that disclose the links beneath them. The dashboard examples, app links, component library, and resource links can all be shown or hidden without leaving the page.

Responsive Behaviour

The sidebar collapses below desktop width, section groups remain keyboard reachable, grids reduce column count at defined breakpoints, and wide heatmaps or tables stay contained rather than forcing page-level horizontal scroll.