KAT Kit

Kirby CMS, Alpine.js and Tailwind CSS starter kit for your next project.
Works with the built-in PHP server. No need to install Valet/Vagrant/MAMP or other tools that complicate the development workflow.

Tools

Vite — for blazing fast frontend development (with live reloading)
Kirby CMS — simple but powerful flat-file CMS
Alpine.js — lightweight JavaScript framework for extending markup behaviour
Tailwind CSS — the most popular utility-first CSS framework

Features refactoring folder structure and media folder aliasing, extra "SEO" and "Code injection" tabs. Includes a fully configured HTML <head>. Highly performant Kirby Cache Driver for pages.

JS folder aliasing to avoid nasty looking imports ../../js/utils/lerp:

{
  '@utils': 'src/js/utils',
  '@components': 'src/js/components',
  '@vendors': 'src/js/vendors'
}

Installation

ℹ︎ For the kit to work correctly, install and configure Composer (PHP package manager), Node.js (>= 12.0.0), and meet Kirby CMS requirements.

Install JavaScript dependencies and Kirby CMS:
_{We recommend using pnpm to free up hard drive space}

  npm run setup

Usage

Development

Start both built-in and Vite dev servers:

  npm run dev

and open localhost:8080 in the browser.

Build

To build the project run:

  npm run build

Preview

To preview the built project run:

  npm run build
  npm run serve

The preview will be available at localhost:8080.

Production

After completing the build step, copy content from project root to a web server.

White Russian, 2022

pi43r/mat-sch