Design Philosophy

🎯 Why ANTSAND Exists

ANTSAND was built to solve real problems that modern frameworks still struggle with: fast static deployment, zero-database runtime, and true separation of data from presentation.

🔧 The Dual-Class System

ANTSAND uses two types of CSS classes working together. This isn't accidental—it's architectural.

Why Both?

• Semantic classes give you consistent, maintainable components
• Utility classes give you escape hatches for one-off adjustments
• Together, they provide flexibility without chaos

⚡ Tailwind-Compatible Utilities

If you're comfortable with Tailwind, you'll feel at home. ANTSAND includes utility classes that follow familiar patterns:

/* Spacing - like Tailwind */
.antsand-m-0  .antsand-m-4  .antsand-mt-2  .antsand-px-6
.antsand-p-0  .antsand-p-4  .antsand-pb-2  .antsand-py-6

/* Typography */
.antsand-text-sm  .antsand-text-lg  .antsand-text-2xl
.antsand-text-bold  .antsand-text-center

/* Flexbox */
.antsand-flex  .antsand-flex-col  .antsand-items-center
.antsand-justify-between  .antsand-gap-4

/* Colors */
.antsand-text-primary  .antsand-bg-dark  .antsand-text-muted

Note: We prefix with antsand- to avoid conflicts with other frameworks. You can use these alongside semantic classes for maximum flexibility.

🚀 Why JSON Deployment?

When you deploy a site from ANTSAND, it generates static JSON files. No database queries at runtime.

The Flow

1. You edit in Databoard (menu topo, sections, CSS)
2. Click Deploy → ANTSAND generates api_data.json, api_blog_data.json, api_posts_data.json
3. Volt templates read JSON and render static HTML
4. Result: Blazing fast sites that scale infinitely

🎨 Why Inline CSS Option?

In Databoard, you'll see css_inline alongside css_class. This isn't laziness—it's power.

// In your DSL CSS:
{
  "header": {
    "section": {
      "css_class": "antsand-section antsand-py-6",
      "css_styles": {
        "style": "background: linear-gradient(135deg, #1a1a2e, #2d3436);"
      }
    }
  }
}

When to Use Each

• css_class — For reusable patterns, responsive behavior, hover states
• css_styles/style — For one-off values like specific colors, gradients, or exact dimensions

Pro tip: Inline styles have highest CSS specificity. Use them for final overrides that should never be changed by classes.

🚫 Why No !important?

ANTSAND is structured so you never need !important. The cascade is a feature.

/* Load order defines priority */
1. Foundation (variables, reset)
2. Layout (containers, grid)
3. Components (buttons, cards)
4. Patterns (hero, features)
5. Themes (overrides everything)
6. Inline styles (highest specificity)

If you need to override something, you either:

• Remove the conflicting class
• Add a more specific selector
• Use inline styles
• Load your CSS later in the cascade

Read the full Specificity Philosophy →

✨ The Result

A system where:

• Sites load in milliseconds, not seconds
• Data and presentation are truly separated
• You can use familiar utility patterns
• CSS cascade works for you, not against you
• Deployment is a click, not a DevOps project

Ready to dive in? Start with Introduction →