A CSS library to design beautiful webpages using wireframes, styles and classes

🚀 Quick Start

Create a complete blog post page in under 5 minutes:

<!-- 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">October 4, 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.

<!-- Full-width section with background -->
<section class="antsand-section" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);">
    <!-- Bounded content container (max-width: 1024px, centered) -->
    <div class="antsand-container">
        <!-- Your content here stays within bounds -->
    </div>
</section>

This is the ANTSAND philosophy - one simple wrapper class makes the difference between "strange looking" and "looks good".

📝 Article Components

1. Article Header

Pre-styled header with title and meta information.

<div class="antsand-article-header">
    <h1 class="antsand-article-title">Article Title</h1>
    <div class="antsand-article-meta">
        <span class="antsand-article-author">By Author</span>
        <span class="antsand-article-date">Date</span>
        <span class="antsand-article-read-time">Read time</span>
    </div>
</div>

2. Article Container (Default: 700px)

Optimal reading width with automatic typography styling.

<div class="antsand-article">
    <p>18px font, 1.75 line height, perfect for reading</p>
    <h2>Auto-styled with bottom border</h2>
    <blockquote>Auto-styled quotes</blockquote>
    <code>Auto-styled inline code</code>
</div>

3. Wide Article (1000px)

For articles with images, galleries, or visual content.

<div class="antsand-article-wide">
    <img src="wide-image.jpg" style="width: 100%;">
    <p>Content with more horizontal space...</p>
</div>

4. Research Article (900px)

For technical papers, data, tables, and academic content.

<div class="antsand-research">
    <table>...data tables...</table>
    <p>Research findings...</p>
</div>

💡 Callouts for Notes & Sources

<!-- 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>

📄 Complete Page Examples

Example 1: Simple Blog Post

<!-- 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">October 4, 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. If you don't want it, remove the class.
        </div>

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

Example 2: Research Article

<section class="antsand-section" style="background: #fff; padding: 3rem 0;">
    <div class="antsand-research">
        <div class="antsand-article-header">
            <h1 class="antsand-article-title">CSS Specificity Analysis</h1>
            <div class="antsand-article-meta">
                <span class="antsand-article-author">Dr. Jane Smith</span>
                <span class="antsand-article-date">October 2025</span>
            </div>
        </div>

        <h2>Abstract</h2>
        <p>This research examines...</p>

        <h2>Methodology</h2>
        <p>We analyzed 500 CSS frameworks...</p>

        <div class="antsand-callout antsand-callout-warning">
            <strong>⚠️ Note:</strong> Data collected between Jan-Mar 2025
        </div>

        <h2>Results</h2>
        <table>...</table>

        <div class="antsand-callout antsand-callout-sources">
            <strong>📚 References:</strong>
            <ol>
                <li>Smith et al. (2024)</li>
                <li>Jones (2023)</li>
            </ol>
        </div>
    </div>
</section>

🔌 Databoard Integration

These classes are automatically available when your databoard is attached to a website group:

How it works:

Create a databoard in your group
Add article components using the SASS Editor
Classes like .antsand-article, .antsand-callout are auto-generated
Use them in your HTML templates

// In your databoard:
{
  "components": {
    "typography": {
      "enabled": true
    },
    "callout": {
      "enabled": true
    }
  }
}

📏 Max-Width Utilities

For custom content width constraints:

<!-- Centered content with custom max-width -->
<div class="antsand-max-w-lg antsand-mx-auto">
    Content constrained to 1024px and centered
</div>

<!-- Available max-widths -->
antsand-max-w-sm       640px (small)
antsand-max-w-md       768px (medium)
antsand-max-w-lg       1024px (large)
antsand-max-w-xl       1280px (extra large)
antsand-max-w-prose    700px (optimal reading)
antsand-max-w-full     100%
antsand-max-w-none     no constraint

<!-- Center horizontally -->
antsand-mx-auto        margin-left: auto; margin-right: auto;

✅ Best Practices

The ANTSAND Way:

Full-width sections, bounded content: Use .antsand-section for background, .antsand-container for content bounds
Choose the right article 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 > .blue-box
Let typography breathe: Don't override article font sizes unless necessary
No !important: Follow the CSS Specificity Philosophy

🎯 The Philosophy

"Find the least amount of code, structure, or styles that gives maximum impact."

The ANTSAND philosophy is about balance - sometimes we need the most critical CSS class (like .antsand-container), sometimes we need to over-define with specific components (like .antsand-article). That spectrum is necessary. One simple wrapper class makes the whole difference between "strange looking" and "looks good".

Blog & Article Guide