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.
Properties
| Name | Type | Description |
|---|---|---|
{class} .prose Main article/content container for readable prose |
mixed |
|
{class} .small Narrow sidebar width container |
mixed |
|
{class} .accent Accent container with background color |
mixed |
|
{class} .feature Featured content with larger spacing |
mixed |
|
{class} .full Full-width container |
mixed |
|
{variable} --line-width-xs Extra small (24rem / 384px) |
mixed |
|
{variable} --line-width-s Small (32rem / 512px) |
mixed |
|
{variable} --line-width-m Medium (42rem / 672px) - default |
mixed |
|
{variable} --line-width-l Large (50rem / 800px) |
mixed |
|
{variable} --line-width-xl Extra large (60rem / 960px) |
mixed |
Examples
// 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>See Also
Source: /Users/francisfontaine/Documents/GitHub/Standard/src/styles/standard-07-prose.scss