[HexDecOctBin]

What are the best lightweight CSS UI libraries containing widgets like tabs, trees, etc.? I don't have webdev experience (only GTK, etc.), but I need to write a web dashboard. I tried looking around but the only alternatives seem to be either bloated JS frameworks or abandoned experiments.

[lelanthran]

I am using this in production!: https://khang-nd.github.io/7.css/

Of course, it's only for my own invoicing/crm system. I started on replacing the look and feel of everything with a flat more modern/less user-friendly equivalent by downloading the static css and modifying it to look like material UI designs.

[nonethewiser]

Oh wow, I really love this. PHPBB also comes to mind for this sort of style. https://www.phpbb.com/community/viewforum.php?f=551

Is there a name for this style? Im also trying to pinpoint the defining characteristics. The thing that stand out to me are:

- 3d-ish buttons

- gradients (headers, buttons, etc)

- not much whitespace between text

- small text

[woodrowbarlow]

that style was prominent just as skewmorphism started to fall out of fashion and "web 2.0" was just becoming a buzzword.

[HexDecOctBin]

This looks nice, thanks!

[dylan604]

How invested in CSS do you want to be? If you're just wanting to include someone else's .css file and then assign classes where needed, that's one way to go. However, CSS isn't as daunting as many people make it out to be for the vast majority of a user's needs--adding colors, borders, padding/margin, and other basic styling. Looking to use CSS for layout is where things can get "interesting", sometimes challenging, and sometimes arghhhh!

I've hand written the CSS for all of the sites I've worked on, and the CSS is smaller than some all encompassing library. Plus, I'm much better at CSS. But I decided I wanted to invest that effort. No shame if you don't

[grimgrin]

no suggestions in this reply, nor can I speak to if this is a good or bad idea, but you may like to learn about "classless css frameworks", basically just targeting the html5 semantics

https://github.com/dbohdan/classless-css

also, https://github.com/troxler/awesome-css-frameworks

others may give you a _real_ recommendation. cheers

[nonethewiser]

Yup this is the place to start if you dont want to have to learn something new. Doesn't get you too far but it's great bang for your buck.

[HexDecOctBin]

Thanks, I found this[0] which looks somewhat promising

[0]: http://classless.de

[FrontAid]

Dashboards, tabs, trees, ... usually require at least some JavaScript to work properly. For some components, you may be able to use hacks around that. But I would generally not recommend that outside of experimentation. So a pure CSS framework is not going to work. It seems that you are not using a frontend framework like Vue.js. So I would recommend a library using web components for the interactivity. One good option is Shoelace [1] and there are a couple of others, too [2]. Take a look at the ones with the checkmark in the "W" column for libraries with web components.

[1] https://shoelace.style/

[2] https://frontaid.ch/web/ui/libraries.html

[nonethewiser]

I suppose its not the most lightweight, and it's considered outdated by many but I actually think Bootstrap is great for your use case.

It uses classes to style html inline and looks pretty good. The downside is it gives a fairly generic look but I don't think you should be too worried about that.

Tailwind has largely replaced it because it offers more flexibility. You use utility classes to write the css (add padding, change color, etc.) and isnt as opinionated as bootstrap. But I dont think you want that.

If you really are going for lightweight and simple you should checkout classless css which only uses html to style things. Nothing needed from you other than including the css sheet. https://github.com/dbohdan/classless-css

[oorza]

Tailwind might not be the most perfect fit, but it's "just" CSS.

[CharlesW]

And Tailwind v4 is notably better than v3 in terms of being "CSS first": https://tailwindcss.com/blog/tailwindcss-v4