# WebFramework Templating Engine

VeloFrame’s templating engine lets you build dynamic, reusable UIs with ease. It supports both **templates** and **components**.

---

## Templates
Templates are HTML files (in `templates/`) that can include variables and sub-templates.

### Including Sub-Templates
Use `{![subtemplate_name]}` in your HTML:
```html
{![head]}
```
In PHP:
```php
$template->includeTemplate("head", new VeloFrame\Template("head"));
```

**Tip:** Include all sub-templates first, then set variables in your main template.

---

## Variables
Insert variables in your template using `{[varname]}`:
```html
<h1>{[title]}</h1>
```
In PHP:
```php
$template->setVariable("title", "Welcome!");
```

---

## Components
Components are reusable HTML blocks (in `templates/components/`).

### Using Components
In your template:
```html
{[container]}
```
In PHP:
```php
$container = new VeloFrame\TemplateComponent("container", ["content" => "Hello!"]);
$template->setComponent("container", $container);
```

---

## Inline Components
If enabled, you can use inline component tags in your HTML:
```html
<_three_card_row title="My Cards"> ... </_three_card_row>
```

---

## Best Practices
- Keep templates simple and focused.
- Use components for repeated UI blocks.
- Set all variables before rendering.

See [API Reference](./API-Reference.md) for more details.