# Acai Modular System

## Modules

Modules are the visual building blocks of Acai websites. Each module lives in `template/estandar/modulos/<module-id>/`.

### File structure

```
<module-id>/
├── index-base.tpl    # Source Twig template (EDIT THIS)
├── index.tpl         # Compiled output (auto-generated, do NOT edit)
├── style.css         # Module-scoped styles
└── script.js         # Module JavaScript
```

### Twig Templates

<!-- TODO: Document Twig syntax, variable access, builder vars -->

### Custom Twig Filters

<!-- TODO: Document custom filters available in Acai (e.g., |translate, |slugify, etc.) -->

### Builder Variables

<!-- TODO: Document how builder vars work, how to access them in templates -->

### Calling Modules from Other Modules

<!-- TODO: Document how to include/call modules from other modules or general sections -->


## General Sections

General sections are reusable layout blocks (headers, footers, sidebars) shared across pages.

<!-- TODO: Document how general sections differ from modules, where they live, how to create/edit them -->


## CSS & JavaScript

### Module Styles (`style.css`)

<!-- TODO: Document scoping rules, CSS conventions -->

### Module Scripts (`script.js`)

<!-- TODO: Document JS conventions, lifecycle, event handling -->


## Builder Field Types

<!-- TODO: Document data-field-type usage, c-form, c-if, c-for, c-class attributes -->