Alignment Guide

# ANTSAND Template Alignment Guide for AI

## Overview
ANTSAND uses a 3-layer architecture where all layers must be aligned:
1. **outline2design.json** - Template definitions for UI
2. **parameter_files.json** - Master CSS class definitions
3. **SASS v2 patterns** - Visual styling

## The "One Template" Architecture
`service_3_modern.volt` is a UNIVERSAL template that renders ALL section types:
- Hero sections
- Features sections
- Footer sections
- Pricing sections
- Blog sections
- etc.

The ONLY thing that changes between section types is the **parent CSS class**:
- `hero-1`, `hero-2`, `hero-3` for heroes
- `footer-1`, `footer-2`, `footer-3` for footers
- `features-1`, `features-2` for features

## Dual-Class System
Every element has TWO classes for backward compatibility:

```
class="[prefixed] [semantic]"
class="data-h3 title"
class="footer-social-container social-container"
```

- **Prefixed class** (`data-h3`, `footer-social-container`): Indicates which AREA
- **Semantic class** (`title`, `social-container`): Universal styling hook

## How to Create a New Template

### Step 1: Add to outline2design.json
```json
{
  "name": "My New Footer",
  "parameters_file": "service-3-modern",
  "css": {
    "section": { "container": { "css_class": "footer-1" } },
    "data": {
      "container": { "css_class": "data-container container" },
      "h3": { "css_class": "data-h3 title" }
    }
  }
}
```

### Step 2: Verify parameter_files.json has the classes
The `service-3-modern` parameter set should already have all dual classes defined.

### Step 3: Ensure SASS v2 styles exist
Check that `_footer.scss` targets the semantic classes:
```scss
.footer-1 {
  > .container { ... }
  .sub-container { ... }
  .title { ... }
}
```

## Alignment Verification Checklist
When creating/modifying templates, verify:
- [ ] outline2design.json uses dual classes
- [ ] Classes match parameter_files.json definitions
- [ ] SCSS targets semantic class within parent selector
- [ ] Parent class (footer-1, hero-1) is set at section level

## File Paths
- Template definitions: `app/antsand_bootstrap/project/common_views/outline2design.json`
- Parameter master: `app/antsand_bootstrap/project/common_views/parameter_files.json`
- SCSS patterns: `styles_antsand/sass_v2/patterns/`
- Universal template: `app/antsand_bootstrap/project/common_views/services_products/service_3_modern.volt`