News for hackers. Stuff that matters.
Re:Lit: A ridiculously small responsive CSS framework by tenaciousDaniel on Sunday May 03, 2020 @08:44AM (#23058646)
As it happens, yesterday morning I tried using one for the first time in years. Material UI for React. Looked incredible, is very impressive, and yet within only 2 hours I ran into a scenario that couldn't be handled by the framework.

This morning, I'm stripping out all of it and starting over from scratch, like I should have done in the first place.

A caveat is that I love their color system, so I'm importing and using that, but leaving out everything else.

Re:Lit: A ridiculously small responsive CSS framework by morgancmartin on Sunday May 03, 2020 @09:18AM (#23058809)
Would highly recommend Tailwind if you don't like the boxed-in nature of most frameworks. Tailwind is more of a design system than a CSS framework. It simply gives you guidance on establishing proper constraints of your design system and then a nice set of utilities to get started with. There is no "can't be handled" scenario in Tailwind.

EDIT: And the book by the same author, Refactoring UI, is also a fantastic primer on the philosophy behind Tailwind.

Re:Lit: A ridiculously small responsive CSS framework by tenaciousDaniel on Sunday May 03, 2020 @11:33AM (#23059595)
Refactoring UI looks awesome, thanks for the recommendation, will check it out. I've heard of Tailwind and I can't remember what the price tag was, but it made me raise my eyebrows a bit lol.
Re:Lit: A ridiculously small responsive CSS framework by balfirevic on Sunday May 03, 2020 @04:32PM (#23061645)
> I've heard of Tailwind and I can't remember what the price tag was

It was (and still) is zero. Maybe you have it mixed up with Tailwind UI? (which is a paid library of ready-made components built using TailwindCSS framework)

Re:Lit: A ridiculously small responsive CSS framework by isakkeyten on Sunday May 03, 2020 @10:45AM (#23059293)
out of curiosity, what was the scenario?
Re:Lit: A ridiculously small responsive CSS framework by tenaciousDaniel on Sunday May 03, 2020 @11:32AM (#23059586)
Converting a tree-like structure into a nested form inputs. Material seems to be rather opinionated about what a "form" is, and I found it too constricting for my needs.

More specifically, the TextField component assumes an accompanying label, while none of the other form components do. It seems like a very odd choice to me, since all form elements should have a descriptive label.

Re:Lit: A ridiculously small responsive CSS framework by mikewhy on Sunday May 03, 2020 @03:51PM (#23061366)
TextField is already a composition of other components.

The demo page for Checkbox (https://material-ui.com/components/checkboxes/) shows how to use them with labels, and also groups.

Agreed there should be something included for CheckboxWithLabel, but to think it's impossible and the whole thing must be thrown out is a bit much.

Re:Lit: A ridiculously small responsive CSS framework by tenaciousDaniel on Sunday May 03, 2020 @05:42PM (#23062078)
Eh I wasn't super descriptive in my response, but it was connected to that. It wasn't that I didn't see a solution, it was more "how much effort modifying in a solution will take vs just writing it myself". I decided the latter was more cost-effective for my particular use case.
Re:Lit: A ridiculously small responsive CSS framework by micael_dias on Sunday May 03, 2020 @03:25PM (#23061208)
What input didn't have a label? I'm using mui in a webapp and didn't find any I couldn't add a label to.