Kirby Template
Create and modify Kirby CMS templates and snippets for this project.
Project Structure
code
resources/views/
├── templates/ # Page templates (match blueprint names)
│ ├── home.php
│ ├── default.php
│ ├── error.php
│ └── legal-notice.php
└── snippets/
├── header.php
├── footer.php
├── partials/ # Reusable UI components
│ ├── container.php
│ ├── basic-section.php
│ ├── card-item.php
│ ├── review-item.php
│ └── skill-item.php
└── svg/ # SVG icons and logos
Template Pattern
php
<?php snippet('header') ?>
<main class="flex flex-col mt-8 sm:mt-24">
<?php snippet('partials/container', slots: true, data: ['css' => 'to-reveal']) ?>
<?php slot('content') ?>
<!-- Content here -->
<?php endslot() ?>
<?php endsnippet() ?>
</main>
<?php snippet('footer') ?>
Snippet with Slots
php
<?php snippet('partials/container', slots: true, data: [
'css' => 'to-reveal',
'paddingTop' => 'pt-8',
'fullsize' => true
]) ?>
<?php slot('content') ?>
<!-- Slot content -->
<?php endslot() ?>
<?php endsnippet() ?>
Snippet with Data
php
<?php snippet('partials/basic-section', data: [
'title' => 'Section Title',
'logo' => icon('lucide:icon-name', ['class' => 'text-sky-400']),
'items' => page()->itemsRefs()->toStructure(),
], slots: true) ?>
<?php endsnippet() ?>
Common Patterns
Icons (php-icons)
php
<?= icon('lucide:heart', ['class' => 'text-rose-400']) ?>
Translations
php
<?= I18n::translate('actions.contact_me') ?>
Page Data
php
<?php foreach (page()->items()->toStructure() as $item) { ?>
<?php snippet('partials/item', ['item' => $item]) ?>
<?php } ?>
Kirby Fields
php
<?= $page->title() ?>
<?= $page->text()->kirbytext() ?>
<?= $page->date()->toDate('d.m.Y') ?>
CSS Classes
Use Tailwind CSS classes. Common patterns:
- •
to-reveal- ScrollReveal animation trigger - •
flex flex-col gap-*- Flexbox layouts - •
text-slate-300- Muted text color - •Responsive:
sm:,md:,lg:,xl:prefixes
Best Practices
- •Always use snippets for reusable components
- •Pass data via
data: []parameter - •Use slots for flexible content insertion
- •Keep templates minimal, logic in models/controllers
- •Use Tailwind utility classes