I think it's valiant to try to do all of this with semantic HTML elements to achieve the right effects, and try to go for a "classless CSS" paradigm to get a nice looking and functional web app (as a fan of classless CSS myself). But scrolling through the component catalog, it unfortunately feels like it's all over the place and inconsistent with semantic vs basic elements, data tags vs aria attributes, and sprinkling some css classes over some of it.

I do very much like that by introducing aria attributes, the CSS reacts to it and styles it appropriately. As opposed to a full-blown react component library which does all of that for you. It would be a good exercise for developers to think aria-first and let the library just help with styling.

Lastly, I think the best part is that this component library has a native sidebar. So many of these I see and they have a nice web page which showcases all the components and I want to replicate their layout and nav/sidebars but they only focus on smaller re-usable components and not the layout. So that's a nice touch, I think. And, as someone who keeps an eye on but doesn't do a lot of frontend, the fact that a sidebar is an aside > nav > ul next to a main just makes so much sense and doesn't have a lot of cruft around it.

The motivating blog post[1] linked from the front page is probably going to generate a more interesting discussion than the framework itself.

As someone who has to deal with both angular and nextjs for different (but overlapping) stacks at work, I find myself increasingly sympathetic to this viewpoint.

[1]: https://nadh.in/blog/javascript-ecosystem-software-developme...

This site got me going. Almost had whiplash when I tapped a link and the page loaded literally instantly. I've almost forgotten that that's possible on the internet. I'm not a web dev, but I'm inspired to get into it now because of this site.

Why do all the UI component libraries always feature an accordion (something i can build myself in 5 minutes and very rarely need), but always omit a date picker / calendar component (something that is needed almost in every corporate web form and really requires a lot of effort to build)?

This has the simplicity I thought I was going to get from DaisyUI but didn’t. Pairing this with Datastar seems like a super powerful combination that leans on actual web standards, not “ecosystems”.

There’s a ton of semantic drop in css libraries similar to this. Love seeing new ones. Quality varies wildly but this site shows 50+ drop in stylesheets for those writing semantic html: https://dohliam.github.io/dropin-minimal-css/

5 day old repo, 2000 stars on GitHub, 400 total weekly downloads on npm. Frontpage of hacker news with a bunch of weird comments. Moderation has been lacking recently.

Thank you testing this on older browsers before releasing. This is truly an ultra minimal library - https://ibb.co/DDGmLYdg, https://ibb.co/h1WQG3GK

The "preview" and "code" buttons in the components break the "alt+arrow" bindings to go back to the previous page. Instead it just alternates between "preview" and "code".

This is of special interest to me, because man do I hate UI frameworks with tons of external dependencies. Looking at you, Bootstrap.

Was looking at the spinner component for a few seconds thinking "that's a bit slow"...

It’s a bit odd that the accordion uses details but the dropdowns require a custom element.

I know that guy from listmonk! I always thought the frontend could use some love and planned to spend a couple of days on contributing a couple of ideas, but I never came around. Now I know why things are as they are :)

Great work! PicoCSS feels a bit too minimalist at times. This looks like a better balance of lightweight and functional.

Reminds me of what bootstrap [1] was like around a decade ago. It's gotten quite a bit bloated since then though.

1. https://getbootstrap.com/

Surprised that none of the comments here are comparing this to Bootstrap.

Seems pretty unresponsive to me. I'm getting at least half a second of delay before the accordion, drop-down, or switch do anything. Chrome on Windows.

The form component:

https://oat.ink/components/#form

Looks a lot like a raw HTML+CSS framework I made in 2009:

https://alganet.github.io/ghiaweb/ (it has some small glitches, browser widgets changed a lot since 2009).

Particularly the use of the label, fieldset and legend elements as native accessible solutions instead of instrumenting divs. Even the styling and the example resembles it a bit!

https://oat.ink/components/#grid

This is where it falls from grace IMHO. Grid classes are fundamentally non-semantic. I know they're popular and useful, but there must be a better (semantic) way of doing this. I haven't found it yet, but there must be.

Thank you for sharing, I would like to see a navigation/menu component added though as that's required for most websites.

My initial reaction was that I have to use this just because of the buzzword density in the title. But after reading up, it looks like the author was pretty successful in moving the bloat from code to announcement title. I'll give this a try!

Amazing! I recently started building something similar for the same reasons, but more out of frustration rather than out of desire. I'll have to give this one a try and see if it fills the need.

What's with variable names starting with "#" as first character?

Nice job! Clicked tru my obscure mobile firefox and all worked well!

If nothing else, it's refreshing to see nicely modern CSS and JS formatted and laid out in a legible manner. https://github.com/knadh/oat/tree/master/src

No, this is "Oat - Ultra-lightweight, semantic, zero-dependency Javascript UI component library". If it doesn't work without javascript it is not an HTML UI component library.

This looks very very cool. Will definitely look in to using this for more static internal tools!

This is kind of misleading. It says it's an HTML UI library, then it says HTML + CSS, and then it says it also includes JavaScript. Why is this better than, say, DaisyUI?

undefined

The code example doesn't render for me.

People need to stop with these stupid 12 column grids and learn how grid and flex work. Other elements are ok but this is just stupid

Claims no classes but uses data- attributes and also classes (just look at the button example…)

Looks okay, but I don’t see why to use this over something like Marx if all you need is to not have bare browser default styling.

Thank you for this, can’t wait to use. Minimalism at its best.

should call it oatmilk for max exposure

Next:

Oath

Oatly

Ooaut

Oaar

[flagged]

[flagged]

[flagged]

No Datepicker?

This does not even need a LLM skill, just load the whole code up in context, so efficient.