Blog & Article Guide

Create beautiful, readable blog posts and articles with optimal typography and responsive layouts.

Live Preview

See how blog articles look with ANTSAND typography:

Article Layout (700px optimal reading width)

Getting Started with ANTSAND Styles

By Jane Doe December 14, 2025 5 min read

ANTSAND Styles v2 combines the best of both worlds: semantic component classes like Bootstrap for rapid development, and utility classes like Tailwind for fine-tuned control.

Why Choose ANTSAND?

Unlike utility-first frameworks that require dozens of classes, ANTSAND provides smart defaults. One class like .antsand-article gives you optimal reading typography instantly.

"If you need to override, you shouldn't need !important. If you don't want it, remove the class."

This philosophy means your CSS stays clean and maintainable as your project grows.

Quick Start

Create a complete blog post page in under 5 minutes:

HTML 
<!-- Header Section (full-width background) -->
<section class="antsand-section" style="background: #f8f9fa;">
    <div class="antsand-container">
        <div class="antsand-article-header">
            <h1 class="antsand-article-title">My Blog Post Title</h1>
            <div class="antsand-article-meta">
                <span class="antsand-article-author">By Jane Doe</span>
                <span class="antsand-article-date">December 14, 2025</span>
                <span class="antsand-article-read-time">5 min read</span>
            </div>
        </div>
    </div>
</section>

<!-- Article Content -->
<section class="antsand-section">
    <div class="antsand-article">
        <p>Your optimized reading content here...</p>
        <h2>Section Heading</h2>
        <p>More content...</p>
    </div>
</section>

The Container/Wrapper Pattern

Core Concept: Full-width sections with bounded, centered content. One wrapper class makes the difference between "strange looking" and "looks good".
HTML 
<!-- Full-width section with background -->
<section class="antsand-section" style="background: linear-gradient(135deg, #f15b2a, #c74a22);">
    <!-- Bounded content container (max-width: 1024px, centered) -->
    <div class="antsand-container">
        <!-- Your content here stays within bounds -->
    </div>
</section>

Article Width Variants

Choose the right width for your content type:

700px

Default Article

Optimal for text-heavy content. Perfect line length for comfortable reading.

<div class="antsand-article">...</div>
900px

Research Article

For technical papers, data tables, and academic content.

<div class="antsand-research">...</div>
1000px

Wide Article

For articles with images, galleries, or visual content.

<div class="antsand-article-wide">...</div>

Callouts for Notes & Sources

Callout Variants
Tip: This is an info callout for helpful hints and tips.
Warning: This is a warning callout for important notices.
Success: This is a success callout for positive outcomes.
HTML 
<!-- Info callout -->
<div class="antsand-callout antsand-callout-info">
    <strong>Tip:</strong> Helpful information...
</div>

<!-- Warning callout -->
<div class="antsand-callout antsand-callout-warning">
    <strong>Warning:</strong> Important notice...
</div>

<!-- Sources callout -->
<div class="antsand-callout antsand-callout-sources">
    <strong>Sources:</strong>
    <ul>
        <li>Reference 1</li>
        <li>Reference 2</li>
    </ul>
</div>

Typography Classes

Class Description Usage
.antsand-article Main article container with optimal 700px width Wraps all article content
.antsand-article-header Header section with title and meta Top of article
.antsand-article-title Large, bold article title Main heading
.antsand-article-meta Author, date, read time container Below title
.antsand-article-wide Wide article container (1000px) Image-heavy content
.antsand-research Research article container (900px) Technical papers
.antsand-callout Highlighted note box Tips, warnings, sources

Complete Page Example

HTML 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/css/antsand-v2.css">
</head>
<body>

<!-- Header -->
<section class="antsand-section" style="background: #f8f9fa; padding: 3rem 0;">
    <div class="antsand-container">
        <div class="antsand-article-header">
            <h1 class="antsand-article-title">Getting Started with ANTSAND</h1>
            <div class="antsand-article-meta">
                <span class="antsand-article-author">By ANTSAND Team</span>
                <span class="antsand-article-date">December 14, 2025</span>
            </div>
        </div>
    </div>
</section>

<!-- Content -->
<section class="antsand-section" style="padding: 3rem 0;">
    <div class="antsand-article">
        <p>ANTSAND is a CSS framework that prioritizes...</p>

        <h2>Why ANTSAND?</h2>
        <p>Unlike utility-first frameworks...</p>

        <div class="antsand-callout antsand-callout-info">
            <strong>Philosophy:</strong> If you need to override,
            you shouldn't need !important.
        </div>

        <h2>Getting Started</h2>
        <p>Follow these steps...</p>
    </div>
</section>

</body>
</html>

Max-Width Utilities

For custom content width constraints:

Class Width Use Case
.antsand-max-w-sm 640px Small containers
.antsand-max-w-md 768px Medium containers
.antsand-max-w-lg 1024px Large containers
.antsand-max-w-xl 1280px Extra large containers
.antsand-max-w-prose 700px Optimal reading width
.antsand-mx-auto - Center horizontally

Best Practices

The ANTSAND Way for Articles:
  • Full-width sections, bounded content: Use .antsand-section for background, .antsand-container for bounds
  • Choose the right width: Default (700px) for text, Wide (1000px) for images, Research (900px) for data
  • Use callouts strategically: Don't overuse - they lose impact
  • Semantic class names: .antsand-article-header over .blue-box
  • Let typography breathe: Don't override article font sizes unless necessary
  • No !important: Follow the CSS Specificity Philosophy

Databoard Integration

How it works: When your databoard is attached to a website group, these classes are automatically available.
JSON 
// In your databoard configuration:
{
    "components": {
        "typography": {
            "enabled": true
        },
        "callout": {
            "enabled": true
        }
    }
}