4. Layout & Grid

The layout system of @xpulse/theme is based on CSS Custom Properties and simple utility classes.

Key Layout Tokens

Token	Description	Default
`--xpulse-content-width`	Maximum width of the main content	`1100px`
`--xpulse-sidebar-width`	Width of sidebars and navigation	`260px`
`--xpulse-gap-layout`	Standard spacing between elements	`24px`

Most xPulse pages use a centred layout:

1 .xpulse-shell {
2   width: min(var(--xpulse-content-width), calc(100% - 32px));
3   margin: 32px auto;
4 }

At screen widths below 720px, many layouts automatically switch to a single-column view (e.g. TOC + content).

Example:

1 <div class="xpulse-grid" style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
2   <!-- Cards -->
3 </div>

1	.xpulse-shell {
2	width: min(var(--xpulse-content-width), calc(100% - 32px));
3	margin: 32px auto;
4	}

1	<div class="xpulse-grid" style="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
2	<!-- Cards -->
3	</div>