Tabler: Free and open source dashboard HTML/CSS framework
github.com
github.com
The title of the OP is not really accurate though. It's not so much a framework but a bunch of customization on top of Bootstrap and some pre-built templates for stuff _like_ dashboards, galleries, forms, etc. The site is more like a kitchen sink demo and documentation site for stuff you can pick apart and use in your own application.
> Any change in /src directory will build the application and refresh the page.
Do you start from the demo page and start ripping off components that you don't need? Or do you pick specific parts from the template and build it from scratch from bottom up?
Even though templates seem to be an easy way to build stuff, I never understood the approach building from templates.
Dashboards are usually quite unique depending on the data they display and purpose of them, so just ripping the demo isn't necessarily going to be the best approach to go with.
In my case I'd start with choosing a layout and throwing together a rough sort of navigation menu, and then building each page by scratch (or based off previous pages). It's as simple as browsing the demo to find which components you need and then just copy / pasting them, either directly from the demo page or from the documentation.
The only times I've ripped entire pages have been for auth pages, error pages, etc - i.e. pages that are usually quite common to all applications. I find that it's better to take a standardised approach for these pages as it's more intuitive for the users rather than reinventing the wheel.
I get some people don't dig the design but I think it look serious, and in general that's what dashboard are for, serious business. They need to be readable and simple to understand and use. Tabler gives that vibe.
Edit: As an afterthought, I would really appreciate if anyone knows any similar projects. It'd nice to compare and have more options. So far I havent found anything so compelling in this space.
https://blog.appsignal.com/2022/03/02/import-maps-under-the-...
https://github.com/lightyrs/tabler-rubygem
there is also a pull request for integration with Rails 6
the underlying html and css, however, give me pause about how easy it would be to integrate into a larger project. <div> soup is how i'd describe the demo html, and its css uses custom properties (css variables) in a way that, on first glance, seems to make it more verbose without adding power, flexibility, or maintainability (or accessibility, but that seems a really big challenge for data-heavy frontends like this).
i'd probably try this out if i needed a dashboard on a project, but perhaps would want to test drive it on a small/test project to see where the gotchas are first.
then again, you'd probably not have to care about semantic structure in dashboards anyways, as it's unlikely SEO is a concern.
Might be worth considering for accessibility though.
I stumbled across Tabler a few months ago and have integrated it into one of my projects. I love how easy it has been to throw a site together for a client with minimal time spent on writing stylesheets, or modifying your more generic "admin dashboard" templates that used to be the norm. I do, however, completely agree with your comment regarding <div> soup.
bootstrap does this as well, and since tabler is built on bootstrap, it seems they're extending that precedent (there's a lot of "!important" going on to, which is not a good sign). i'll admit i'm not much of a bootstrap fan either.
i'm slowly developing my own personal css framework where i'm trying to have no tooling at all, including no scss, and very, very minimal js (and certainly no framework or packaging/transpiling of js at all) by default. it leans heavily on css variables and all the other current css goodies (good riddens IE!). that way, it can fit into any use case without having to worry about tooling conflicts. bulma kinda takes this approach (particularly, no js), but it's weirdly not as extensive as i'd expected it to be.
But am not a fan of the current trend of spaced out layouts. Visually they look good but in practice for information dense pages it is difficult to fit everything in. Maybe it is bad design on my part but I'd prefer a web layout that looks more like a desktop application (think Photoshop or Visual Studio)
I’ve found that when used competently, React also shines for normal websites both through client or server side rendering.
This is a package of pre-formatted and pretty html and css, with a small amount of javascript, built on top of another package of pre-formatted and pretty html and css, with a small amount of javascript.
- my car - I collect data in sqlite db - amortization schedule/actuals for the loan, fuel/maintenance expenses etc. Dashboards on top of it with metrics such as $ spent, miles, cost of finance, cost of ownership (per mile) etc.
- workouts - I used enodomondo but they shut down and I had a data dump, I currently use garmin. So I get all the data to sqlite and drive a dash with overall work out stats over years across platforms.
Can you share screens of your car dashboard, this sounds like a marketable simple one-page web-app that people would sign up for an use...
But then you'll get millions of users and you'll have to learn postgress and a range of other meta-metrics to track your uptime and availability 9s to your constituent users....
So they're for different purposes even though they both result in dashboards.
Tabler is just a (semi)framework for building the UI layer of that software. It doesn't provide any actual execution of logic.
I switched to Tailwind templates though because they suited me better. And honestly I couldn't (be bothered to) figure out how to only use the CSS required, not the whole bundle, with Tabler.
Currently using their components, but will (re-)use Primer for a private project https://tailwindui.com/templates/primer
I guess most the JS is just visual changes, but i wonder if that brings live view out of sync with the dom.
The better question would be: "What is the difference between Tabler and using Bootstrap or Bulma or some other framework?"
This looks "modern" but it doesn't look good and it certainly isn't useful. Every time I bring this up in UX review designers look at me like I'm from the moon.
In the "Invoices" table in the preview seven hundred vertical pixels are used to display eight lines of data. That's worse than a VT100 by a factor of three.
A lot of things that desktop applications did are missing in most web apps; high information density, resizable panels, panel layouts (side by side etc...), keyboard shortcuts, embedded CLI's, and so on. It makes the user experience a lot worse for power users.
Looks fine to me. The page is already pretty information dense, making it even more dense isn't necessarily better, but it's all pretty subjective.
Can be partially solved by having alternating colour rows (and frankly it should've been a thing here), but ultimately this is far easier to read then your average excel sheet, at least to me.
And frankly if you're displaying more than 8 rows, you need to add a damn scrollbar and search box, ain't nobody reading all of that. Humans can generally only focus on like 5 things at a time max anyway.
If I want to build a dashboard with multiple widgets on the screen, my first step would be to look for a layout tool. Which allows me to handle how the screen is divided into multiple areas and offers an interative interface so I can open, move, resize and close those areas.
I would not want a bundle that combines the layout tool with charts and forms and whatnot.
For example, if I want an area to be used for an interactive chart, I would want to build that with whatever solution I like best. Personally I already use Plotly for many things, so I would go with that.
So I can build a dashboard without deciding on a layout tool, then deciding on a solution for charts, etc.
I do not consider myself a frontend developer. I'm just not interested in spending time learning about a bunch of UI tools if there's a framework that does it all.
This is appealing to me- the less I have to think about the implementation of the presentation layer, the more I can focus on the data processing, persistence, API... the stuff that _I_ care about working on.
Not trying to argue, just one answer to your question.
Another framework that I've used in the past for 2 WebApps projects[1][2] -and I was quite happy with the result- is Semantic-UI (and the fomantic fork)[0]
[0] https://github.com/Semantic-Org/Semantic-UI https://fomantic-ui.com/
[1] https://github.com/sighupio/gatekeeper-policy-manager/tree/v... [2] https://github.com/ralgozino/vmtory#screenshots
I never had to worry about stuff like this in desktop. Or reinvent how a combo box should work for every single project. Some people just want the same for the web.
Use what you want from whatever framework you want, but there's a lot of efficiency in one framework providing the vast majority as it's known to work well together and reduces complexity and decision making.
This project needs some more effort to achieve it, right now it looks like it was designed 5 years ago.
You misunderstood me: I wasn't saying that their design should look like Material Design 3. I said it should look better and take into account all the lessons we learned from Twitter Bootstrap, Material Design, and other sources. Otherwise, there are no reasons to use it.
Define "outdated". It looks similar to literally any other modern UI framework with the exception that it focuses on dashboard/backoffice functionality (almost none of the UI frameworks do)
> doesn't even take into account devices with “tap” screens (elements are too small, tables are not responsive).
Yes, that is maybe a problem. Depending on what exactly you need.
I've yet to see a single UI framework that offers both a consistent set of good dashboard/backoffice elements and a good mobile experience (because it's actually hard to do). And Material is emphatically not a good example.
The elements in the demo are also definitely not too small for my taste. On my iPhone 13 Pro I actually think the demo looks best at 85% and it is still perfectly usable at that zoom level on a touchscreen. Everything is too damn big on mobile sites, which is ludicrous considering the tiny screens.
I am a happy user of grafana. All things are there. Tabler looks good and also the responsive UI is really cool, but building all the backend for a dashboard application will be a challenging endeavour. Using grafana or metabase seems fine...