Layout
A layout defines the base HTML structure of your application. It acts as the root container where all slots, includes, and bindings are applied.
---1. Basic Usage
$tpl = (new CandidTemplateAdaptor('views'))
->bind('layout.html');
2. Example Layout File
layout.html
<html>
<body>
<header id="header"></header>
<main>
<div data-slot="content"></div>
</main>
<footer id="footer"></footer>
</body>
</html>
3. How Layout Works
layout.html ↓ slots inserted (slot()) ↓ includes injected (include()) ↓ data binding applied (pick()) ↓ final HTML output---
4. Using Layout with Slots
$page = $tpl->slot('content','home');
$page->pick('title')->content('Welcome');
5. Using Layout with Includes
$header = $tpl->include('#header','header');
$header->pick('username')->content('Tamil');
6. Layout + Nested Templates
$admin = $tpl->slot('content','admin');
$admin->slot('content','dashboard');
👉 Layout acts as the root of all nested structures.
---7. Multiple Slots
<div data-slot="header"></div>
<div data-slot="content"></div>
<div data-slot="footer"></div>
$tpl->slot('header','header');
$tpl->slot('content','home');
$tpl->slot('footer','footer');
8. Rules
- Layout must be valid HTML
- Slot names must match exactly
- Each slot replaces inner content
9. Common Mistakes
❌ Missing
❌ Wrong slot name
❌ Multiple identical slot names
❌ Binding before layout is loaded
---
data-slot in layout❌ Wrong slot name
❌ Multiple identical slot names
❌ Binding before layout is loaded
10. Best Practices
- Keep layout simple and clean
- Use semantic HTML (header, main, footer)
- Define all slots explicitly
- Avoid business logic in layout
11. Real-World Example (Restaurant App)
$app = $tpl->slot('content','app-layout');
$page = $app->slot('content','orders');
$page->pick('table')->content('Table 5');
12. Performance Notes
- Layout is parsed once per render
- Keep DOM size reasonable
Layout is the root of your UI — everything starts here.