I made significant progress documenting my preset and I will try to make it work for other presets in the future

[StarLederer]

I am building a Tailwind-inspired preset with a couple of improvements. I want it to be easy for Tailwind or preset-wind users to switch to it so I am building a visual and interactive documentation. I also want to add other presets to this documentation when it is done so UnoCSS ecosystem can be more explorable.

You can find the page from the screenshot here.

I absolutely love UnoCSS for making something like this not only possible, but easy! The UnoCSS team has done an absolutely outstading job building the library.

[UltraCakeBakery]

This looks good! Light theme and mobile seem to not yet have been optimized, but your screenshot looks nice. Well done!

[StarLederer]

Thank you! There are indeed things that need to be done for mobile (mostly hamburger menus) but I thought I had done a pretty good job for light mode... Could you please explain why you think it needs more work?

[UltraCakeBakery]

Im still on mobile till I get home, so take this with a grain of salt;

There is a low amount of contrast between the background and text. I would keep the background colors white, text black. Even though it goes against my morals I will even suggest keeping the syntax highlights dark when using light theme.

[StarLederer]

I was considering making examples and code blocks follow their own color schemes (examples actually do, they have a different hue) but I figured people would prefer the color scheme that they choose to be applied everywhere. I've seen code blocks with a separate color-scheme setting before, might also try that if it is as easy to implement as i am thinking right now

[SnowingFox]

The code font is a little ugly.

[StarLederer]

The code blocks do not use any special font, the whole website just uses Assistant. Do you have any recommendations?

[UltraCakeBakery]

Maybe use the default one from vscode. Most frontend people are just used to seeing that one everywhere nowadays.

[StarLederer]

That sounds pretty obvious now that I think about it. Thanks for the suggestion, applied it right away (replying after two hours because I also set up CD for it which i am bad at 😅)

[StarLederer]

I changed the documentation API to use markdown instead of my own half-baked rendering functions and added links and inline code snippets to Windblade docs.

I don't have too many things left to implement and want to try documenting @unocss/preset-mini with this soon (only 1-2 rules, just to try).

[StarLederer]

Implemented mobile support, mostly because @UltraCakeBakery pointed out the need for it 😅.

I was going to go for container queries at first but ended up doing everything with ResizeObservers instead. No idea what implications this has on the performance but it makes the UI extremely robust. Unlike container queries, with this approach I can use exact proportions (e.g. navigation is flattened when container is 4x the size) and be certain about any content width (e.g headerbar menu is flattened when container is 1.4 times the size, no matter how many items I might add in the future). Wanted to share this because I think it might be very interesting to look into.

[antfu]

Looks great. Awesome work! I'd be happy to include it in the readme as a community preset, would you like to draft a PR?

[SnowingFox]

Looks great. Awesome work! I'd be happy to include it in the readme as a community preset, would you like to draft a PR?

i think we can make a normal docs like tailwindcss. if we have normal docs like tailwind for usage reference, it will be more friendly for users.

[StarLederer]

Thank you so much! It is really nice hearing this from you because you are a bit of a hero of mine 😅

The preset is still in an experimental state and there are a couple of things that work inconsistently without any warnings (brackets only work for size rules and are a little broken), as well as things that probably could be refactored a lot. I really appreciate people using and testing out the preset right now but I cannot yet recommend using it in a real project unless people are willing to fix things themselves. If you still think I should add this to community presets I'll happily draft a PR but I'd put a warning next to it.

[StarLederer]

I think we can make a normal docs like tailwindcss.

That is exactly what I think too. The interactive docs take a little getting used to and even then you still kind of have to just guess what rules there are and hope it finds something. There is also not a coherent and attractive landing page that explains how UnoCSS helps developers where Tailwind can't (an example of this is actually my landing page, except it needs to be better visually and explain UnoCSS concepts). These changes would unlock UnoCSS for many more people that know about it now.

I actually already have been working on a solution to this, I want to try turning Windblade's documentation into a community preset hub similar to Nuxt modules page to boost discoverability of UnoCSS presets and make it easier to learn them. The hub could also easily host a landing page for UnoCSS newcomers or even reused as the official UnoCSS homepage. I'll open a separate RFC for this where I'll explain this in more detail.

[SnowingFox]

That is exactly what I think too...

I'm looking forward to your RFC

[StarLederer]

Opened it. #2236