Live data from Hacker News

Beer CSS – Build material design in record time

beercss.com

41–50 of 69 posts

Re: Beer CSS – Build material design in record time

#42

For a CSS design site, this looks fairly bad to my eye. I'm not any kind of UX expert, it just looks clunky: - Lots of text seems slightly offset. It's not all centered within buttons etc. - The text also doesn't seem to quite line up with the icon on said buttons (it feels relatively a little too high) - Similarly the text within the little notification popups ("New") isn't centered and hits the top of the outline -…

100% agree i wish i could upvote this comment twice

Re: Beer CSS – Build material design in record time

#44

For a CSS design site, this looks fairly bad to my eye. I'm not any kind of UX expert, it just looks clunky: - Lots of text seems slightly offset. It's not all centered within buttons etc. - The text also doesn't seem to quite line up with the icon on said buttons (it feels relatively a little too high) - Similarly the text within the little notification popups ("New") isn't centered and hits the top of the outline -…

That's what I love about iPhone13 mini with Safari. You spot badly designed sites immediately.

(This site's buttons are too wide and it bumps from left to right when scrolling sideways.)

It's still a free CSS kit, but now I know there's no care behind it.

Re: Beer CSS – Build material design in record time

#45

This is a great project, but material design was the worst thing that Google invented and implemented. Completely tasteless, visually unappealing. Would be nice to see such a project with anything else than material design.

And worth noting that this mostly implements the newer version of material design (M3). However, M3 was a lot more focused on shapes besides just circles and rectangles, but they don’t seem to have quite gotten that here

It's definitely slightly outdated, though. M3 Expressive for instance, the default text field has the textbox labels stay within the textbox, not move into the border.

https://m3.material.io/components/text-fields/overview

Re: Beer CSS – Build material design in record time

#46

can we finally let material die? it's the absolute worst UI system

I have the opposite view. I think M3 Expressive is actually one of the best baseline UI standards I've seen.

They are clean and well-designed if implemented correctly:

https://m3.material.io/components/all-buttons

Re: Beer CSS – Build material design in record time

#47
post #28

Earlier quoted context omitted.

I only see a blank white page. I'd expect that people who are specifically trying to show me an interesting CSS library could make at least something show up on the page without JavaScript. As a matter of policy, I don't whitelist sites that give me neither a clear reason nor initial content.

Right, so it's some JS SPA thing as well (of course). Out of interest, do you not often find this a problem these days? I feel like there'd be a lot of sites out there that are non-functional or literally do nothing without JS.

Maybe it's triggering ad blockers? I have JS enabled and I see a few elements but it's obviously broken here too.

In any case it's not a great look if they want to encourage adoption of their tools!

Re: Beer CSS – Build material design in record time

#49

I could never get rid of the feeling that Material design looks like some stylesheets failed to load. It feels unfinished, raw, or temporary.

That's because most material design implementations are half baked. There's very specific timing requirements to get most of the UX e.g. the inkwell to feel realistic and often the web variants are not styled well (they have random latencies partially due to the DOM/JS bindings). Material design is a pain the ass to implement faithfully as they are extremely latency sensitive. Try the Flutter and native Android/Kotlin Jetpack compose if you want a feel what they are suppose to feel like.

Re: Beer CSS – Build material design in record time

#50
post #49

I could never get rid of the feeling that Material design looks like some stylesheets failed to load. It feels unfinished, raw, or temporary.

That's because most material design implementations are half baked. There's very specific timing requirements to get most of the UX e.g. the inkwell to feel realistic and often the web variants are not styled well (they have random latencies partially due to the DOM/JS bindings). Material design is a pain the ass to implement faithfully as they are extremely latency sensitive. Try the Flutter and native Android/Kotli…

Stock Android on a Pixel 7 felt the same way to me.
Post reply on HN