What is Databoard?

Databoard is the core engine of ANTSAND. It is a visual website compiler that transforms structured JSON configuration into deployed full-stack websites, complete with controllers, views, routing, access control, styles, and assets.

📊 CORE CONCEPT

The simple version:

JSON object→Databoard compiler→running website

Pages, menus, sections, fields, CSS classes, HMVC routes, access control, and modules are stored in one Databoard object. Deploy generates a full PHP/Volt application from it.

JSON object -> Databoard compiler -> running website

A page is not hand-coded first. It starts as structured data, then H/B/F templates render it into consistent HTML.

COMPILER PICTURE

Data source

Real content lives under module data such as databoard.menu, notes, forms, ecommerce, media, or groups.

Data mapping

Each section maps source content into api_data. The first mapping path is the destination; the second path is the source.

Template contract

The section chooses a renderer such as service_3_modern. The renderer does not invent content; it renders the mapped data.

CSS slots

Section, header, body, data item, and footer classes come from the Databoard CSS contract and Sass v2.

Databoard section mapping json

{
  "data_mapping": {
    "api_data": [
      ["api_data"],
      ["databoard", "menu", "docs_databoard_hero"]
    ]
  },
  "phalcon_template": "service_3_modern.volt"
}

What is inside a Databoard object?

The shape is intentionally explicit: pages, datalists, data sources, mappings, CSS slots, Sass, HMVC, ACL, forms, and deployment metadata.

OBJECT SHAPE

databoard.object.json json

{
  "group_id": 34,
  "list": [
    {
      "listname": "Databoard Docs",
      "page_settings": {
        "General": { "url_slug": "/docs/databoard" },
        "hmvc": { "module": "docs", "controller": "index", "action": "databoard" }
      },
      "datalist": [
        {
          "section_id": "docs-databoard-hero",
          "data_mapping": {
            "api_data": [
              ["api_data"],
              ["databoard", "menu", "docs_databoard_hero"]
            ]
          },
          "css": { "section": { "container": { "css_class": "stylesdoc-band" } } }
        }
      ]
    }
  ]
}

Pages are lists. Sections are mapped H/B/F blocks.

The page controls route and order. Each section controls one presentational chunk: header, body/data, and footer.

PAGES AND SECTIONS

Route and HMVC

A page can be /docs/databoard, /components/buttons, /auth/session/login, or any semantic route. Names matter less than the route, ACL, and action contract.

PAGE

Header / Body / Footer

Each section maps content into header, data/body, and footer so the renderer can stay predictable.

SECTION

CSS slot map

Classes attach to known paths: section.container, header.h2, data.sub_container, data.h3, data.p, footer.cta, and so on.

STYLE

Databoard generates an application, not only a page.

ANTSAND can generate static pages, but the same object also carries application behavior: controllers, actions, view variables, forms, ACL, checkout, and login.

HMVC LAYER

🧭

Routes

Public URLs are attached to module/controller/action contracts.

🔐

ACL

Guest, subscriber, premium, ultra, admin, or custom roles can be enforced before rendering.

🧾

Forms

Generated forms can submit to application actions, membership flows, or generic notification handlers.

💳

Checkout

Payment pages can create intents, finalize subscriptions, and set session roles.

Deployment is intentionally dumb.

References, utilities, and mappings are normalized before deploy. The deployed app consumes the resolved datalist and generated files.

DEPLOY PIPELINE

Patch the board

UI or API changes data, mappings, CSS classes, Sass, pages, routes, or global references.

Normalize references

Global nav/footer references are expanded into concrete sections while preserving _reference metadata.

Compile utilities and Sass

Databoard Sass and utility classes become CSS that the generated site can load.

Generate HMVC

Routes, controllers, views, ACL, api_data, and assets are written into the deployed Phalcon app.

Smoke test

Generated routes should return clean 200/302/JSON responses with no fatal HTML.

AI/API loop bash

curl -X POST /api/v1/databoards/{id}/patch
curl -X POST /api/v1/databoards/{id}/utilities/compile
curl -X POST /api/v1/databoards/{id}/deploy
make test-site-smoke SITE=http://localhost:8086

Stable Shared Utilities

Classes in sass_v2/foundation/_utilities.scss, compiled into antsand-v2.css. Safe to use in any Databoard field.

REFERENCE

📐

Spacing

p-1..p-8, px-*, py-*, m-1..m-8, mx-auto, gap-1..gap-8

data.container, section.container

📦

Display

block, hidden, flex, grid, inline-flex

data.container, data.span_container

↔️

Flexbox

flex-row, flex-col, flex-wrap, items-center, justify-between

data.container, header.container

🔤

Typography

text-sm..text-5xl, font-bold, font-semibold, text-center

data.h3, data.p, header.h1

✂️

Line Clamp

line-clamp-1..line-clamp-5, truncate

data.h3, data.p, data.description

👁️

Opacity

opacity-0, opacity-25, opacity-50, opacity-75, opacity-100

data.p, data.span, footer.p

🖼️

Aspect Ratio

aspect-video (16:9), aspect-square (1:1), aspect-photo (4:3)

data.img_container

📷

Object Fit

object-cover, object-contain, object-center, object-top

data.img

⬜

Borders

rounded, rounded-lg, rounded-full, border, border-0

data.sub_container, data.img

🌑

Shadows

shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl

data.sub_container, data.content_wrapper

✨

Transitions

transition-all, transition-colors, transition-opacity

data.sub_container, data.cta

🖱️

Hover

hover:scale-105, hover:-translate-y-1, hover:shadow-lg

data.sub_container, data.cta

📱

Responsive

sm: (640px+), md: (768px+), lg: (1024px+)

All fields — mobile-first breakpoint prefixes

🎬

Animation

animate-fade-in, animate-slide-up, animate-spin, animate-pulse

data.sub_container, loading states

📏

Height

min-h-screen, max-h-[500px], h-screen, h-[50vh]

section.container, data.img_container

📝

Whitespace

whitespace-nowrap, whitespace-pre-wrap, break-words

data.p, data.description

Rules for Agents

Semantic class first, utility class second. Every section MUST have a Tier 1 root class defining its design identity.

⚠️ GUIDELINES

✅

✅ Section root

data.container = "pricing-grid antsand-grid"

❌ Don't: data.container = "flex flex-wrap gap-4 p-8"

✅

✅ Cards

"antsand-card shadow transition-all"

❌ Don't: "bg-white rounded-lg border p-4"

✅

✅ Buttons

"antsand-btn antsand-btn-primary"

❌ Don't: "px-4 py-2 bg-blue-500 text-white rounded"

✅

✅ Images

"aspect-video object-cover" (Tier 2 is fine for media)

❌ Don't: No aspect-ratio → images distort or overflow

✅

✅ Text truncation

"line-clamp-3 opacity-75" (Tier 2 for text control)

❌ Don't: Raw CSS style="overflow:hidden"

✅

✅ Board-specific

Let Databoard Sass scanner generate site-local rules

❌ Don't: Adding one-site rules to global _utilities.scss

How styling fits into Databoard

Sass v2 supplies reusable semantic components. Databoard Sass supplies site-specific polish. Field CSS applies classes to the exact rendered H/B/F leaf nodes.

SASS V2

Sass v2

Shared framework classes such as antsand-card, antsand-btn, antsand-nav, code previews, accordions, tabs, forms, and layout primitives.

Databoard Sass

Website-specific classes like stylesdoc-db-card, stylesdoc-btn-brand, and stylesdoc-topnav. This is where brand polish belongs.

Field CSS

The page decides which class goes on header.h2, data.sub_container, data.ul, footer.cta, and similar slots.

Use Databoard directly or let AI patch it.

Humans can use the UI. AI can use the API. Both must respect the same contract: data first, explicit mapping, template second, classes third, deploy last.

Open the UI

Use the visual builder when you want to inspect pages, reorder sections, and adjust mappings.

Databoard UI

Patch through the API

Use patch_delta when AI needs to add pages, normalize references, change Sass, or deploy consistently.

AI Quick Start