Layout
Prose-focused layout system for optimal reading experience with proper line lengths based on typography research (60-75 characters). Uses CSS Grid with responsive content columns for sidebars, accents, and featured content. Inspired by fine-art typography and classical book design principles.
| Name | Description |
|---|---|
.prose |
Main article/content grid container for readable prose with named tracks. |
.prose.left |
Left-aligned prose variant hugging the left edge. |
.small |
Narrow sidebar breakout column track. |
.editorial |
Editorial column breakout track (minmax(0, var(--space-2))). |
.feature |
Feature callout breakout track (minmax(0, var(--space-4))). |
.hero |
Full-bleed viewport width hero track (minmax(0, 1fr)). |
.full |
Full viewport width breakout track. |
--line-width |
Active reading column measure. |
--line-width-xs |
Extra small reading measure (24rem / 384px). |
--line-width-sm |
Small reading measure (32rem / 512px). |
--line-width-md |
Medium reading measure (42rem / 672px) – default. |
--line-width-lg |
Large reading measure (50rem / 800px). |
--line-width-xl |
Extra large reading measure (60rem / 960px). |
--body-max-width |
Overall page max-width constraint (900px). |
// Standard article with proper reading width
<article class="prose">
<h1>Article Title</h1>
<p>Content here stays within optimal reading width...</p>
</article>
// Narrow sidebar content
<div class="prose small">
<p>Short form content</p>
</div>
// Featured content with emphasis
<section class="prose feature">
<blockquote>Important quote with extra space</blockquote>
</section>
since 0.1.0 · see https://www.rsub.com/blog/how-long-should-a-line-of-text-be/