Rendered at 10:17:40 GMT+0000 (Coordinated Universal Time) with Cloudflare Workers.
CamouflagedKiwi 21 hours ago [-]
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.
stephbook 18 hours ago [-]
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.
nine_k 16 hours ago [-]
I remember how IE5 used to be the bottom rung to test a design against.
(The site renders perfectly for me in Firefox on Linux. I never owned an iPhone. I suppose whatever AI model was working on it also used a single desktop browser.)
TN1ck 11 hours ago [-]
They didn’t mean that Safari had a problem on rendering, but that their phone is so narrow, it often highlights pages that weren’t tested properly for mobile.
It seems the 13 mini is 375px wide, which isn’t even that narrow. The smallest I normally tested against was the width of the iPhone SE with 320px.
zahlman 20 hours ago [-]
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.
CamouflagedKiwi 19 hours ago [-]
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.
chrismorgan 17 hours ago [-]
It does still happen not infrequently on a certain sort of site which I’ll simplify to “marketing homepage”, but it’s not happening anywhere near as often as it did three years ago. I haven’t tried to assess if this is because more-sensible frameworks have gained popularity, or if the stupid frameworks support server-side rendering better now.
Gotta say, though, that I don’t think one actually misses much in such cases.
Of sites that require JS to not be blank and don’t fit into this main category, my vague feeling is that the rate hasn’t changed much.
zahlman 7 hours ago [-]
I agree with the sibling comment that it's been worse in the past.
But it also tends to correlate with types of sites that I'm not especially interested in anyway.
Well, except the image hosts. Webmasters who claim that their site's primary purpose is to display static images, who cannot or will not just use a normal <img> tag, are beneath contempt.
Silhouette 17 hours ago [-]
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!
lacoolj 18 hours ago [-]
100% agree i wish i could upvote this comment twice
troupo 19 hours ago [-]
> For a CSS design site, this looks fairly bad to my eye. I'm not any kind of UX expert, it just looks clunky:
Front page says "Build material design in record time", so it's on par with actual Material Design which is all that, and more. Here's a small thread I collected some time back: https://threadreaderapp.com/thread/1643607965935476737.html
doodlesdev 22 hours ago [-]
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].
For a UI framework landing page, this looks impressively bad on mobile.
Big Arial at random sizes. No margins, no grid, component examples scattered all over the screen.
MetaMalone 21 hours ago [-]
This was my first impression as well. The layout options just didn’t work on mobile
albedoa 22 hours ago [-]
Welcome to the future! We better get used to it.
jgalt212 22 hours ago [-]
Are you being a troll, or is there a trend afoot to ignore mobile rendering?
Yannik_Sc 21 hours ago [-]
It is a shallow trend to ignore or on-purpose worsen mobile experience and force users to mobile apps instead of using the browser version.
Though I'm not sure if this can be applied in this specific case.
bbg2401 21 hours ago [-]
The trend is people releasing barely conceived software and products written by language models, backed by equally thoughtless marketing materials written by language models.
notglossy 16 hours ago [-]
I guess the question for me is: Why would I want my web presence or platform to look like Android? I understand the use case for “iframes” and web based extensions of apps that use the native framework, but otherwise this reminds me up the early 2010’s where half the mobile websites tried to look like iOS apps.
smcleod 20 hours ago [-]
Material design looks pretty dated these days. I'm wondering why people would still be using it? Is it just a taste thing or something people have been working with for a long time?
airstrike 20 hours ago [-]
I agree. I think it's a function of familiarity. People who interact daily with apps using Material Design get used to it and don't notice how odd it looks to everyone else.
SpyCoder77 17 hours ago [-]
I used to use material UI for every project I made, but then I saw ShadCN/ui and immediately switched.
ryukoposting 18 hours ago [-]
I always thought Material looked bad. It's the worst thing that survived the 2010s flatshit trend, IMO.
But it's familiar, so I can't really be that mad at the people who continue to use it. As often as Google makes things that break their own rules, and as much as Samsung deep-fries Material into a fine dust, people still know that the low-contrast pill-shaped thing is a button.
Has anything come along since Material that was aesthetically better and ergonomically better and equally well-supported across platforms?
14 hours ago [-]
ghrl 24 hours ago [-]
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..
fallinditch 22 hours ago [-]
I guess it needs a skill.md file to help the LLM navigate the patterns and conventions.
gr4vityWall 23 hours ago [-]
Wasn't familiar with it, looks interesting.
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.
That file hasn't been updated in a while. Not sure if nothing has changed since then, or if it's outdated.
zsoltkacsandi 23 hours ago [-]
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.
promiseofbeans 23 hours ago [-]
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
qingcharles 18 hours ago [-]
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.
Like what, a ShadCN/ui version? The DX of SCNUI is already very good and LLMs are all too familiar with it, I don't see a need for anything else.
hmokiguess 22 hours ago [-]
Thank you, I could not agree more. Material design is awful.
nilirl 16 hours ago [-]
Why does it feel bad to look at?
I understand design can have many goals, but surely it should atleast feel like ... something good? I've never once used a Google interface and felt anything good.
VladVladikoff 20 hours ago [-]
The two times I’ve used material design to help with a UI decision were the multi select and the filterable select where you can type to filter the select list. I don’t see examples of either of those on this page. Perhaps I missed them?
remix2000 22 hours ago [-]
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.
robviren 22 hours ago [-]
Extended FAB not rendering correctly for Firefox on mobile from what I can see.
freetonik 17 hours ago [-]
I could never get rid of the feeling that Material design looks like some stylesheets failed to load. It feels unfinished, raw, or temporary.
Onavo 17 hours ago [-]
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.
freetonik 17 hours ago [-]
Stock Android on a Pixel 7 felt the same way to me.
BobbyTables2 20 hours ago [-]
With the first project advertised being a Rust implementation of Remote Desktop, I’m really confused what’s going on here.
The whole website feels like a weird hallucination…
alentred 20 hours ago [-]
IronRDP web client apparently uses Beer CSS. I go agree, though, it is a questionable choice for a showcase.
If the goal is to convince me not to use this: mission accomplished. This looks awful on mobile.
isleyaardvark 18 hours ago [-]
It looks terrible on desktop too.
basilikum 23 hours ago [-]
Why is there so much empty space under the yellow header?
drabbiticus 22 hours ago [-]
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.
miohtama 22 hours ago [-]
I like the name more than Tailwinds
wildrhythms 20 hours ago [-]
I don't see how this is related in any way to Tailwind or atomic css
cynicalsecurity 21 hours ago [-]
Perfectly generic for perfectly generic applications, I like it.
sscaryterry 20 hours ago [-]
Sorry, but I would never use something like this, it really isn't well put together.
cwackerfuss 16 hours ago [-]
This is literally AI slop, I’m surprised this hasn’t been mentioned
efilife 19 hours ago [-]
Buttons (and their children) randomly change their border radius when clicked. This project looks as unappealing as it has a year ago
vcryan 20 hours ago [-]
I'm with the herd on this one: unless you're looking for a sort of "retro" feel, most designers are not reaching for Material Design.
esafak 19 hours ago [-]
What's your modern baseline?
SpyCoder77 17 hours ago [-]
ShadCN/ui. Even though everyone uses it (even more so nowadays since LLMs can't get enough of it) it is still an amazing design system and also allows a ton of customization. With the new Create [0] feature letting you customize your styling, it got even farther into the lead with DX and design.
- 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.
(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.
(The site renders perfectly for me in Firefox on Linux. I never owned an iPhone. I suppose whatever AI model was working on it also used a single desktop browser.)
It seems the 13 mini is 375px wide, which isn’t even that narrow. The smallest I normally tested against was the width of the iPhone SE with 320px.
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.
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.
Gotta say, though, that I don’t think one actually misses much in such cases.
Of sites that require JS to not be blank and don’t fit into this main category, my vague feeling is that the rate hasn’t changed much.
But it also tends to correlate with types of sites that I'm not especially interested in anyway.
Well, except the image hosts. Webmasters who claim that their site's primary purpose is to display static images, who cannot or will not just use a normal <img> tag, are beneath contempt.
In any case it's not a great look if they want to encourage adoption of their tools!
Front page says "Build material design in record time", so it's on par with actual Material Design which is all that, and more. Here's a small thread I collected some time back: https://threadreaderapp.com/thread/1643607965935476737.html
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...
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.
But it's familiar, so I can't really be that mad at the people who continue to use it. As often as Google makes things that break their own rules, and as much as Samsung deep-fries Material into a fine dust, people still know that the low-contrast pill-shaped thing is a button.
Has anything come along since Material that was aesthetically better and ergonomically better and equally well-supported across platforms?
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.
https://m3.material.io/components/text-fields/overview
I understand design can have many goals, but surely it should atleast feel like ... something good? I've never once used a Google interface and felt anything good.
The whole website feels like a weird hallucination…
Not sure pros/cons vs MUI?
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.
[0] https://ui.shadcn.com/create
They are clean and well-designed if implemented correctly:
https://m3.material.io/components/all-buttons