Holy Grail Layout

Basic Holy Grail Layout

A classic web layout pattern with header, footer, main content area, and two sidebars.

<div class="holy-grail-layout">
	<header>Header</header>
	<div class="holy-grail-body">
		<nav>Navigation</nav>
		<div role="main">Main Content</div>
		<aside>Sidebar</aside>
	</div>
	<footer>Footer</footer>
</div>

Responsive Holy Grail Layout

The layout adapts to different screen sizes, stacking elements on mobile.

<div class="holy-grail-layout-responsive color-swatch-yellow">
	<header>Header</header>
	<div class="holy-grail-body">
		<nav>Navigation</nav>
		<div role="main">
			<h3>Main Content</h3>
			<p>This is a responsive version of the Holy Grail layout.
			The sidebars will stack on mobile devices.</p>
		</div>
		<aside>Sidebar</aside>
	</div>
	<footer>Footer</footer>
</div>

Class Descriptions:

• .holy-grail-layout: The container for the entire layout, ensuring proper structure and spacing.
• .holy-grail-body (and .holy-grail-body-responsive): Wraps the main content area, navigation, and sidebar, aligning them horizontally.
• header: Represents the top section of the layout, typically used for branding or navigation links.
• footer: Represents the bottom section of the layout, often used for copyright or additional links.
• nav: The navigation sidebar, typically placed on the left side of the layout.
• aside: The secondary sidebar, typically placed on the right side of the layout.
• role="main": The main content area, where the primary content of the page resides.

Note: The Holy Grail layout classes (.holy-grail-layout, .holy-grail-body) in this design system are designed to create a flexible, responsive layout. The content within .holy-grail-body can be substituted, but it will consistently maintain the grid structure of [25%, 1fr, 25%], where "1fr" represents the middle column. 1fr will take 1 fraction of the available space.