README

Agent-ready PHP component framework for admin dashboards. Zero dependencies, Material Design 3, AJAX-first.

Why GRIDKit?

• 17+ components, 1 CSS file, 1 JS file. Zero dependencies.
• Agent-first design — feed the Agent Skill to your AI and it generates complete CRUD apps.
• 6 themes with light & dark mode via CSS Custom Properties (M3-inspired).
• AJAX-first — tables search, sort, filter, paginate without page reloads.
• No jQuery, no Bootstrap, no npm, no build process. Clone and go.

Quick Start

git clone https://github.com/mmollay/gridkit.git

require_once '/path/to/gridkit/autoload.php';

Use the skeleton as a starting point:

cp gridkit/skeleton.php my-app/index.php

skeleton.php includes: Sidebar, Header (fixed), Theme Switcher, Content Area, Modal Container, JS — all wired up.

Agent Skill — Let AI Build For You

The GRIDKIT_SKILL.md file teaches any AI assistant (Claude, GPT, Gemini) how to use GRIDKit. Add it to your agent's project context:

1. Download GRIDKIT_SKILL.md from the repository
2. Add it to your AI agent's context or project knowledge
3. Describe what you need: "Create a user management dashboard"
4. The agent generates working GRIDKit PHP code — tables, forms, modals, all wired up

Example — CRUD Table in 12 Lines

use GridKit\Table;

$table = new Table('products');
$table->query($db, "SELECT * FROM products ORDER BY name")
    ->search(['name', 'sku'])
    ->column('name', 'Product', ['sortable' => true])
    ->column('sku', 'SKU', ['width' => '120px'])
    ->column('price', 'Price', ['format' => 'currency', 'sortable' => true])
    ->column('is_active', 'Status', ['format' => 'label'])
    ->button('edit', ['icon' => 'edit', 'modal' => 'edit_product'])
    ->modal('edit_product', 'Edit', 'forms/product.php', ['size' => 'medium'])
    ->newButton('New Product', ['modal' => 'edit_product'])
    ->paginate(25)
    ->render();

Components (17+)

Formatters

Theming

6 built-in themes: Indigo, Ocean, Forest, Rose, Amber, Slate — each with light & dark mode.

/* Custom theme — just override variables */
.gk-root {
    --gk-primary: #8b5cf6;
    --gk-bg: #1a1a2e;
}

Structure

gridkit/
├── autoload.php           # PSR-4 Autoloader
├── skeleton.php           # Starting point for new projects
├── GRIDKIT_SKILL.md       # Agent Skill for AI assistants
├── src/                   # PHP components
├── css/
│   ├── gridkit.css        # Core styles
│   └── themes.css         # All themes + dark mode
├── js/
│   └── gridkit.js         # Vanilla JS (event delegation)
└── demo/
    └── index.php          # Live demo of all components

Requirements

• PHP 8.2+
• MySQLi (for DB queries)
• Modern browser (CSS Custom Properties, Fetch API)

Links

• Live Demo: gridkit.ssi.at/demo
• Landing Page: gridkit.ssi.at
• Agent Skill: GRIDKIT_SKILL.md

License

MIT — Martin Mollay