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
- The colours have poor contrast. I don't have any vision impairment but the peach colour doesn't feel distinct enough from the purple/lavender to me. (It's better in light mode when the peach turns to a stronger red).
- On that note, maybe yellow was not the best background for the beer badge when most of the glass is yellow with a bit of white.
I don't know if there's something that makes this render any differently for me than anyone else. I'm using Chrome though so I wouldn't have thought it'd be especially unusual.
The trend is people releasing barely conceived software and products written by language models, backed by equally thoughtless marketing materials written by language models.
I'm impressed that, in the meanwhile, Google has already thrown into the grave not one, but two different implementations of Material Design in the web: Material Design Lite [0] and Material Components for the Web [1], bot of which never managed to actually be competitive UI libraries.
edit: Actually, they've thrown a total of _three_ implementations into the grave, as MWC is in maintenance mode already [2].
I thought I'm the hardest to impress gremlin out there, but despite what the comments here look like, this is the best looking and practical MD3 CSS I've seen to the time. Not fond of promoting ethanol consumption though.
Beer CSS is great. I've used it for multiple simple projects and it provides a great DX with the clean html code and the many snippets on the official website. The only downside is that LLMs are quite bad at working with it from my experience, maybe it's just too simple for them..
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
Because they were more focused on the stills than the movie.
IOW, a screenshot when you scroll it to the "right" spot looks clean and balanced. Personally, I think it's a bad UX decision, but also easy to scroll past once you know.
- 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
- The colours have poor contrast. I don't have any vision impairment but the peach colour doesn't feel distinct enough from the purple/lavender to me. (It's better in light mode when the peach turns to a stronger red).
- On that note, maybe yellow was not the best background for the beer badge when most of the glass is yellow with a bit of white.
I don't know if there's something that makes this render any differently for me than anyone else. I'm using Chrome though so I wouldn't have thought it'd be especially unusual.
Big Arial at random sizes. No margins, no grid, component examples scattered all over the screen.
Though I'm not sure if this can be applied in this specific case.
edit: Actually, they've thrown a total of _three_ implementations into the grave, as MWC is in maintenance mode already [2].
[0]: https://github.com/google/material-design-lite
[1]: https://github.com/material-components/material-components-w...
[2]: https://github.com/material-components/material-web/discussi...
Not sure pros/cons vs MUI?
Some animations are painfully slow, though. After opening a menu[0], it takes a long time to close once you click outside.
How well does it work without JS? I assume that's how the ripple effect is implemented.
[0] - https://www.beercss.com/#:~:text=Menus,-code
Edit: they have documented what works and what doesn't with JS disabled here : https://github.com/beercss/beercss/blob/main/docs/JAVASCRIPT...
That file hasn't been updated in a while. Not sure if nothing has changed since then, or if it's outdated.
IOW, a screenshot when you scroll it to the "right" spot looks clean and balanced. Personally, I think it's a bad UX decision, but also easy to scroll past once you know.