Beer CSS – Build material design in record time

Beer CSS – Build material design in record time(beercss.com)

59 points by Seb-C 3 hours ago | 16 comments

doodlesdev 1 hour 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].

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

pavlov 54 minutes ago |

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.

albedoa 47 minutes ago | |

Welcome to the future! We better get used to it.

jgalt212 22 minutes ago | | |

Are you being a troll, or is there a trend afoot to ignore mobile rendering?

miohtama 10 minutes ago |

I like the name more than Tailwinds

remix2000 26 minutes 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.

gr4vityWall 1 hour 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.

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

ghrl 2 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 10 minutes ago | |

I guess it needs a skill.md file to help the LLM navigate the patterns and conventions.

zsoltkacsandi 1 hour 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 1 hour 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

hmokiguess 59 minutes ago | |

Thank you, I could not agree more. Material design is awful.

robviren 53 minutes ago |

Extended FAB not rendering correctly for Firefox on mobile from what I can see.

1f60c 1 hour ago |

Reminds me of https://getmdl.io (RIP :()

basilikum 1 hour ago |

Why is there so much empty space under the yellow header?

drabbiticus 39 minutes 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.