π Introduction
Stylify is a library that uses CSS-like selectors to generate utility-first CSS dynamically based on what you write.
Don't study framework. Focus on coding.
β¨ Features
π Define Variables, Components, Custom selectorsπ? Add custom macros like ml:2π² Variables can be injected into css as CSS variablesπ CSS variables can differ for each screenποΈ? Simplify coding with helpers likecolor:lighten(#000,10)π₯οΈ? Style any device with dynamic screensβ You can mark areas for which CSS should not beπ¦ Split bundles for page/layout/componentπ§° Selectors are minified from long .color:blue to short .aβ¨ No purge needed. CSS is generated only when something is matchedπ Components & Custom selectors are attached to utilities. No duplicated property:valueπͺ? Hooks can modify CSS or output for example wrap it in CSS layersπ Mangled (hidden/unreadable) HTML classes in production (if mangled)π Try it with frameworks like, Next.js, Astro. SolidJS, Qwik Symfony, Nette, LaravelβοΈ? Works with bundlers like Webpack, Rollup, Vite.jsβοΈ? Generated CSS can be used within SCSS, Less, Stylusπ¨ CSS variables can be exported into external file and reused
π¦ Packages
| Project | Status | Description |
|---|---|---|
| astro |  |
Integration for Astro.build |
| bundler |  |
A flexible CSS bundler. |
| nuxt |  |
Module for Nuxt.js Framework v3+. |
| nuxt-module |  |
Module for Nuxt.js Framework v2 < v3. |
| stylify |  |
Core package. Generates CSS and minifies selectors. |
| unplugin |  |
Universal plugin for Vite, Webpack, Rollup and Esbuildn. |
Compatibility
| Environment | Version | Note |
|---|---|---|
| Browser | ES5-compliant browsers, Intersection Observer support is required. | Stylify doesn't need to be included in the browser. All CSS can be pregenerated on server or during a build. |
| Node | >= 14 | In case Stylify will be used during an application build or in an SSR application. |
π‘ Examples, Changelog, Issues
- Live examples and tutorials: documentation
- Changelog and release changes: releases
- Have an idea? Found a bug? Feel free to create an issue
π€ Stay In Touch
- Visit Stylify website https://stylifycss.com.
- Follow Stylify on Twitter.
- Join Stylify community on Discord.
π· Contributing
Please make sure to read the Contributing Guide before making a pull request.
π? License
Copyright (c) 2021-present, VladimΓr MachΓ‘Δ?ek
