🔧 Stylify CSS: Code your Laravel website faster with CSS-like utilities
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
Code your Laravel website faster with Stylify CSS-like utilities. Don't study CSS framework. Focus on coding.
Introduction
Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.
- ✨ CSS-like selectors
- 💎 No framework to study
- 💡 Less time spent in docs
- 🧰 Mangled & Extremely small CSS
- 🤘 No purge needed
- 🚀 Components, Variables, Custom selectors
- 📦 It can generate multiple CSS bundles
Installation
This article uses Laravel with Vite. For older versions with Webpack, check out this guide.
Install Stylify using CLI:
npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin
Add the following configuration into vite.config.js:
import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';
const stylifyPlugin = stylifyVite({
// You can define multiple bundles, This example uses only one for simplicity
bundles: [{ files: ['resources/views/**/*.blade.php'], outputFile: 'resources/css/stylify.css' }],
// Optional - https://stylifycss.com/docs/unplugin
compiler: {
// https://stylifycss.com/docs/stylify/compiler#variables
variables: {},
// https://stylifycss.com/docs/stylify/compiler#macros
macros: {},
// https://stylifycss.com/docs/stylify/compiler#components
components: {},
// ...
}
});
export default defineConfig(() => ({
plugins: [
stylifyPlugin,
laravel({
// Add path to generated files
input: ['resources/js/app.js', 'resources/css/stylify.css'],
refresh: true,
}),
],
}));
Add the path to resources/css/stylify.css into the template:
<head>
@vite('resources/css/stylify.css')
</head>
In case you define more than one bundle in stylifyVite plugin, make sure to import generated CSS files on correct pages.
Usage
Stylify syntax is similar to CSS. You just write _ instead of a space and ^ instead of a quote.
So if we edit the resources/views/welcome.blade.php:
<div class="text-align:center font-size:48px color:blue">Stylify + Laravel = 🚀</div>
In production, you will get optimized CSS and mangled HTML:
<div class="a b c">Stylify + Laravel = 🚀</div>
.a{text-align:center}
.b{font-size:48px}
.c{color:blue}
Integration example
You can also check out our Laravel integration example on Github.
Configuration
The examples above don't include everything Stylify can do:
- Define components
- Add custom selectors
- Configure your macros like
ml:20pxfor margin-left - Define custom screens
- You can map nested files in the template
- And a lot more
Feel free to check out the docs to learn more 💎.
...
🔧 Laravel-10 Laravel-11 comparison, changes
📈 23.13 Punkte
🔧 Programmierung
🔧 Laravel: Pengenalan Fitur Reverb Di Laravel
📈 23.13 Punkte
🔧 Programmierung
🎥 Laravel 11 Crash Course - Laravel in 1 hour
📈 23.13 Punkte
🎥 Video | Youtube
🔧 update laravel 8 to laravel 11
📈 23.13 Punkte
🔧 Programmierung