Stylify

Stylify uses CSS-like selectors to generate optimized utility-first #css 💎.
Created with ❤️ by @8machy.

#stylifycss

Discord chat 👉 💬

[Stylify @stylifycss]

Headless Components 🚀

Speed up your development with easily editable Copy&Paste, Headless Components 🚀

https://t.co/vdiZ9gj46T

✅Forms
✅Buttons
✅Switches
✅Grids
✅Dialogs
✅A lot more

#stylifycss #css #webdesign #javascript #reactjs #vuejs #ux #code #coding #programming

[Stylify @stylifycss]

Drop or not to drop CJS support?

#javascript #css #html

[Stylify @stylifycss]

@inbyt Hi and thanks for mentioning Stylify!, Stylify is still developed. But since there is a native css syntax the development and releases doesn't have to be that frequent.

0.7.0 was released a week ago

[夏猫@がんばらない @6jz]

mika-f starred stylify/packages on Github https://t.co/xieJtJEINR

[jay-es | shindy @shindy_JP]

class 属性に "width:640px" などを書いて CSS を生成するライブラリ。production ではクラス名が2文字とかになるのでインラインスタイルより容量が減る / “Code your website faster with CSS-like utilities | Stylify CSS” https://t.co/BlEM4ccyHK

[Ryan Florence @ryanflorence]

After 26 years of CSS experience, I'll take the left every single time.

[Stylify @stylifycss]

@t3dotgg But BEM has such a beautiful selectors...

class="
carousel__item
carousel__item--hp
carousel__item--hp-larger-x-padding
carousel__item--hp-red
carousel__item--hp-without-bottom-margin
"

[Vladimír Macháček @8machy]

1/3
Did you know that:

there is around 694 CSS properties you can use to style your website: Chrome, Mozila, Opera, Safari and Edge 🤯.

@stylifycss can use them all in the latest 0.6.2 🚀.

https://t.co/WYWwLQJJ4Q

#css #html #code

[Vladimír Macháček @8machy]

1/2
CSS background-clip:text tip👇

If you plan to use background-clip, then it must be set after the background-color. Otherwise it won't work. In this particular case, the order of properties is important.

Took me a while to debug it in @stylifycss.

#css #html #javascript #ui

[Stylify @stylifycss]

Stylify 0.6.1 has just been released.

⚒️ Fixed broken types in stylify/unplugin
⚒️ Less invasive markup mangling
⚒️ Various bugs fixed

Release: https://t.co/Z2ZeHwSzPn
Web: https://t.co/tprXDGwBIt

#stylifycss #css #javascript #html

[Vladimír Macháček @8machy]

@surjithctly @stylifycss @laravelphp @symfony @vuejs @reactjs 3/3
"But these tools have a reason to exists."
"Nah, you can handle the reactivity and contextual escaping of variables on your own. It's just, months of work and a lot of lost hair." 😂

[Vladimír Macháček @8machy]

@surjithctly @stylifycss 2/3
The best to explain this to other devs is, that removing Talwind or @stylifycss is like if you remove @laravelphp, @symfony, @vuejs or @reactjs from the project, grab popcorn and then just sit and watch to see their pain while coding and optimizing everything from scratch😂

[Vladimír Macháček @8machy]

@surjithctly 1/3
It's hard to explain how useful Utility-First CSS is to someone, who work on small blog and never even tried them
I mean, pure CSS is always the best/most future-proof choice, but working with utility libraries like Tailwind or @stylifycss even on a blog can be a huge relief

[Michael Hladky @Michael_Hladky]

If you like inline styles you should have a look at @stylifycss
😉😇😅

[Stylify @stylifycss]

@Michael_Hladky Thanks for mentioning ❤️. However, the motto is more like "If you like CSS-like syntax and don't want to study random shortcuts, you should try @stylifycss".

👉 https://t.co/tprXDGwBIt

[Stylify @stylifycss]

This version is already used on https://t.co/tprXDGwBIt 🚀.

And it seems that the 0.6.x versions could be a candidate for the first major release 1.0🤟

Now the 1.0 https://t.co/He7lE9hYIJ

Any ideas what to add/improve?

#stylifycss #code #css #html #javascript #react #vuejs

[Stylify @stylifycss]

(1/4)
Stylify 0.6 has just been released 🎉

👉 https://t.co/oCVSNnf8B4

✅CSS variables enabled by default
✅Easier and united configuration for utilities, components, and custom selectors
✅Perf improvements
✅More intuitive mangling configuration

#stylifycss #code #javascript

[Stylify @stylifycss]

(3/4)
Macros, components, helpers now receive compiler instance as the this object. It simplifies the usage of configured helpers, variables and others

#stylifycss #code #css #html #javascript

[Vladimír Macháček @8machy]

Bundling production build for @stylifycss monorepo:

🔥 @oven_sh => 0.4-0.8 s
Node.js => 28-30 s

Build and watch works fine with (using ESbuild).

Seems only Jest has some problems because of some async operations.

#stylifycss #bunjs #css #code #javascript #webdev

[Stylify @stylifycss]

Stylify got mentioned in @ahrefs blog post by @JoshuaCHardwick about Twitter Brand profiles case study.

👉 Check it out https://t.co/yMkd6dz5a5

Have a brand? CREATE A HASHTAG FOR IT 🤟.

#stylifycss #ahrefs #seo #webdev #Marketing