Live data from Hacker News

HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

franken-ui.dev

181–190 of 193 posts

Re: HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

#181
post #171

Earlier quoted context omitted.

> Tailwind and regular CSS are hardly distinct, it's just slightly different names Tailwind: CSS: div { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } Not to mention the Tailwind classNames are compiled to CSS in a build step, where CSS is not compiled, it's written in its native form. They're clearly very different syntaxes and approaches, even though one compiles to the other. The…

That's a very extreme example, and yes, I would just use the bracket syntax in Tailwind because I can see clearly that's not what I want for box-shadow. If I didn't know how box shadow worked, Tailwind made it easier for me to decide by having defaults in the docs that map to the actual CSS.

> a very extreme example

It's not very extreme, it's literally any time you deviate from their prefab - so any truly custom UI. The size of shadow (corner radius, font-size, etc.) at different steps are hard-coded in Tailwind, if you want something else that's up to you. In terms of colors (text, background, etc.) they have a default palette, colors like "slate", etc. but anything else is up to you. So - most brands.

> Tailwind makes box shadow easier

Easier sure: What it does is give you the abstractions "shadow-sm", "shadow-lg", "shadow-none", etc. in fact a total of SEVEN options for shadows.

That teaches you something - how to apply up to seven types of shadows! But you would be a lot more powerful of a developer if you knew how to do more than that. This doesn't teach you a foundation for understanding box-shadow or learning anything more - I think your point about learning is not valid.

I learned CSS in 2003 from Myspace profiles and Dreamweaver - visual IDEs are great for education, so don't get me wrong here, I'm a believer in what I think you're getting at, but Tailwind aint it (for that).

Re: HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

#182

I still wonder why they cannot use tag for a dropdown instead of using JS.

Had the same thought. The one part that would still require js is the exclusive opened element requirement. Still just a simple vanilla event listener.

Re: HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

#183
post #181

Earlier quoted context omitted.

That's a very extreme example, and yes, I would just use the bracket syntax in Tailwind because I can see clearly that's not what I want for box-shadow. If I didn't know how box shadow worked, Tailwind made it easier for me to decide by having defaults in the docs that map to the actual CSS.

> a very extreme example It's not very extreme, it's literally any time you deviate from their prefab - so any truly custom UI. The size of shadow (corner radius, font-size, etc.) at different steps are hard-coded in Tailwind, if you want something else that's up to you. In terms of colors (text, background, etc.) they have a default palette, colors like "slate", etc. but anything else is up to you. So - most brands.…

We've been using visual generators since the introduction of the box-shadow css attribute.

Did you ever actually write them fully by hand?

I for one got better with css after using tailwindcss for a while. So Capricorn2481's statement is true at least for me.

Before I used it for a while I've always gone with component libraries, after that I very rarely did... Aside from work projects that mandate specific libraries, anyway

Re: HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

#184
post #183
post #181

Earlier quoted context omitted.

> a very extreme example It's not very extreme, it's literally any time you deviate from their prefab - so any truly custom UI. The size of shadow (corner radius, font-size, etc.) at different steps are hard-coded in Tailwind, if you want something else that's up to you. In terms of colors (text, background, etc.) they have a default palette, colors like "slate", etc. but anything else is up to you. So - most brands.…

We've been using visual generators since the introduction of the box-shadow css attribute. Did you ever actually write them fully by hand? I for one got better with css after using tailwindcss for a while. So Capricorn2481's statement is true at least for me. Before I used it for a while I've always gone with component libraries, after that I very rarely did... Aside from work projects that mandate specific libraries…

Of course I know CSS shorthand by memory (and most of Tailwind too), and yeah definitely googled "tailwind box shadow" more often (which one is which).

Back in my day we used Bootstrap classes but those guys put -15px margins everywhere so nobody uses their library anymore LOL

Re: HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

#185

"HTML-first" -> Opens the docs and sees a bunch of javascript... Haha. Am I missing something? I was expecting to see ` ` or similar not `ui({ components: { countdown: {hooks: {}, media: false} } })`.

My understanding is that is the configuration part where the library interacts with tailwind to compile the css.

The way you actually use the ui components is by including html snippets in your page

Re: HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

#187
post #184
post #183

Earlier quoted context omitted.

We've been using visual generators since the introduction of the box-shadow css attribute. Did you ever actually write them fully by hand? I for one got better with css after using tailwindcss for a while. So Capricorn2481's statement is true at least for me. Before I used it for a while I've always gone with component libraries, after that I very rarely did... Aside from work projects that mandate specific libraries…

Of course I know CSS shorthand by memory (and most of Tailwind too), and yeah definitely googled "tailwind box shadow" more often (which one is which). Back in my day we used Bootstrap classes but those guys put -15px margins everywhere so nobody uses their library anymore LOL

Knowing the shorthand and actually writing it are different things.

If I get a visual spec from a designer, I'm not going to try out various numbers until it fits the image. I'll either ask them for the specific attribute if their tool allows for that or replicate it with a generator.

And if I'm fully in control myself, I'm going to use a generator too as I'll want it to look a specific way, which is easier to achieve with instantaneous feedback as you get it from a generator such as https://www.cssmatic.com/box-shadow

Re: HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

#188
We just built a JS-frontend-framework-agnostic library because we have Vue, React, and Svelte. We found that the trade off was that it worked poorly in all of them and we couldn’t take advantage of their individual strengths.

We’ve since switched to React-based and found that, because support for React is so high, they can be incorporated elsewhere more seamlessly than “agnostic” components.

Re: HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

#189
post #183
post #181

Earlier quoted context omitted.

> a very extreme example It's not very extreme, it's literally any time you deviate from their prefab - so any truly custom UI. The size of shadow (corner radius, font-size, etc.) at different steps are hard-coded in Tailwind, if you want something else that's up to you. In terms of colors (text, background, etc.) they have a default palette, colors like "slate", etc. but anything else is up to you. So - most brands.…

We've been using visual generators since the introduction of the box-shadow css attribute. Did you ever actually write them fully by hand? I for one got better with css after using tailwindcss for a while. So Capricorn2481's statement is true at least for me. Before I used it for a while I've always gone with component libraries, after that I very rarely did... Aside from work projects that mandate specific libraries…

| Did you ever actually write them fully by hand?

Absolutely. Have for decades. Still do.

This is why I said Tailwind reminds me of an ORM. If you properly know the underlying technology, it just gets in the way.

And CSS is not just about properties. It's also about inheritance and DOM independence, something tailwind doesn't address.

Re: HTML-first, framework-agnostic implementation of shadcn/UI – franken/UI

#190
I noticed on difference between franken-ui.dev and ui.shadcn.com

The navigation between the different exmaples on https://www.franken-ui.dev/examples/mail refreshed the website and did not restore the scroll position.

While on https://ui.shadcn.com/examples/mail, switching between the different examples keeps the scroll position and does not refresh the page.

Post reply on HN