Skip to content

πŸ’Ž Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write πŸ’Ž.

License

Notifications You must be signed in to change notification settings

stylify/packages

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Stylify logo


Chat Twitter Follow GitHub Org's stars GitHub
GitHub Workflow Status (branch) GitHub issues GitHub commit activity GitHub release (latest by date) GitHub contributors

πŸ’Ž Introduction

Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS dynamically based on what you write.
Don't study framework. Focus on coding.

Stylify preview

⚑ Why Stylify instead of CSS or inline styles?

Because of fewer CSS headaches, faster coding and extremely optimized output.

✨ 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 like color: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

πŸš€ Integrations

Start using Stylify with your favorite tool in a minute.

JavaScript

PHP

πŸ”₯ Prepared Copy&Paste Headless Components

πŸ“¦ Packages

Project Status Description
bundler bundler-status A flexible CSS bundler.
stylify stylify-status Core package. Generates CSS and minifies selectors.

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 >= 18 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

πŸ‘· Contributing

Please make sure to read the Contributing Guide before making a pull request.

πŸ“ License

MIT

Copyright (c) 2021-present, Vladimír MachÑček

About

πŸ’Ž Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write πŸ’Ž.

Topics

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •