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

This branch is 1 commit ahead of, 1 commit behind master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a5910ad Β· Apr 12, 2024
Apr 11, 2024
Sep 4, 2023
Apr 12, 2024
Apr 11, 2024
May 28, 2023
Apr 11, 2024
Jan 1, 2021
Apr 18, 2023
Apr 11, 2024
Jan 1, 2021
Sep 4, 2023
Sep 23, 2021
Apr 11, 2024
Sep 28, 2022
Apr 11, 2024
Apr 11, 2024
Nov 13, 2022
Apr 11, 2024
Apr 12, 2024
Apr 12, 2024
Apr 23, 2023
Nov 9, 2022
May 21, 2023

Repository files navigation


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

πŸ‘· Contributing

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

πŸ“ License

MIT

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