11 ms·
Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js
- iatek 8y agoNice work happening at Creative Tim! Congrats to Alex and company. I'm looking forward to collaborating on Codeply. Please check out my latest too : https://themesguide.github.io/top-hat/dist/ https://themesguide.github.io/top-hat/dist/
- axelut 8y agoHi Carol, thank you for the kind words and congrats on the latest themes. I really like what I see there with the "copy code" straight from the interface. We will start "cooking" something together soon. Talking on email!
- buraksarica 8y agoNice work. There is a tiny glitch on first load on windows with chrome. The content shakes in order to fit screen. It may be about hiding the default scroller.
- axelut 8y agoyep, I see that now, you are right. Probably it would be better to disable the default scroller for all the devices and then: on Mac/Ubuntu/iOS/Android we activate the system scroll (which looks better) and on Windows, we activate the perfectScrollbar library. We will do an update soon.
- entropie 8y agoI can confirm, and its annoying. Probably easy to fix. Otherwise this is pretty cool looking.
- Oras 8y agoLooking much better and easier than many paid admin themes. I was checking it yesterday after reading about it on a website and was really impressed. All the best
- burnt1ce 8y agoNice theme. I like how it uses the big 3 FE frameworks. Big shout out to Ngx-Admin as well. https://github.com/akveo/ngx-admin https://github.com/akveo/ngx-admin
- axelut 8y agoCongrats! Are you the owner of that dashboard? Maybe we can join our forces :D
- burnt1ce 8y agoNope, but I wish I was.
- briandear 8y agoBut not Ember sadly.
- blindman 8y agoWe use ngx-admin currently and are enjoying it what it offers. I wish the corporate theme existed project start but I'm glad to see there are more options now.
- TimMurnaghan 8y agoDo people actually like Material for browsers on desktops? I tried it - as it would be great to have an opinionated design language with good framework implementations but it seems to make the same mistake as Windows 8 in trying to treat everything like a phone. That really isn't nice on a desktop.
- cpburns2009 8y agoI, for one, do not. Material Design, and the other flat themes are horrible on the web because they ignore established conventions and disregard affordance. Even on mobile I don't know what's click... tappable.
- briandear 8y agoThat is my biggest complaint with Material Design. It’s great if you already know what all the icons mean and what you are supposed to click. Apple design, by contrast is generally very obvious and instantly understandable. Look at the Apple Music app on iOS: pretty much every icon is labeled. You don’t have to guess where “My Library” is or fumble around trying to figure it out. Google Hangouts on the other hand.. I have used that thousands of times and still have a cognitive interruption every time I try to share screen, see the sidebar chat or any other common tasks. I frankly don’t understand the appeal of Material Design. If it came from anyone but Google, it wouldn’t be a thing except in the back alleys of Dribble. However, this dashboard project — thanks to whomever made it. It does look very nice — just not a fan of the typical Google design language because of serious usability flaws. This dashboard does seem to mitigate some of my main complaints (ambiguity and uncertainty.)
- jrs95 8y agoIf Apple had something for the web I'd almost certainly be using that instead. But in my case, I'm just trying to write JavaScript and avoid the other stuff as much as possible -- I'm more of a backend dev who's doing frontend work out of necessity. Material libraries (Angular Material, Material-UI, Vuetify, etc) have been great for me in that use case.
- mrtksn 8y agoInteresting, the Vue version feels significantly faster then the React version(drops frames at the beginning of the animations just after a click) and the Angular version feels much more website-like than app-like
- eat_veggies 8y agoIt looks like the Angular version doesn't have the fade in/out transitions, so it feels more like navigating conventional websites via links than just transitioning states in a javascript SPA.
- somada141 8y agoGreat work on the template. I actually bought the pro version as it has the most reasonable SaaS license I’ve seen in a lot of these templates where they pull you in with a 30-40$ license and then want 800-1400$ if you wanna use it on a product.
- axelut 8y agoReally Happy to hear that. If you have further feedback on how to improve it please let us know!
- electrotype 8y agoI'm using Firefox and the "Material Icons" icons are never displayed properly... Any idea why? https://i.imgur.com/Y06PbsL.png https://i.imgur.com/Y06PbsL.png
- realusername 8y agostrange, it works on my Firefox, maybe you have disabled some custom font loading settings for privacy?
- electrotype 8y agoEven in safe mode, with all add-ons disabled, it still doesn't work... I should try a clean install maybe.
- axelut 8y agoAlso work on our side. Please Open an issue with all the details so we can check simulating your environment. Thanks!
- electrotype 8y agoIt's not a problem on your side. It happens on all sites with material icons... But thanks. I'm just trying to use the smart people on Hacker News to help me with my issue! :-P
- axelut 8y agoHahaha I see what you do :))
- dandare 8y agoMy Privacy Badger was blocking design.google.com
- billabul 8y agoI really don't like light (300 weight) fonts on web. Most of them on most screens are illegible.
- douglaswlance 8y agoWhat's the easiest way to through a Firebase database behind this?
- nostalgeek 8y agoGet a grid widget from some actual widget toolkit? no seriously, that's why I don't really values these dashboards. Because let's be honest they don't come with actual useful stuff for someone who is developing a LOB that doesn't need to look like a mobile website.
- axelut 8y agoGreat feedback man! Do you have any examples that we can check so we can add some better tables/data structures?
- dom96 8y agoI basically associate material design with "slow" now, especially ever since Google has began to move all their services (flights, analytics) to material design. It's all becoming slow and annoying to use, anyone else feel the same?
- Dowwie 8y agowhat designs do you consider fast?
- arcticfox 8y agohacker news aesthetic
- deltateam 8y agominimalist, like craigslist
- steve_adams_86 8y agoThe thing is you can have a simple aesthetic and have it look nice. Not that this looks bad, but I mean, it can suit a product and stay performant, easy to maintain for designers, very little cognitive overhead to work with the design system, etc. Sometimes I feel like people lean on a lush and complex design system to draw eyes and attention away from how thin their product/data/whatever is. Welp, this is boring. Let's slap some lipstick on it.
- lioeters 8y agoI feel the same, and have the impression that Material Design is bloated and opinionated (not in a good way). I actually liked the presentation of its concepts, design language, style guide, etc. but not a fan of the technical implementation. Just one user's opinion..
- bgorman 8y agoMaterial is a design language. There are many different implementations of it (for the web at least)
- swyx 8y agoi've been a creative tim customer for a while, great product, fair price. no complaints :) not a fan of Material tho, victim of Google's success really.
- deleted 8y ago[deleted]
- thomasfedb 8y agoI dunno, looks slick but I do wonder how much of this is actually useful for building an admin interface. Once I've got decent form styles and a navbar I find that most of the rest is either very simple, or very application specific. Widgets are cool, but mostly we need tables and forms.
- dandare 8y agoand modals and drop downs.
- porker 8y ago> Widgets are cool, but mostly we need tables and forms. This (though I agree with sibling comment about a few more being useful). I reviewed 20 popular admin themes last month for our startup, and was v disappointed with them. Either due to code quality, or throwing in loads of useless widgets which are more consumer rather than business oriented. There's a gap for a theme that's more like Stripe's dashboard, not these heavy-left-hand-menu dashboard themes. Or something like VMWare's Clarity Design System (https://vmware.github.io/clarity/ https://vmware.github.io/clarity/) Something corporate.
- HEHENE 8y agoWow, thanks for the link to Clarity. That looks like something we could get a lot of use out of. We're currently using Looper[0], but even that is a little too opinionated and visually "heavy" for business apps where productivity and clarity are paramount. [0] https://themes.getbootstrap.com/product/looper-responsive-admin-template/ https://themes.getbootstrap.com/product/looper-responsive-ad...
- d0100 8y agoI would definitely use clarity, if only it where React.
- porker 8y agoOr Vue. I used Angular 2 for a mobile app (Cordova/Ionic) and while it was OK, I'd rather not use it again.
- mishingo 8y agoThis is really ugly
- arbie 8y agoConstructive feedback would be useful.
- consumethreads 8y agoWhy this works for a dashboard but not for anything else: -design is inheriently unique. You want your brand and your site to standout from the rest. A one size fits all design methology actually goes against design. A design framework for the web is like saying all stores should look the same. Even restaurants dont look the same and they are in the same usecase. Design matters and cannont be churned out like a factory product (or good design at least). There are 2 80/20 rules here. You can get 80% of your good design by adhering to 20% of the standards, yet its the last 20% of good design that makes your site stand out and the first 80% is just basic usability. -dashboards are purely functional and not user facing (at least the admin dashboards I hope this framework is talking about). This is a great place to use a standard framework and get all the reuse out of it so you can focus on making your user facing site unique
- midoreigh 8y agoEveryone is bashing the admin panel. Which one is the best according to HN based on functionality and design?
- johncomposed 8y agoA while ago someone posted https://tabler.github.io/tabler/docs/index.html https://tabler.github.io/tabler/docs/index.html which I quite like. But in most of my work I've used UI kits like https://ant.design/ https://ant.design/ and http://element.eleme.io/#/en-US http://element.eleme.io/#/en-US.
- dqv 8y agoHi. This is really cool and I can tell you put a lot of work into it. I noticed when tabbing through the dashboard that many of the elements have disabled focus styles. This can make the dashboard less accessible to users who need visual indication of what element is focused. Would you consider including focus styles on the non-form elements?
- jamestimmins 8y agoThis comment is how all suggestions/comments/constructive criticism should be given when someone shares something they worked on (online or elsewhere). 1. Acknowledge the positives. 2. Acknowledge the effort/work put in. 3. Introduce your idea as something to consider, with the knowledge that they may have already considered it, and have a good reason for going a different direction. Kudos!
- mynegation 8y agoI strongly do not like the design. To my taste: * colors are too bright and saturated * Low text-vs-background contrast: white letters on bright yellow-orange for example * Font strokes are way too thin which is especially bad compounded with dark-ish gray on light-ish gray low contrast (see above) Viewing this on a usual normal-resolution 24" Dell monitor. It could be that it looks better on retina phones and monitors - can someone opine? I would prefer something like [1] (not ideal, but found this just after 5 seconds of googling) [1] https://p.w3layouts.com/demos_new/template_demo/06-01-2018/glance_design_dashboard-demo_Free/215073379/web/index.html https://p.w3layouts.com/demos_new/template_demo/06-01-2018/g...
- deltateam 8y ago> * colors are too bright and saturated * Low text-vs-background contrast: white letters on bright yellow-orange for example * Font strokes are way too thin which is especially bad compounded with dark-ish gray on light-ish gray low contrast if only there some some sort of style sheet which was easily modifiable so that its changes cascaded down into every selector you had a problem with. making such a system seems like a lot of work, it would be even better if someone already placed the selectors, configured it to reposition them on desktop and mobile, and released all that work for free
- deleted 8y ago[deleted]
- staticvar 8y agoSo this is an example of how to use Bootstrap Material Design in different web frameworks? Why use Bootstrap Material Design instead of the Google supported Material Component library that works in any framework and without the added noise of class="foo"? https://github.com/material-components/material-components-web https://github.com/material-components/material-components-w...
- philliphaydon 8y agoI’m confused. I’m on my phone so I haven’t looked at the repo. But if this material done in bootstrap or is this a ui using material? Why is bootstrap mentioned...
- raziel2p 8y agoNothing stops you from implementing material design using Bootstrap.
- yellowboxtenant 8y agoGreat job implementing material design principles to Bootstrap. I would say I haven't seen it done this well except for I haven't seen it done at all.
- jgalt212 8y agoI think this is why folks give Material UI so much grief. https://en.wikipedia.org/wiki/Principle_of_least_astonishment https://en.wikipedia.org/wiki/Principle_of_least_astonishmen... And I would not be so quick to pat Apple on the back, as I feel they have on gone backwards vis a vis the above principle when they largely abandonded skeuomorphism.
- kbenson 8y agoThe demo page section for icons[1] is buggy on Firefox. If you scroll the icon categories, the icon next to each category doesn't move with the category name. 1: https://demos.creative-tim.com/material-dashboard/examples/icons.html https://demos.creative-tim.com/material-dashboard/examples/i...
- ricardobeat 8y agoDoes this actually conform to Material Design guidelines? The use of shadow/depth seems gratuitous, for example, in the selected item in the left menu.
- pbreit 8y agoHas anyone worked with this or similar starter themes? Are they easy to work with? Adjust to your own circumstances? I ask because, while easy on the eyes, they strike me as somewhat complicated and you wonder if you'd be better off starting from scratch or something simpler.
- dfee 8y agoTangential: is it (in)appropriate to use an "admin" theme for a consumer app? Maybe it's semantics, but I see the "feel" of admin pop up on many / most evolved consumer applications (e.g. GMail, Kayak, Reddit, Feedly, etc.).
- wiradikusuma 8y agoI'm using this for my upcoming SaaS, and I'm disappointed with the performance on mobile. I thought it's due to React, but after Googling "react material UI slow" I found that it's the problem with the UI framework. Don't get me wrong, I like the design, I just regretful of not testing it on my phone much earlier.
- hardwaresofton 8y agoOn the topic of UI libraries, I've used and enjoyed Element UI[0]. Someone really needs to make a search engine for components -- React, Vue, Mithril and a few other frameworks out there are making it so easy to build and share small isolated pieces of functionality but I still don't know of a site where I can easily search for components. [0]: http://element.eleme.io http://element.eleme.io
- novaleaf 8y agowhat is the relationship of this to Material-UI? https://material-ui.com/ https://material-ui.com/ On the Material-UI website it shows CreativeTim (the creators of Material Dashboard) as being a major contributor, additionally there is a Material Dashboard "Premium Theme" for Material-UI that's created by CreativeTim. In the MaterialUI site's thumbnail comments it says created with MaterialUI, but on the MaterialDashboard site it does not say this. Very confusing. did CreativeTim move away from MaterialUI to a bootstrap4 foundation? or something else?