Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/stylify/packages

💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎.
https://github.com/stylify/packages

astrobuild atomic-css css css-framework frontend functional-css javascript nextjs nodejs nuxt nuxt-module nuxtjs php postcss react ssr typescript utility-classes vue webpack

Last synced: 6 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/stylify/packages
Owner: stylify
License: mit
Created: 2020-12-25T15:11:45.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2024-04-12T20:11:28.000Z (9 months ago)
Last Synced: 2025-01-08T00:09:04.761Z (13 days ago)
Topics: astrobuild, atomic-css, css, css-framework, frontend, functional-css, javascript, nextjs, nodejs, nuxt, nuxt-module, nuxtjs, php, postcss, react, ssr, typescript, utility-classes, vue, webpack
Language: TypeScript
Homepage: https://stylifycss.com
Size: 7.35 MB
Stars: 428
Watchers: 4
Forks: 9
Open Issues: 28
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md

Awesome Lists containing this project

README

        




	

		

	



































## 💎 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.







## ⚡ Why Stylify instead of CSS or inline styles?

Because of [fewer CSS headaches](https://stylifycss.com/docs/get-started/why-stylify-css#problems-stylify-css-tries-to-solve), [faster coding](https://stylifycss.com/docs/get-started/why-stylify-css#faster-coding) and [extremely optimized output](https://stylifycss.com/docs/get-started/why-stylify-css#output-optimization).

## ✨ Features

- 💎 Define [Variables](https://stylifycss.com/docs/stylify/compiler#variables), [Components](https://stylifycss.com/docs/stylify/compiler#components), [Custom selectors](https://stylifycss.com/docs/stylify/compiler#customselectors)

- 💎 [Add custom macros](https://stylifycss.com/docs/stylify/compiler#macros) like ml:2

- 💎 Variables can be injected into css as CSS variables

- 💎 CSS [variables can differ for each screen](https://stylifycss.com/docs/stylify/compiler#variables)

- 💎 Simplify coding with [helpers](https://stylifycss.com/docs/stylify/compiler#helpers) like `color:lighten(#000,10)`

- 💎 Style any device with dynamic [screens](https://stylifycss.com/docs/stylify/compiler#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](https://stylifycss.com/docs/integrations) 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]][bundler-package]                         | A flexible CSS bundler.                                                              |

| [stylify]             | [![stylify-status]][stylify-package]                         | Core package. Generates CSS and minifies selectors.                                  |

[bundler]: https://github.com/stylify/packages/tree/master/packages/bundler

[bundler-status]: https://img.shields.io/npm/v/@stylify/bundler?color=%2301befe&label=Version&style=for-the-badge

[bundler-package]: https://npmjs.com/package/@stylify/bundler

[stylify]: https://github.com/stylify/packages/tree/master/packages/stylify

[stylify-status]: https://img.shields.io/npm/v/@stylify/stylify?color=%2301befe&label=Version&style=for-the-badge

[stylify-package]: https://npmjs.com/package/@stylify/stylify

## Compatibility

| Environment | Version                                                                                                                                                          | Note                                                                                                          |

|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------|

| Browser     | [ES5-compliant browsers](https://caniuse.com/?search=ES5), [Intersection Observer support](https://caniuse.com/?search=intersection%20observer) 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](https://stylifycss.com/docs/get-started)

- Changelog and release changes: [releases](https://github.com/stylify/packages/releases)

- Have an idea? Found a bug? Feel free to create an [issue](https://github.com/stylify/packages/issues)

## 🤟 Stay In Touch

- Visit Stylify website [https://stylifycss.com](https://stylifycss.com).

- Follow Stylify on [Twitter](https://twitter.com/stylify_dev).

- Join Stylify community on [Discord](https://discord.gg/NuJsk5SMDz).

## 👷 Contributing

Please make sure to read the [Contributing Guide](https://github.com/stylify/packages/blob/master/.github/CODE_OF_CONDUCT.md) before making a pull request.

## 📝 License

[MIT](https://opensource.org/licenses/MIT)

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