A Taste of the Syntax #
Here is a small, beginner-friendly example showing layout inheritance and components:
<!-- pages/home.sugar.php -->
<s-template s:extends="layouts/app.sugar.php"></s-template>
<title s:block="title">Home</title>
<s-template s:block="content">
<h1 class="title">Welcome, <?= $user->name ?></h1>
<s-button class="btn-dark" s:class="['btn-active' => $isActive]">
Click me
</s-button>
<p s:if="$showHint">You can hide this hint with s:if.</p>
<ul>
<li s:foreach="$items as $item"><?= $item ?></li>
</ul>
<s-unless condition="$isPremium">
<p>Upgrade to unlock more features.</p>
</s-unless>
</s-template>
<!-- layouts/app.sugar.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title s:block="title">Sugar App</title>
</head>
<body>
<main s:block="content">Default content</main>
</body>
</html>
<!-- components/s-button.sugar.php -->
<button class="btn">
<?= $slot ?>
</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<main>
<h1>Welcome, Alice</h1>
<button class="btn btn-dark btn-active">Click me</button>
<small class="hint">Press to continue</small>
<p>You can hide this hint with s:if.</p>
<ul>
<li>Docs</li>
<li>API</li>
</ul>
<p>Upgrade to unlock more features.</p>
</main>
</body>
</html>
Note New to Sugar? Start with Getting Started, then move to Template Inheritance and Components.