Based on today's discussion, Vuetify seems to be the framework of choice, now that v3 has been released. While vanilla CSS is a viable option, using Vuetify would save us some work, particularly with regard to accessibility and responsiveness, and would keep us in sync with the Toolhub ecosystem.
Other options: Tailwind
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | NicoleLBee | T324507 Develop a web app for editing Toolhub records | |||
| Resolved | NicoleLBee | T325289 [frontend] Research and select a UI framework |
Further to the above, I've had a look at installation options for Vuetify. We have a few options for adding it to an existing project:
Of the three I'm inclined towards using the plugin, and I'm going to explore that today and see if I can get it working. The site is going to be pretty simple as far as I can tell and I don't think we'll be using more than a few components, so why weigh the project down with the entire package? And while I don't fully understand the GDPR regulations and their potential impact on projects like this, it's enough to make me wary of using a CDN so long as it's avoidable.
... but having said all that, installing the entire package was easy whereas the plugin seems a bit fiddly (though it's more my ignorance coming into play).
I've pushed two new branches to the toolhub-ui repo:
Edited: I have overcome my ignorance and gotten the plugin working as well. Components are automatically imported as they are used. See the Vuetify documentation on treeshaking for details.
Since I've gotten both options to work, but I still think the plugin is the better choice, I've gone ahead and opened a pull request: https://github.com/wikimedia/toolhunt-ui/pull/6
I also installed the Material Design Icon library, as suggested by the Vuetify documentation.