Getting Started with ANTSAND Styles

A standalone CSS library with 920 classes — optimized to work with the ANTSAND Databoard compiler, where every deployed site ships with these styles by default.

Three Ways to Use

ANTSAND Styles works at every level — from a standalone CSS drop-in, to the styling layer of a headless data backend, to the fully compiled website pipeline.

📦

Standalone CSS

Drop one CSS file into any HTML project. No ANTSAND, no build tools, no backend required.

  • ✓ CDN or local include
  • ✓ 24 component types, 200+ utilities
  • ✓ 4 themes, 40+ fonts, zero deps
  • ✓ Any framework: React, Vue, plain HTML
Best for: static sites, prototypes, non-ANTSAND projects
🔗

Headless + ANTSAND Data

Build your own custom frontend, but use ANTSAND Databoard as a headless CMS for all your data management. Include the styles library in your app for visual consistency.

  • ✓ Your app, your framework, your hosting
  • ✓ ANTSAND manages content & data via API
  • ✓ Include styles via CDN in your frontend
  • ✓ Same class system across all your apps
Best for: custom apps using ANTSAND as a data backend
⚡

Full Compiler (Default)

ANTSAND compiles and deploys your entire site. Styles are auto-attached — you just assign CSS classes to Databoard fields. AI agents style through the REST API.

  • ✓ Styles auto-included on deploy
  • ✓ Assign classes via API or control panel
  • ✓ Sass scanner = zero-waste CSS
  • ✓ Inspect → Patch → Compile → Deploy
Default for: ANTSAND-deployed production sites
Already using ANTSAND? If Databoard compiles your site, antsand-v2.css is already in every page's <head> — no install needed. If you use ANTSAND as a headless CMS with your own frontend, include the library via CDN so your app shares the same design system.

Standalone & Headless Quick Start

For standalone projects or custom frontends using ANTSAND as a headless CMS, include the library via CDN:

1. Include via CDN

HTML <head>
<link rel="stylesheet" href="https://styles.antsand.com/css/antsand-v2/antsand.css">

2. Use Components & Utilities

HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://styles.antsand.com/css/antsand-v2/antsand.css">
</head>
<body>

    
    <button class="antsand-btn antsand-btn-primary">Click Me</button>

    
    <div class="antsand-grid md:grid-cols-3 gap-6">
        <div class="antsand-card shadow">Card 1</div>
        <div class="antsand-card shadow">Card 2</div>
        <div class="antsand-card shadow">Card 3</div>
    </div>

    
    <section class="antsand-section theme-dark-corporate">
        <h2 class="antsand-text-3xl font-bold">Dark Theme</h2>
    </section>

</body>
</html>

3. Or Download

Download the full package for local hosting:

⬇ Download ANTSAND Styles v2

ANTSAND Databoard Integration

When you deploy a site through ANTSAND, the styles library is already in the rendered HTML. You style by assigning CSS class names to Databoard fields:

Databoard field → CSS class assignment (via API or control panel)
{
  "section.container": "antsand-section theme-warm-editorial",
  "data.container":     "antsand-grid md:grid-cols-3 gap-6",
  "data.sub_container": "antsand-card shadow transition-all hover:-translate-y-1",
  "data.h3":            "line-clamp-2 font-semibold md:text-xl",
  "data.p":             "line-clamp-3 opacity-75",
  "data.cta":           "antsand-btn antsand-btn-primary antsand-btn-sm"
}
How it works: The ANTSAND compiler reads a Databoard JSON object containing your content + CSS class assignments. It resolves Volt templates, applies the Header/Body/Footer section contract, compiles Sass, and deploys a production site. The antsand-v2.css stylesheet is auto-included — no manual linking needed.

AI agents use a REST API to style ANTSAND sites programmatically:

Agent loop (curl)
# 1. Inspect current state
curl -X GET /api/v1/databoards/{BOARD_ID} -H "Authorization: Bearer TOKEN"

# 2. Patch CSS classes on fields
curl -X POST /api/v1/databoards/{BOARD_ID}/patch \
  -H "Authorization: Bearer TOKEN" \
  -d '{ "patch_delta": { "datalist.0.css.section.container": "antsand-section theme-dark-corporate" } }'

# 3. Compile utilities (generates only used CSS)
curl -X POST /api/v1/databoards/{BOARD_ID}/utilities/compile -H "Authorization: Bearer TOKEN"

# 4. Deploy
curl -X POST /api/v1/databoards/{BOARD_ID}/deploy -H "Authorization: Bearer TOKEN"
Agent Quick Start → Full API Reference →

Two-Tier Class System

ANTSAND Styles uses a two-tier architecture — semantic components for structure, utility classes for fine-tuning:

Tier 1: Semantic Components

Named by function. Never raw utilities for these.

antsand-btn antsand-btn-primary
antsand-card
antsand-section
antsand-grid
antsand-navbar
Tier 2: Utility Classes

Property-driven helpers for spacing, sizing, layout.

md:grid-cols-3 gap-6
shadow hover:-translate-y-1
line-clamp-2 opacity-75
px-4 py-2 rounded-lg
font-semibold md:text-xl

Rule: Buttons are always antsand-btn — never px-4 py-2 bg-blue. Semantic wins for components. Utilities complement, not replace.

For AI Agents

Copy the getting-started prompt to give your AI agent full context on using ANTSAND Styles — both standalone and with the Databoard compiler.

🤖 Agent Getting Started Prompt — standalone + ANTSAND integration

Explore the Framework

📦 Components Buttons, cards, forms, modals, tabs, alerts, navbars — 24 types 🛠️ Utilities Spacing, colors, typography, layout, visibility, animations 🔤 Font Library 40+ self-hosted fonts with weights, pairings, and samples 🎯 CSS Specificity No !important — proper cascade and layer management 📡 API Reference REST endpoints for inspect, patch, compile, deploy 🤖 Agent Quick Start Step-by-step guide for AI agents to style ANTSAND sites 📝 Blog Guide Create beautiful blog posts and article layouts 🎨 Themes 4 built-in themes — one class activates an entire look