🎨 Minimal Vite + UnoCSS integration with Kirby

Johann Schopplich

Last update: Dec 2, 2022

Related tags

Overview

Kirby Vite UnoCSS Kit

A powerful and performant integration of Vite, UnoCSS and Kirby. This project seeks to provide a best practice that combines these three solutions while focusing on the development experience.

Key Features

⚡️ Vite – HMR and all the bells and whistles
📑 Module system inspired by Nuxt.js
💡 On-demand template loading
🪄 Page reload on snippet/template changes
🎨 UnoCSS – on-demand atomic CSS engine similar to Tailwind CSS
🔍 SEO-friendly defaults
🦾 TypeScript, of course

Why UnoCSS

tl;dr: Write your CSS like you prefer to and pull in only the utilities you need on top.

Let me cite Anthony Fu:

UnoCSS is an atomic-CSS engine instead of a framework. Everything is designed with flexibility and performance in mind. In UnoCSS, there are no core utilities; all functionalities are provided via presets.

By default, UnoCSS applies the default preset. Which provides a common superset of the popular utilities-first framework, including Tailwind CSS, Windi CSS, Bootstrap, Tachyons, etc.

For example, for this kit only the following utilities are generated:

.box{padding:1rem;margin-left:auto;margin-right:auto;--un-bg-opacity:1;background-color:rgba(244,244,245,var(--un-bg-opacity));border-radius:0.375rem;--un-shadow-color:0,0,0;--un-shadow:0 1px 2px 0 rgba(var(--un-shadow-color), 0.05);-webkit-box-shadow:var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow);box-shadow:var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow);max-width:7xl;}
.px-4{padding-left:1rem;padding-right:1rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.mb-4{margin-bottom:1rem;}
.max-w-screen-md{max-width:768px;}

You may also want to give this blog post a read Reimagine Atomic CSS for the story behind.

Installation

Duplicate the .env.example as .env and optionally adapt its values depending on your environment:

cp .env.example .env

Install the required dependencies:

npm install
composer install

Configuration

To add custom rules or shortcuts, edit the unocss.config.ts.

For example, this project already defines a box class via a shortcut:

shortcuts: {
  'box': 'max-w-7xl mx-auto bg-gray-100 rounded-md shadow-sm p-4'
}

Usage

Development

Build assets and watch for changes accordingly:

npm run dev

Run the PHP built-in web server or use a development web server of your choice (like Laravel Valet).

composer start

Production

Build the frontend assets (CSS & JS files):

npm run build

If you have caching enabled, make sure to wipe the cache after each build:

rm -rf storage/cache/<your-website>

Deployment

Deploy whole repository on your server.
Duplicate .env.example as .env.
Install dependencies:
- npm install
- composer install
Build frontend assets:
- npm run build
Point your web server to the public folder.
For Apache web servers: Some hosting environments require to uncomment RewriteBase / in .htaccess to make site links work.

License

MIT

You might also like...

A minimal package to help you make your laravel application cleaner and faster.

Laravel Widgetize 🎀 🎀 "cleaner code" ➕ "easy caching" 🎀 🎀 Built with ❤️ for every smart laravel developer 🔦 Introduction What is a widget object

883 Dec 28, 2022

A minimal boilerplate theme for WordPress using TailwindCSS, with PostCSS and Laravel Mix.

74 Nov 25, 2022

This is a white minimal wordpress theme

_s Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turnin

3 Oct 7, 2021

Minimal Laravel authentication scaffolding with Blade and Tailwind.

Introduction Breeze provides a minimal and simple starting point for building a Laravel application with authentication. Styled with Tailwind, Breeze

2.1k Jan 3, 2023

A minimal library that defines primitive building blocks of PHP code.

Jungi Common A minimal library that defines primitive building blocks of PHP code. It combines the advantages of functional and object-oriented progra

28 Jul 15, 2022

A Simple MOFH clientarea for free like infinityfree and minimal functionality

Project Hustal Project Hustal is a free of cost MOFH clientarea for account management and support services. It have easy to use features and a much l

10 Feb 15, 2022

A minimal library that defines primitive building blocks of PHP code.

A minimal library that defines primitive building blocks of PHP code. It combines the advantages of functional and object-oriented programming. All of this makes code easier to understand and less prone to errors.

28 Jul 15, 2022

Personal Knowledge Management. Use branch "minimal change" to deploy as laravel package.

Knowfox Knowfox is my Personal Knowledge Management system. Having been an keen Evernote user since 2012, I finally got around to taking my precious n

180 Dec 28, 2022

A minimal package that helps you login with any password on local environments

Laravel Anypass Built with ❤️ for every "lazy" laravel developer ;) It is always painful to remember and type in the correct password in the login for

208 Jan 1, 2023

Minimal PHP MVC Framework that is eternally broken.

▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ██ ▄▄▄ █ ▄▄▀█ ▄▄██▄██ ▄▀██▄██ ▄▄▀█ ▄▄▀ ██ ███ █ ▄▄▀█▄▄▀██ ▄█ █ ██ ▄█ ▀▀ █ ██ ██ ▀▀▀ █▄▄▄▄█▄▄▄█▄▄▄█▄▄██▄▄▄█▄██▄█

3 Dec 16, 2021

Simple and minimal yet another PHP 7 Framework

DemirApp Minimal PHP Framework Introduction Simple and minimal yet another PHP 7 Framework Features Simple routing Simple container (Dependency Inject

12 Sep 19, 2022

Minimal GraphQL client for Laravel.

Minimal GraphQL Laravel Client Minimal GraphQL client for Laravel. Requirements Composer 2+ Installation Install Package (Composer 2+) composer requir

20 Dec 7, 2022

🧬 Nano is a zero-config, no skeleton, minimal Hyperf distribution that allows you to quickly build a Hyperf application with just a single PHP file.

Nano is a zero-config, no skeleton, minimal Hyperf distribution that allows you to quickly build a Hyperf application with just a single PHP file.

273 Jan 4, 2023

Comments

Syntax Highlighting for UnoCSS in VS Code?

Hi, thank you very much for this template. The only thing i missed, is the syntax highlighting for unocss inside my .php files. Do you find a way to get this working without breaking the php syntax?

opened by niklasgrewe 2