Databoard Utilities Loop

How Sass v2, template defaults, Databoard field CSS, Databoard Sass, and the utility compiler connect into one styling workflow.

UTILITY LOOP

Style without editing HTML

Databoard stores field-level class names for section.container, header.h2, data.sub_container, data.h3, data.p, footer.cta, and other stable H/B/F slots.

Let AI patch the board

AI can inspect the Databoard object, choose valid Sass v2 classes, add utility classes to fields, compile Sass, deploy, and smoke test the generated website.

The page is generated from real databoard.menu data and explicit data_mapping, not template preview data.

Full styling control stack

ANTSAND gives you global framework classes, template defaults, section CSS slots, board Sass, and generated utilities without losing the H/B/F contract.

CONTROL STACK

Sass v2

Shared framework classes such as antsand-card, antsand-btn, antsand-nav, antsand-code-preview, tabs, forms, tables, and galleries.

Template defaults

parameter_files.json gives each template a clean starting contract so new sections do not begin from a blank slate.

common_init_modern

The init layer reads saved CSS JSON and creates variables like data_h3_class, data_p_class, and section_container_class.

service_3_modern

The renderer applies those classes to predictable Header / Body / Footer markup and specialized component renderers when needed.

Field CSS

The Databoard UI/API stores per-field classes such as data.container, data.sub_container, data.ul, data.cta, and footer.code_block.

Databoard Sass

Board-level Sass owns one website's branding, page-specific polish, custom section classes, and overrides.

Utility compiler

The utility scanner reads css_class values and generates board-local utility Sass for Tailwind-like classes used by that site.

Deployment

Deployment consumes the resolved datalist and generated CSS. It should not discover or repair design contracts.

The utility loop

Utilities move from shared definitions to field assignments, then into board-local generated Sass when a site needs extra granular control.

PIPELINE

Sass v2 utilities

Global definitions such as line-clamp, grid helpers, visibility helpers, shadows, and responsive text live in the framework.

Field CSS panel

A user or AI types classes into a Databoard field, for example data.h3 = "line-clamp-2 md:text-xl".

Scanner

The board scanner reads class names from the datalist and detects which generated utilities the site needs.

Site CSS

The compiler writes site-local _utilities.scss and compiles it with Databoard Sass before deployment.

field-css.mapping.txt text

section.container  = "stylesdoc-band stylesdoc-band-light"
data.container     = "antsand-grid grid-cols-3 gap-6"
data.sub_container = "antsand-card shadow-lg hover:shadow-glow"
data.h3            = "line-clamp-2 md:text-xl"
data.p             = "opacity-75 line-clamp-3"

Semantic classes first. Utilities second.

Use high-level Sass v2 classes for identity, then utility classes for field-level tuning. That keeps pages readable and still gives granular control.

TWO TIERS

Tier 1: semantic identity

Classes like antsand-card, antsand-btn-primary, antsand-section-dark, and antsand-topnav-dark define what the thing is.

Tier 2: layout and polish

Classes like grid-cols-3, gap-6, py-16, line-clamp-3, shadow-lg, and hover:scale-105 tune how it behaves.

Board-specific Sass

When a combination repeats on one site, promote it to Databoard Sass as a named site class.

two-tier-example.html html

<section class="stylesdoc-pricing-section py-16">
  <div class="antsand-grid grid-cols-3 gap-6">
    <article class="antsand-card shadow-lg hover:shadow-glow">
      <h3 class="line-clamp-2 md:text-xl">Premium Plan</h3>
      <p class="opacity-75 line-clamp-3">Semantic structure plus utility-level polish.</p>
      <a class="antsand-btn antsand-btn-primary">Subscribe</a>
    </article>
  </div>
</section>

Which layer should AI change?

The right layer depends on whether the change is framework-wide, site-wide, section-specific, or field-specific.

EXAMPLES

Repeated component pattern

Add or improve Sass v2 when many sites need the same reusable component, such as gallery, tabs, table, code preview, or buttons.

Framework

One site's brand system

Use Databoard Sass when the style belongs to this website only: brand colors, page rhythm, nav polish, and editorial look.

Board

One section's visual identity

Add classes to section.container, header.container, data.container, and footer.container to change one H/B/F block.

Section

Granular item control

Use field CSS for exact leaves: data.h3, data.p, data.img, data.ul, data.cta, footer.code_block, and similar slots.

Field

Rule of thumb: data first, mapping second, template third, classes fourth, Sass only when the pattern should be reusable.