The Digital Trellis: Layout Governance
The word Espalier refers to the horticultural practice of training woody plants to grow in two-dimensional planes against a supportive structure. In our design system, layout is the Trellis. It provides the rigid foundation and spatial constraints that allow our components (the vines) to grow predictably across the infinite variety of modern display devices.
We reject the "detached chaos" of traditional responsive design, which relies on arbitrary media query breakpoints. Instead, we embrace Intrinsic Design—a philosophy where components possess an inherent understanding of their context and available space.
The Philosophical Pillars
From a Startup Strategist’s perspective, a disciplined layout system is a tool for Performance and Maintainability. Our approach is built on three core pillars:
- Orchestration over Individualism: Layout is the responsibility of the parent, not the child. Components like
esp-pageact as structural orchestrators, using slots to govern where content resides without caring about what that content is. - Division of Labor: We utilize a strict hierarchy of layout engines. CSS Grid handles the Macro-Layout (the 2D page shell), while Flexbox handles the Micro-Layout (1D alignment within components).
- Intrinsic Adaptation: We prioritize "Available Space Responsiveness." By leveraging math functions (
clamp,fr) and Container Queries, our components adapt to the space they actually occupy rather than the size of the viewport.
The Division of Labor
To maintain a defensible architecture, developers must apply the correct engine to the correct problem:
| Level | Tool | Responsibility | Philosophy |
|---|---|---|---|
| Macro | CSS Grid | Page scaffolding, sidebars, and 2D structures. | Layout-In: Structure is defined before content is added. |
| Micro | Flexbox | Toolbars, button groups, and 1D alignment. | Content-Out: Content informs its own distribution. |
Structural Orchestrator: esp-page
The esp-page component is our primary trellis. It supports three distinct "kinds" of layouts, each optimized for specific human-computer interactions:
- Wide (Default): Designed for high-density enterprise dashboards and data grids. It caps at
- Narrow: Optimized for reading. It restricts content to a max-width of
- Full: Immersive,
Challenge the Assumption: "Media Queries are Mandatory"
A common assumption in web development is that you cannot build a responsive site without a "mobile stylesheet." We challenge this. By using flex-wrap paired with flex-grow and CSS Grid's auto-fit patterns, we can build layouts that stack and shift naturally based on available space without a single @media line.
For a defensible architecture, use Viewport Queries only for global shifts (like toggling a mobile menu) and Intrinsic Logic for everything else.
The Layout Roadmap
Explore the implementation guides for specific structural patterns:
- Macro Structures: Building resilient page shells with
esp-pageand CSS Grid. - Micro Alignment: Leveraging Flexbox for internal component ergonomics.
- The Container Query Shift: Moving from viewport-centric to context-centric responsiveness.