Create readable blog posts and articles with ANTSAND v2.
The key pattern is full-width sections with bounded article content.
Use a header section for title/meta and a bounded article section for optimized reading.
<section class="antsand-section">
<div class="antsand-container">
<div class="antsand-article-header">
<h1 class="antsand-article-title">My Blog Post Title</h1>
</div>
</div>
</section>
<section class="antsand-section">
<div class="antsand-article">
<p>Your reading content here...</p>
</div>
</section>Use full-width sections for background and bounded containers for content. One wrapper often makes the difference between cramped and intentional.
<section class="antsand-section">
<div class="antsand-container">
<!-- content stays within readable bounds -->
</div>
</section>Use default article width for prose, wide article for images, and research width for data-heavy writing.
Callouts work best for tips, warnings, source notes, and key takeaways. Too many callouts reduce signal.
When the site is generated, article classes can be assigned through Databoard fields or promoted into reusable Sass v2 patterns.
Use the smallest amount of structure and styling that produces readable, robust content.