Structural Governance: Orchestrating Macro Layouts

In the Espalier system, the page is not a blank canvas; it is a governed environment. We utilize the Orchestrator Pattern to centralize structural state, ensuring that the foundational page regions—headers, sidebars, and content wells—remain stable regardless of the data they contain.

The primary tool for this governance is the esp-page component. It serves as our Digital Trellis, providing the rigid CSS Grid skeleton that prunes away redundant wrapper elements and "tag soup."

The Grid Skeleton: Named Lines

We reject the overhead of a generic 12-column grid. Instead, Espalier's macro structure is built on a specialized Three-Column Grid with named lines. This allows components to "break out" of the content well or align to specific gutters with extreme precision.

/* The esp-page skeletal logic */
.trellis {
  display: grid;
  grid-template-columns: 
    [full-start] minmax(var(--esp-size-padding-page), 1fr) 
    [main-start] minmax(0, var(--page-max-width)) 
    [main-end] minmax(var(--esp-size-padding-page), 1fr) 
    [full-end];
}

By using these named lines, children can be positioned semantically:

• grid-column: main: Keeps content in the central, readable well.
• grid-column: full: Allows immersive elements (like hero images) to span the entire viewport.

Composition via Intentional Slots

esp-page uses Named Slots to achieve "thoughtful freedom." It protects the external layout and spacing while allowing the internal content to be shaped by the product team.

The Three Page "Kinds"

The orchestrator enforces specific max-width constraints based on the kind attribute, matching the layout to the user's cognitive task:

1. Wide (Default): Sets --page-max-width to $1536\text{px}$ . Optimized for high-density enterprise dashboards and complex data grids.
2. Narrow: Sets --page-max-width to $768\text{px}$ . Optimized for reading, ensuring the 66ch Measure is never exceeded.
3. Full: Sets the grid to $100\mathrm{\%}$ width. Designed for immersive canvases like maps or design tools.

Challenge the Assumption: "Columns are the Standard"

A common assumption in web development is that all layouts should be based on a fixed 12-column system. We challenge this. Fixed columns are a print-era relic that creates unnecessary complexity in a fluid medium.

For a defensible architecture, stop thinking about Columns and start thinking about Content Wells and Named Areas.

Strategic Implementation in Lit

Our layout components use the ::slotted() pseudo-element to enforce the trellis's rules on any content provided by the consumer.

/**
 * esp-page: The Central Orchestrator
 * @slot header - Content for the top navigation bar.
 * @slot sidebar - Content for the left navigation drawer.
 */
@customElement('esp-page')
export class EspalierPage extends LitElement {
  static styles = css`
    :host { display: block; }
    ::slotted([slot="header"]) { grid-column: full; }
    ::slotted([slot="sidebar"]) { grid-column: full-start / main-start; }
  .content-well { grid-column: main; }
  `;
}