Page layout

Summary

The page shell: a page-panel with optional navigation, content, and sidebar cells (the same display: table internals as AUI, kept for exact width-computation parity), page width modes, and horizontal grouping utilities.

When to use

Class	Effect
`.neura-page-panel` > `-inner`	The content card below the page header.
`.neura-page-panel-nav`	Left navigation cell (vertical navgroup), fixed 240px wide.
`.neura-page-panel-content`	Main content cell.
`.neura-page-panel-sidebar`	Inline-end sidebar cell. Default width 35% (30% when a nav cell is present); override per page with your own class (see below).
`.neura-page-panel-item`	Generic extra cell (no built-in padding).
`.neura-page-focused[-small\|-medium\|-large\|-xlarge]`	On `<body>`: centered fixed-width page (forms, login). Widths: 400 / 600 / 800 / 980px (980px with no size suffix); the panel renders as a fully-bordered, rounded card.
`.neura-page-fixed`	On `<body>`: fixed-width page; the inner shells center at 980px.
`.neura-page-hybrid`	On `<body>`: full-width panel with its inner shells centered at 980px (fixed header, fluid panel).
`.neura-group` / `.neura-item`	Horizontal grouping; `-split` pushes items apart, `-trio` makes thirds.
`.neura-hidden` / `.neura-assistive` / `.neura-clear`	Utilities: display-none, visually-hidden-but-readable, clearfix.

Examples

Panel with nav + content + sidebar

Content

The main content cell grows to fill available space.

Group / items - evenly spaced

Items distribute evenly by default; give one item a fixed width and the rest share the leftover space. Groups and items are pure layout containers; style the content you put inside them, not the cells:

Evenly spaced item

Split group

Two items pushed apart: the first aligns to the inline start, the second to the inline end.

Split group - first item, aligned to the inline start

Second item, aligned to the inline end

Trio group

Three columns aligned start / center / end:

Trio group - first item, inline start

Middle item, centered

Last item, inline end

Page width modes

The Nsys Portal login page in focused mode, centered at the -small width (400px): heading inside the panel content, full-width fields, and the focused-page divider above the buttons row. On a real page the classes go on <body>; the wrapper below simulates it (the width rules are descendant-scoped, so any subtree works):

Login to Nsys Portal

HTML

Panel with nav + content + sidebar

<div class="neura-page-panel">
  <div class="neura-page-panel-inner">
    <div class="neura-page-panel-nav">
      <nav class="neura-navgroup neura-navgroup-vertical">
        <div class="neura-nav-heading"><strong>Configuration</strong></div>
        <ul class="neura-nav">
          <li class="neura-nav-selected"><a href="#" aria-current="page">General</a></li>
          <li><a href="#">Users</a></li>
          <li><a href="#">System</a></li>
        </ul>
        <div class="neura-nav-heading"><strong>Integrations</strong></div>
        <ul class="neura-nav">
          <li><a href="#">API keys</a></li>
          <li><a href="#">Webhooks</a></li>
        </ul>
      </nav>
    </div>
    <section class="neura-page-panel-content">
      <h3>Content</h3>
      <p>The main content cell grows to fill available space.</p>
    </section>
    <aside class="neura-page-panel-sidebar">
      <p><strong>Sidebar</strong></p>
      <p>Contextual help or metadata.</p>
    </aside>
  </div>
</div>

Custom sidebar width

The sidebar's percentage widths are defaults, not a contract; apps typically pin a fixed width with their own class on the <aside>. Mind the specificity: the built-in .neura-page-panel-nav ~ .neura-page-panel-sidebar sibling rule outranks a bare single-class selector, so restate your width with the element added (works regardless of stylesheet load order):

<aside class="neura-page-panel-sidebar my-sidebar">…</aside>

/* your application stylesheet */
.neura-page-panel-nav ~ aside.my-sidebar,
aside.neura-page-panel-sidebar.my-sidebar {
  width: 340px;
}

Group / items - evenly spaced

The gray bars in the demo are docs-only visualization; items carry no styling of their own.

<div class="neura-group">
  <div class="neura-item">Evenly spaced item</div>
  <div class="neura-item">Evenly spaced item</div>
  <div class="neura-item">Evenly spaced item</div>
  <div class="neura-item">Evenly spaced item</div>
</div>

Split group

<div class="neura-group neura-group-split">
  <div class="neura-item">Split group - first item, aligned to the inline start</div>
  <div class="neura-item">Second item, aligned to the inline end</div>
</div>

Trio group

<div class="neura-group neura-group-trio">
  <div class="neura-item">Trio group - first item, inline start</div>
  <div class="neura-item">Middle item, centered</div>
  <div class="neura-item">Last item, inline end</div>
</div>

Page width modes

Width modes go on <body>. The Nsys Portal login page in focused mode: the panel centers itself at the -small width, and the form's buttons row gets the focused-page divider automatically.

<body class="neura-page-focused neura-page-focused-small">
  <div class="neura-page-panel">
    <div class="neura-page-panel-inner">
      <section class="neura-page-panel-content">
        <header>
          <h1>Login to Nsys Portal</h1>
        </header>
        <form action="/auth/login" method="post" class="neura-form neura-form-top-label">
          <div class="neura-field-group">
            <label for="username">Username</label>
            <input class="neura-field-text neura-field-full" type="text" id="username"
                   name="username" autocomplete="username" autofocus>
          </div>
          <div class="neura-field-group">
            <label for="password">Password</label>
            <input class="neura-field-password neura-field-full" type="password" id="password"
                   name="password" autocomplete="current-password">
          </div>
          <fieldset class="neura-fieldset-group">
            <div class="neura-field-checkbox">
              <input type="checkbox" id="remember" name="remember">
              <label for="remember">Remember me</label>
            </div>
          </fieldset>
          <div class="neura-buttons-container">
            <button type="submit" class="neura-button neura-button-primary">Login</button>
            &nbsp;
            <a href="/auth/forgot-user-password">Forgot your password?</a>
          </div>
        </form>
      </section>
    </div>
  </div>
</body>

AUI compatibility

Full parity: aui-page-panel*, aui-page-focused/fixed/hybrid, and aui-group/item alias onto the Neura rules with AUI's exact table-cell geometry. CSS-only.