[HN Gopher] Tabler: Free and open source dashboard HTML/CSS fram...
___________________________________________________________________
Tabler: Free and open source dashboard HTML/CSS framework
Author : jakearmitage
Score : 329 points
Date : 2022-07-29 15:42 UTC (7 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| clairity wrote:
| 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.
| EthicalSimilar wrote:
| 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.
| clairity wrote:
| 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.
| tragictrash wrote:
| This is the kind of feedback that can really help a developer
| improve their skills
| jcpst wrote:
| From what I understand, it should also work ok with more
| semantic html elements. But it would be nice to see maybe a
| little of that in the examples.
| krsdcbl wrote:
| 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.
| bilsbie wrote:
| Anyone want to explain this like I'm a cgi-bin developer from
| 2004?
| tofuahdude wrote:
| 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.
| speps wrote:
| Changing page in the table at the bottom of the demo scrolls back
| all the way to the top on mobile (Chrome Android).
| mwiechn wrote:
| 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 :)
| tofuahdude wrote:
| Has anyone used this in a Phoenix LiveView project by chance?
| dmitriid wrote:
| 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.
| 2mol wrote:
| Which templates do you use?
| dmitriid wrote:
| I've shelled out $$ for https://tailwindui.com/
|
| Currently using their components, but will (re-)use Primer
| for a private project
| https://tailwindui.com/templates/primer
| tofuahdude wrote:
| Do you just bundle Tabler's JS into Phoenix asset pipeline
| and let it do its thing naively in the browser?
|
| I guess most the JS is just visual changes, but i wonder if
| that brings live view out of sync with the dom.
| dmitriid wrote:
| Ah. I haven't used anything that required JS. Just the
| purely visual components like tables, stats etc.
| willcodeforfoo wrote:
| 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.
| mbreese wrote:
| 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...
| EthicalSimilar wrote:
| 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.
| corbin wrote:
| 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)
| taspeotis wrote:
| 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.)
| babyshake wrote:
| Are there any good reasons to use this instead of Tailwind? Is it
| mainly just the look of the components?
| jcpst wrote:
| Way less work? Tailwind is on a lower level of abstraction than
| this.
| Lorin wrote:
| 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.
| newusertoday wrote:
| Thanks for this, this is great resource.
| giancarlostoro wrote:
| If you use FastAPI with Tortoise ORM it looks like there's an
| Admin Interface that uses Tabler:
|
| https://github.com/fastapi-admin/fastapi-admin
| rickreynoldssf wrote:
| But I don't have enough room on my laptop for another sticker!
| TekMol wrote:
| 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.
| puffybeignette wrote:
| 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.
| jcpst wrote:
| > 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.
| [deleted]
| jakearmitage wrote:
| 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.
| qabqabaca wrote:
| It's pretty standard for component libraries and/or dashboard
| templates to cover all the bases for a SaaS dashboard
| atonse wrote:
| Any examples of "layout tools" you'd recommend?
| ralgozino wrote:
| 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]
|
| [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
| ralgozino wrote:
| 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
| asdvasewe wrote:
| 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?
| sgt wrote:
| For reporting and BI? How does it perform and how is
| shareability?
| samstave wrote:
| Can you share how youre using it personally?
| asdvasewe wrote:
| - 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.
| samstave wrote:
| Thanks!
|
| 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....
| joemi wrote:
| 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.
| mulmen wrote:
| 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_.
|
| https://preview.tabler.io/
| pjgalbraith wrote:
| 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.
| sodality2 wrote:
| Designers optimize for the common customer, which does _not_
| want keyboard shortcuts or embedded CLI's etc.
| pelagicAustral wrote:
| 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.
| 13324 wrote:
| You could have a look at AdminLTE (https://adminlte.io/).
| metadat wrote:
| Does is also play nice with Python, Go, or Rust? Never heard of
| import maps until now, not immediately clear what they obviate.
|
| https://blog.appsignal.com/2022/03/02/import-maps-under-the-...
| pelagicAustral wrote:
| 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.
| EugeneOZ wrote:
| 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.
| Nextgrid wrote:
| What problems do you see? Personally I like it and "not looking
| like Material Design" is something I'd consider a _feature_.
| EugeneOZ wrote:
| 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.
| dmitriid wrote:
| > their design looks outdated
|
| 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.
| barnabee wrote:
| 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.
| maxloh wrote:
| Bootstrap looks ugly to me, compared to other design systems
| like Microsoft's Fluent Design System or IBM's Carbon Design
| System.
| EugeneOZ wrote:
| Yeah, nowadays Bootstrap looks outdated a bit, agree.
| Willish42 wrote:
| Wow, this is really great! I love the design and especially the
| sophistication of that demo page. Really powerful and
| professional looking stuff.
| [deleted]
| Waterluvian wrote:
| It's interesting that it describes the React version as the
| Single Page Application version.
|
| I've found that when used competently, React also shines for
| normal websites both through client or server side rendering.
| topicseed wrote:
| It looks neat. Makes me want to build dashboards for a living.
| Wish there was a Svelte version.
| ocdtrekkie wrote:
| Never used Tabler itself, but I am an absolute loyalist for using
| their icons, which are all MIT licensed and available in SVG.
|
| https://github.com/tabler/tabler-icons
| clairity wrote:
| 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).
| ocdtrekkie wrote:
| 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.
| la_fayette wrote:
| 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...
| cweagans wrote:
| 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.
___________________________________________________________________
(page generated 2022-07-29 23:00 UTC)