Use an existing UI framework, such as Material-UI

Writing a UI framework is difficult. I tried it myself for a couple of years (for our Argu platform), and though the control it gave me was awesome, in the long run it was quite costly. The truly difficult part is finding the right abstraction - especially when it comes to theming functionality. Since Solid is all about giving the user an extremely high level of control, we need a theming strategy.

One UI library has a particularly powerful and well-thought way of creating themes: Material-UI. It's docs explain nicely how it works. In short, it uses CSS-in-JS to enable data (props) dependent UI changes and a theme abstraction that enables theme nesting. It also offers logic to deal with server side rendering, which is always nice.

We could create a material-ui theme for Solid, with purple accents. We can let users change their theme as well. We might specify a "solid:themePreference" shape that sets a (minimal) set of parameters, such as heading font, rounded corners, drop shadows, night theme, etc.

The design of material-ui (or at least, the default theme) seems to look a lot like design.inrupt.com. It uses cards with drop shadows, colored checkboxes, similar toggle buttons, the 'pills' tag abstraction, similar label+input form designs, the three button menu icon...

What also helps, is that Material-ui is a really popular repo, which means that it works really well on a lot of browsers, and has proper accessibility setttings. It's dateTime pickers, for example, work like a charm with a keyboard.

It has a really nice alert ('snackbar') abstraction, it's forms look & feel great, the dropdown menus and dialogs are awesome, the tables are wonderful...

It's quite a large dependency (425kb minified, 101kb gzipped), but I think it is worth it, since it could save us a ton of time during development. It also might help to make the Solid UX more consistent, if we would nudge solid component developers to use this (e.g. by including it in a boilerplate). If we use JS Modules, we can prevent duplicate loading and save bandwith.

Es ist keine Quelldatei, kein Test und kein Einstiegspunkt angegeben. Beginne damit, die vorhandenen UI-Widgets und Utilities des Repositorys zu überprüfen, und vergleiche anschließend deren Anforderungen mit dem Theming- und Komponentenmodell von Material-UI. Als abgeschlossen gilt die Aufgabe, wenn ein gemeinsames Framework und eine gemeinsame Theming-Strategie vereinbart und anschließend in den betroffenen UI-Komponenten umgesetzt wurden.