Code your Laravel web site quicker with Stylify CSS-like utilities. Do not research CSS framework. Deal with coding.
Introduction
Stylify is a library that makes use of CSS-like selectors to generate optimized utility-first CSS primarily based on what you write.
- ✨ CSS-like selectors
- 💎 No framework to check
- 💡 Much less time spent in docs
- 🧰 Mangled & Extraordinarily small CSS
- 🤘 No purge wanted
- 🚀 Parts, Variables, Customized selectors
- 📦 It might probably generate a number of CSS bundles
Set up
This text makes use of Laravel with Vite. For older variations with Webpack, try this information.
Set up Stylify utilizing CLI:
npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin
Add the next configuration into vite.config.js:
import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';
const stylifyPlugin = stylifyVite({
bundles: [{ files: ['resources/views/**/*.blade.php'], outputFile: 'sources/css/stylify.css' }],
compiler: {
variables: {},
macros: {},
parts: {},
}
});
export default defineConfig(() => ({
plugins: [
stylifyPlugin,
laravel({
input: ['resources/js/app.js', 'resources/css/stylify.css'],
refresh: true,
}),
],
}));
Add the trail to sources/css/stylify.css into the template:
<head>
@vite('sources/css/stylify.css')
</head>
In case you outline multiple bundle in stylifyVite plugin, ensure to import generated CSS recordsdata on right pages.
Utilization
Stylify syntax is just like CSS. You simply write _ as a substitute of an area and ^ as a substitute of a quote.
So if we edit the sources/views/welcome.blade.php:
<div class="text-align:heart font-size:48px shade:blue">Stylify + Laravel = 🚀</div>
In manufacturing, you’ll get optimized CSS and mangled HTML:
<div class="a b c">Stylify + Laravel = 🚀</div>
.a{text-align:heart}
.b{font-size:48px}
.c{shade:blue}
Integration instance
You can too try our Laravel integration instance on Github.
Configuration
The examples above do not embody every little thing Stylify can do:
Be at liberty to try the docs to be taught extra 💎.
