I love Tabler and have used it for a few projects with great success.
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.
Completely agree with your sentiment. It has been incredibly refreshing to use Tabler on my projects in comparison to the norm ("admin dashboard" templates) that tend to fight you when you don't follow their pre-defined layout, or when you want to extend the UI kit with your own components without having to re-implement the styling used by the kits.
How do you approach building on top of a dashboard template?
> 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.
In this instance, think of it less as a template and more of a UI Kit. The demo is just there to showcase what's available in the kit.
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.
Thank you for adding this. I love the look of this project and was quite excited. But I couldn't figure out how one would actually get started creating a site with it. Now I get it...
I love Tabler. I've used it for a few Rails projects and since Rails 7 it's even easier to integrate thanks to Import Maps. I can get a project off the ground even faster with this UI kit. I'm already used to the Bootstrap classes and tags so this is just the final component for maximum productivity.
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.
Yeah, the import maps comment mainly stems from a personal hatred against Webpacker. Wiring everything together was quite more tedious before Rails 7. I would think it does, at least with Django I know you can also automate the project creation with a script and get to coding straight away, not sure about frameworks for Go or Rust but I'd figure it be more or less the same.
it looks like tabler uses jekyll underneath for docs and demo (which i personally like and am comfortable with). the demo is really nice, ahd while i'm not big on js any more, the js driving tabler looks fairly straightforward and appropriate to my eyes.
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.
The CSS variables actually provide that exact functionality, in a sense. They allow you to adjust the colour scheme, font sizes, layout (margins, padding) without having to grep all of the stylesheets.
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.
i appreciate you contributing your experience on this. to be more specific, it looks to me like a lot of the css variables are too granular, likely because they're being generated via scss functions, and so must conform to a set of algorithmic conventions. but a lot of the time, you don't want to tweak just the default border color of the card component separate from its border width separate from the border color of a generic container (or whatever). i haven't delved deep enough to know precisely how this all plays out, but that's what it looks like to me on first perusal.
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.
Basically even if it's not built in, adding a reset stylesheet underneath it would make it work with semantic tags just like with divs, so no worries about that.
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.
nice, i may have to look into using these for my personal css framework project. i'm still not sold on svg as an unalloyed good over font icons (as they're really verbose and cluttery in markup), but they do have some good points as well (e.g., multi-color and css-able).
To me, the key point about having the SVGs is they're basically the "source code". Whether you want to use SVGs directly or not, you can, and you have all of the tools to make high-quality custom icons using the same shapes.
I've used this for a couple of projects now and like it.
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)
Maybe https://blueprintjs.com/ for you, although last time I checked it did not have explicit mobile or tablet support. (They don’t aim to break mobile or tablet but they don’t endeavour to support it.)
We've built an open-source low-code framework (https://github.com/ToolJet/ToolJet) with Tabler as the base for our UI components. choosing Tabler was one of our best decisions, it helped us ship new UI components faster.
Websites are made with html and css (and frequently 15mb of javascript)
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.
I have been using Apache Superset on top of sqlite for my personal use, and am fairly happy with it. Any advantages/disadvantages of Tabler compared to Superset?
Superset is software that connects to data sources and provides a GUI for running queries and analyzing results. Similar to Redash, Metabase, QuickSight, PowerBI, Tableau, Mode, Sisense, etc.
Tabler is just a (semi)framework for building the UI layer of that software. It doesn't provide any actual execution of logic.
While they can both be used for dashboard, they seem to be quite different. From what I can tell, Superset is a platform while Tabler is a html/css framework. If I'm understanding it correctly... Superset integrates with a database, but as a framework Tabler needs some sort of backend to drive any database interaction. Superset has it's own UI that you interact with while building your dashboard, but Tabler is just a set of elements that you'd need to use to build a dashboard using whatever web development methods you prefer.
So they're for different purposes even though they both result in dashboards.
- personal finances - get statement exports to sqlite db and I have dashboards to manage expenses/finances, retirement account data in sqlite and charts for actual and projections
- 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....
Right now I just have a raspi hosting superset and sqlite for me and I use it locally, its not out in the open. However, based on my experience, the metrics and dashboard for the car are not very hard to do, the biggest factor imo is the discipline of data collection, get receipts and insert data to the db for each refuel, maintenance, parts, registrations, insurance etc. If you miss collecting data, the data/insights aren't as useful anymore. Maybe scanning receipts and ocr is the next step, that's on my roadmap, when I find time that is :)
I have. Works well (I would inspect examples on the demo site and copy-paste them wholesale).
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.
Because this is just a template and most of the elements point to # and would require linking in the code. This is a plain html/css site that just requires putting life into it using javascript or more css :)
Based on demo site: doesn't seem to have a 'tag' input UI, only single input item switching. Additionally, some accessibility concerns re: contrast/highlighting.
Haha to me Tailwind feels like it is on an even lower level of abstraction than vanilla CSS. So I'd expect something like Tabler to be a good way to quickly start somewhere.
The better question would be: "What is the difference between Tabler and using Bootstrap or Bulma or some other framework?"
I hate this modern design trend of wasting as much of my screen real estate as possible. It's ugly and it wastes my time, which is rude. Every one of these tables is literally 300% taller than it needs to be. Get rid of all the pointless padding and spaces. You can pack 3x the information on screen.
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.
I’m talking about the whitespace within a row. There’s no reason to make a row in the table 3x taller than the text on the row. If you think 8 rows is all your users need that’s fine, but why waste all that space?
Well there is a point to be made that if you don't stack rows without any spacing the user might actually be able to look left and right at different columns without losing sight which line they were even looking at.
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.
It's a dashboard. The point of a dashboard is to present the most important information in an aesthetically pleasing way, not to cram as much informational density per pixel as possible. This is why your UX review designers look at you like you're from the moon - you're not understanding the user need.
My UX designers are building backend operational tooling that I use every day. Batch processing workloads that need babysitting and manual intervention. I often have several windows of these open to maintain multiple pipelines in parallel. Information density is critical in such an application.
There are designers that appreciate the distinction between the way you design a desktop application vs a consumer website / mobile app. A lot of the design literature and discussion seems to be focused on the latter these days.
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.
Most designers happen to serve mostly common customers but there are countless highly used industry specific web applications out there that are navigated primarily by shortcuts, and that software too, has designers. Designers that from my experience are often trying to make B2B, high data density solutions into fluffy UIs despite clear feedback that it's not what users want.
It depends who that common customer is. If you're building a tool for industry and your users are electrical engineers, you would design it differently to a consumer mobile app is all I am saying.
Why pack so many different things into a single project?
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.
> Why pack so many different things into a single project?
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.
The way I see is that it is for the same reason that Qt and GTK include all the widgets and abstractions to create a complete UI.
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]
Sorry, I'm from mobile and pressed send to soon. The point of the examples was to say that these frameworks provide you with the building blocks you need to create a webui without too much effort and with consistent (good) looks
It's a kitchen sink demo, so we can pick the components we want and just use them without spending hours wiring things together or dealing with conflicts. It's why VB was so successful and Qt as well.
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.
Then use plotly bud. Why rag on tabler though? It’s beautiful and provides devs a quick way to get started on a new project without having to think much about UI and lightly customize and have something that looks very professional. And it’s free.
Nowadays design language of your framework should look at least not worse than Material Design 3 or Twitter Bootstrap (just because they are there and you can learn from them).
This project needs some more effort to achieve it, right now it looks like it was designed 5 years ago.
I expressed what problems I see - their design looks outdated and doesn't even take into account devices with “tap” screens (elements are too small, tables are not responsive).
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.
Material Design looks awful to me. I quite like this.
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.
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.
From what I understand, tabler is just a UI template. So if you want build a dashboard application, you have to build all things, like user management, visualizations etc yourself?
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...
in the context of a ui kit, "dashboard" is not the same thing as what grafana gives you. it's more of a dashboard as in the ui that you get after you log in to some saas app.
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.