I am so hoping for a CSS-only (or at least CSS-mostly) library to come along, especially one that is fairly complete, designed for the long term, and usable for (boring) large applications and data-dense tables. I do not need a full JavaScript "framework", I have a React app (in ClojureScript) and I'm fine, thank you.
I've been living with Semantic UI which got many things right, but has been abandoned for quite a while now.
Most things that capture the crowd attention are humongous piles of JavaScript with a bazillion dependencies, that will likely be out of fashion in a year or two.
The reason the ecosystem is focusing on framework-specific component libraries is because people want out-of-the-box components that do things, not just ones that look nice. That's very difficult to deliver without an opinionated framework; specifically you'll massively sacrifice developer experience. I feel much more comfortable about using libraries like Elastic UI than I ever did using something like jQuery-ui or Bootstraps's JS extensions.
Bootstrap is not designed for complex data-dense applications, doesn't have all the components needed in complex forms and its tables aren't quite cutting it for me.
Tailwind UI has been on my radar for a while now. There are two reasons why I didn't dive into it yet:
* a very verbose approach to describing what you want: closer to describing how it should look like rather than what it is. That would mean a big rework of my application (quick check shows around 1200 places where Semantic UI constructs are used) or writing a "layer" that maps my app's semantic usage to Tailwind UI promitives.
* Tailwind is still JavaScript-heavy.
Here's an excerpt from my discussion with Talwind UI founder, which will perhaps help understand my point of view. I was describing something I would happily pay a significant subscription fee for:
"This actually isn't far from the truth, because I had actually landed on the Tailwind UI site first, without knowing about Tailwind CSS, and this is exactly what I had thought the deal was. Later I understood that Tailwind UI is a bunch of "snippets", basically examples of how to use Tailwind CSS, which I think is indeed a problematic value proposition.
However: to be honest, when I looked at the amount of low-level class information I would need to put in my source, I was not impressed. I would much rather use the Semantic-UI approach. And perhaps this is a hint for you: provide a higher-level interface, that way you won't end up with "snippets", but with maintained components, which changes the whole pricing equation.
In other words, to see what I would immediately pay for, look at Semantic UI. No need to "update snippets" there. I would pay for a CSS library that lets me build applications on a level similar to Semantic UI, with the ability to customize or theme components.
And it's not about an "installable dependency", either — in fact I fight very hard not to depend on any npm packages, and I had to build my own dockerized build system for Semantic UI because of their approach to building. What I'd like to get is basically a tarball which I could automatically unpack, drop in a config file and do a "make" to get the CSS deliverables.
I think there is a difference in thinking here: I am an application developer and looking from the outside I see the "web design community" as a bit of an echo chamber, with similar ideas being implemented over and over, and no clear path to revenue. At the same time, I can't buy the tools I need. I look at libraries like Bootstrap, Bulma, or Tailwind CSS, and I see the same thing: low-level tools for "web designers". It's too low-level! I don't want to "build bespoke designs without any annoying opinionated styles you have to fight to override" — I actually want a well-designed set of components (opinionated is good!) so that I can get on with delivering the functionality my customers actually pay for. So, forms, tables, menus, tabs, popups.
Let's look into my situation: I am not a designer and I don't have time for fiddling with details. What are my options? I can't use these low-level tools, not enough time. I can hire a designer: it is expensive, it's really difficult to find one that will understand what I need, work closely with the code I have, and be generally good. Or I can use a more high-level tool, which is how I ended up with Semantic UI. It's not that I'm crazy about the whole "semantic naming" aspect of it, it was just a well-designed and complete set of components that I could use immediately.
I don't know how big this market is, but I have this feeling that there is a big hole right now. Here's another guy like me: https://actualbudget.com/#features — I actually asked them how he got the nice-looking dense editable tables. He implemented them himself."
I'm using Tabler for my latest project and love it so far. There are some caveats though:
- It's way too verbose sometimes. There are numerous instances where I would have done just a single tag and Tabler has two or three of them nested.
- Some similar components are implemented in way different ways. Compare .status-indicator which takes color as a dedicated class (`.status-green`, for example) and .badge, which uses background-color helpers (e. g. `.bg-green`).
- Secondary buttons are .btn without additional class, unlike .btn.btn-secondary in Bootstrap (which Tabler is based on). If you add .btn-secondary, you'll get a weird out-of-style button. Things get more difficult when you use a Bootstrap-based library for some interactive elements (I'm using Sveltestrap) and it adds .btn-secondary by default.
- Some layout bugs get introduced and fixed, nothing you can't patch out though. Hope it will get better as it matures.
Overall it's neat though, and for prototyping things quickly I'd say it's the best you can get now.
Tailwind's approach is really great. A base of low level CSS building blocks, and a higher level component library where you basically just copy and paste the code with the CSS, and it really is just all HTML and CSS. I'm a big fan.
their tagline seems to indicate so "The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics."
"EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1" - so yes, it appears this is not usable for anything serious at all.
I’m coming around to a front end philosophy lately that shuns “all-in-one” component libraries entirely, because it’s a fantasy that never really plays out in reality. Take just tables for example; every component library has their own table implementation, and they all fall short in some fashion. Either they lack sufficient filtering, or their rendering performance nosedives with large datasets, or they enforce some kind of data structure that doesn’t work for you. So you end up pulling in a specialized table library and theming it to fit your needs. Now you have two redundant table components in your codebase, and it can be really unclear to new contributors which should be used where and why. Repeat ad nauseum for dropdowns, modals, etc. and all of the sudden the vast majority of your initial component library choice becomes dead weight.
Better to build your own simple primitives using Tailwind, (buttons, text, popovers, cards, and the like), then selectively pull in specialized components that solve one single problem thouroughly, and have widespread OSS support and usage.
The tree view and data grid components don't seem to support lazy loading elements, which is particularly disappointing given how frequently I end up implementing that functionality in front of ElasticSearch and Solar.
Apologies if I'm overlooking something that simply isn't documented prominently. (FWIW I do see the pagination support on the grid, but I'm looking for fluid vertical and horizontal scrolling)
I was hoping it would use something akin to openai or SHEX to describe the data inputs and outputs for components. Instead, it as others say, another React component library that uses design tokens.
