# Zero One Theme Patterns

> UIkit patterns and Zero One theme customization for Kirby CMS. Use when styling components with UIkit, customizing the Zero One theme, or building responsive layouts.

- Skill: `majiayu000/zero-one-theme-patterns` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/zero-one-theme-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/zero-one-theme-patterns/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/zero-one-theme-patterns

---


# Zero One Theme Patterns

UIkit 3 patterns and Zero One theme customizations for Cloodle's Kirby CMS frontend.

## When to Use This Skill

- Building UI components with UIkit
- Customizing Zero One theme variables
- Creating responsive layouts
- Styling cards, buttons, and forms

## Quick Reference

See [reference.md](reference.md) for complete patterns.

## UIkit Essentials

### Layout Grid
```html
<div class="uk-container">
    <div class="uk-grid" uk-grid>
        <div class="uk-width-1-2@m">Content</div>
    </div>
</div>
```

### Cards
```html
<div class="uk-card uk-card-default uk-card-body">
    <h3 class="uk-card-title">Title</h3>
    <p>Content</p>
</div>
```

## Zero One Variables

```scss
$global-primary-background: #6e66cc;
$global-border-radius: 12px;
$base-body-font-family: "Outfit", sans-serif;
```

## Template Pattern

```php
<?php snippet('header') ?>
<main class="uk-section">
    <div class="uk-container">
        <?= $page->text()->toBlocks() ?>
    </div>
</main>
<?php snippet('footer') ?>
```