Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js

github.com

Post reply on HN
Print view View original

121–130 of 154 posts

Re: Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js

#121

Post by Klathmon »

styfle wrote: post #111
dom96 wrote: post #23

I 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?

Yes! I find that button clicks feel slow because (it appears that) the action does not start until the ripple animation completes.

I don't know which material library you are using, but literally the exact opposite of that is spelled out explicitly in the material design documents.

Actions shouldn't wait on animations ever.

Re: Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js

#122

Post by WhitneyLand »

TimMurnaghan wrote: post #10

Do 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.

You've probably noticed artists develop thousands and thousands of themes/mockups/designs for every possible use including admin. For example, https://themeforest.net/category/site-templates/admin-templa....

Would there be any practical way to provide them with some simple markup that allowed marking up their designs such that some sort of scaffolding tool could be used to convert it into a starter project for various frameworks/languages/etc?

Yes some of them come with bootstrap or whatever framework files, but if it were generalized it would be possible create a configurator/generator/scaffolder that would allow many more options and combinations.

It seems like Wix and SquareSpace have some sort of proprietary version of this. Where you pick a template, customize it, and then directly use it for development, but of course only using their tools, which as has been discussed here quickly run into limitations for non-trivial sites/apps.

This is all off the cuff thinking, I haven't put much though into what potential markup or a DSL would look like. However, maybe even a small set of options available as an open standard could provide a great deal of flexibility and be easy to use for artists and designer who are not that technical.

Maybe it could also be possible a start for an ecosystem of tooling to make use of it across a variety of development environments, not just "bootstrap and gulp included".

If it's plausible, hasn't been done, and has enough interest I'd be willing to take a pass at a draft spec that could at least help people realize what not to do :).

Re: Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js

#123

Post by jonreem »

etatoby wrote: post #110
reaperducer wrote: post #58

Earlier quoted context omitted.

Yes, and no. While nobody likes excessive animation, it is very important to let the user know their input was received. It's why the cursor changes on mouseover. It's how you know if the app is crashed, or merely processing something you requested. I've seen a million times in UX testing where ordinary people go click... wait... click click click click click because they didn't receive any feedback to an action. At…

> I've seen a million times in UX testing where ordinary people go click... wait... click click click click click because they didn't receive any feedback to an action. Not just ordinary people. I see the same behavior daily on older tech people, who fail to notice the (ever shrinking) browser loading indicator. Honestly, it seems like Safari is the only browser that still cares to show a visible loading indicator, t…

It's not like you can just skip writing those checks even if the browser indicator was more visible, people will still spam click and you still need to handle it correctly.

Re: Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js

#124

Post by _diyu »

TimMurnaghan wrote: post #10

Do 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.

So I was actually just about to write a cross-platform app using https://material-ui.com/ purely because it is the most comprehensively fully developed and React-first toolkit for React out there. Plus it has 11k (edit: oh it's 37k, wow) stars on Github, more than twice as much as the next most starred React toolkit.

Semantic and Bootstrap have been "ported" to React and are missing features or do things non-idiomatically, whereas MUI was built with React in mind (twice if you count the rewrite). There are other React-first toolkits but none are nearly as comprehensive and "healthy".

But I've been on the fence because it feels really weird to write a cross-platform app (mobile and desktop) using components that are clearly designed to look like just one platform (Android). Technically I could make a custom theme for it, but that looks extremely complex, and OP's linked theme is practically the only free one I could find.

I'd love to just abandon toolkits like this and write my own React components specific to my app, but honestly I don't know how to make half the stuff that's in these toolkits. My JS/CSS is just not that strong.

Re: Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js

#125

Post by antod »

benatkin wrote: post #96
WorldMaker wrote: post #67

Earlier quoted context omitted.

> In the real world, nothing is ever "full stop." You should purge that phrase from your lexicon. Not to get further off topic, but: Huh? "Full stop" just means "end of message". It's an amusing leftover from telegraph technologies that people sometimes use for emphasis, but it doesn't have a literal meaning more than just "end of message".

It's the same as ending a statement with "period." As in, "We connect people. Period." said by a Facebook exec to justify their use of dark patterns. It's for emphasis.

Not only that, "period" is the American English word for the very same punctuation mark the other side of the English speaking world calls a "full stop".

Re: Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js

#127

Post by baddox »

josteink wrote: post #84
briandear wrote: post #21

Earlier quoted context omitted.

That 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…

> Apple design, by contrast is generally very obvious and instantly understandable That’s only true if you’re already accustomed to how Apple does things. Consider the iPhone a perfect example: 300 different ways to single-click, double-click, triple-click(!), 3D-touch (whatever that is) and use random swiping gestures from all screen directions outside the screen, and different swiping gestures within the screen. Ab…

> Absolutely madness and probably makes at least 80% of the phone’s functionality completely undiscoverable and inaccessible unless you already know it is there.

Well, that can't be strictly true, since no one is born knowing these things, yet people do learn about them. I don't think it's crazy to expect people to desire to read a quick guide or watch a quick video about UI paradigms/tricks/shortcuts for what is likely to be one of the most complex and most frequently used electronic devices in their lives.

I do agree that 3d touch is a bad idea, because there's no pattern to learn other than very specific per-application places it can be used. If there was some visible UI hint that an element was 3d touchable, perhaps I would be more of a fan.

As for the double-click and triple-click stuff, I can't really think of that many examples on iPhone. I believe triple-clicking a physical button can be used to enable accessibility features? I think it's pretty acceptable to have accessibility features that drastically transform the phone's user experience fairly hidden, as long as they're well documented for the people who need them.

Re: Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js

#128

Post by matte_black »

fzaninotto wrote: post #89
thomasfedb wrote: post #39

I 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.

I disagree. Admins are complex. See https://marmelab.com/react-admin-demo/ , it's a (fully working) admin built with material design and it uses about 30 specialized styled components. Think notifications, toolbars, menus, grids, etc.

Maybe it’s because I’m on mobile but that UI is awful. Things are oversized when there’s no reason for them to be. Lists can only show like 2 items on the screen without having to scroll. Useless.

The segments and categories sections have a more sane design for an Admin.

Re: Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js

#129

Post by Theodores »

WhitneyLand wrote: post #122
TimMurnaghan wrote: post #10

Do 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.

You've probably noticed artists develop thousands and thousands of themes/mockups/designs for every possible use including admin. For example, https://themeforest.net/category/site-templates/admin-templa... . Would there be any practical way to provide them with some simple markup that allowed marking up their designs such that some sort of scaffolding tool could be used to convert it into a starter project for vario…

Just had to reboot my computer for the first time in weeks due to running Chrome's Lighthouse audit on one of those awful themes. I was guessing '7%' performance rating but did not expect to have to reboot!

If you run the same audit tools on any Wix website you can expect the same sort of nonsense, maybe a megabyte of scripts at the top, CSS where it runs to 10000 lines of which 97% unused, images flagged for being bloated.

The newer thinking that I find most making sense is to not use any framework at all and to also ignore people using Opera Mini/Internet Explorer. Clearly Google and organisations like the BBC cannot dismiss those people and have to make their websites work on the legacy browsers too. But, if making money matters more than pandering for people that shouldn't be online then the no-framework option makes a lot of sense.

No-framework is also getting a name as 'intrinsic web design' and the idea is to use built in things such as CSS Grid, Progressive Web App, HTML5 form validation and vanilla javascript to hold it all together.

With this way of working you can make the document pure content with semantic tags, e.g. 'Article', 'Section', 'Main/Aside/Header/Footer/Nav' and dispense with the many, many, many nested divs and spans with everything having a gazillion class tags. Going for the 'perfect outline' can be done too with a few hundred CSS lines instead of the tens of thousands you get if using some lame framework.

Building this way and using native browser features instead of the old cruft ways results in sites that load 10x quicker as you don't have the megabyte of scripts/stylesheets that the likes of Wix bloat sites with.

The thing is that to do frontend this way requires throwing out all knowledge of 'floats', 'margin/padding hacks' and even that tedious design process where someone that can't code designs something in a desktop publishing type of program for it to be handed off to frontend developers that tinker with the bloated theme their CMS comes with to make it look like whatever the designer got signed off with the client (without speaking to them first). Even 'Responsive Web Design' is old hat, with CSS grid there is no need to think in those ways, you can make everything content driven with fluid typography plus a few CSS grid rules making it work whatever the screen size.

In summary - forget about frameworks and enjoy the web as it should be.

Re: Show HN: Material Dashboard – Free Admin for Bootstrap 4, React, Angular, Vue.js

#130

Post by johncomposed »

midoreigh wrote: post #57

Everyone is bashing the admin panel. Which one is the best according to HN based on functionality and design?

A while ago someone posted 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/ and http://element.eleme.io/#/en-US.
Post reply on HN