CSS and Fonts for Web Apps
-
Hey there!
So I'm in the process of making a bunch of table-top rpg tools all in javascript, and I'd like to bring them over to ubuntu touch. In doing so I'd prefer that they look and behave as close to native as possible.
I'm wondering if anyone has any links to font, sizing or spacing guidelines that I've not been able to locate in the last few days of searching, or if there is any ready-made css for form sytling, fonts and the like out there.
-
There is the old and abandoned HTML5 UI SDK:
https://github.com/ubports/ubuntu-html5-themehttps://docs.ubuntu.com/phone/en/apps/html-5/
https://api-docs.ubports.com/sdk/apps/html5/index.html
But IMHO it is not so native looking anymore with the grey-ish background gone and the suru icons improved:
http://docs.ubports.com/projects/icons/en/latest/I personally have been playing with Bulma and the United bulmaswatch theme that at least uses typical Ubuntu colors;
https://github.com/jenil/bulmaswatch/tree/gh-pages/united
https://jenil.github.io/bulmaswatch/united/It's not really native looking and more geared towards websites, but at least is is lightweight and a modern CSS framework.
Edit: That said, it would be great if the HTML5 SDK was properly updated and a first class app framework in UT again. However as you will quickly notice the build in qtwebengine embedded browser framework is severely outdated and has problems with GPU acceleration and Mir. So it is a long way (switch to Wayland backend and Ubuntu20.04 most likely) before it can be called that again.
-
Awesome! This is exactly the kind of thing I was looking for, especially the united theme!
Thanks so much!
-
@bryanegraham would you be interested in collaborating on a "HTML5 SDK light" based on Bulma?
-
@bryanegraham Started working on it, but not usable yet. PRs welcome.
https://github.com/poVoq/HTML5-appsdk-bulmaFairphone 5 (waiting for port)
-
As an alternative to the old sdk, there is the Vanilla framework by Canonical: https://vanillaframework.io/
It's not 100% Ubuntu Touch, but fairly close. I've used it for my Recipe Boss app: https://open-store.io/app/recipe-boss.bhdouglass -
@bhdouglass hmm I wasn't aware of it
Maybe not a bad choice...
Edit: It requires Vue? -
@poVoq No, vanilla framework is just css, Vue is just my preferred JS framework.
-
I'm really interested about a Vanilla CSS framework which could be used to develop HTML5 apps with a native look'n'feel on UT. I would use it to improve Axolotl, the Signal client.
-
Yeah, might work with Vanilla. But for me it looks way to complex compared to Bulma. I just want something super lightweight and simple to use for html wrappers like my conversejs xmpp client.
-
Sorry to abandon the thread. Other projects ate up all my spare time! :person_bowing_medium-light_skin_tone: I hope you all are doing well!
@poVoq said in CSS and Fonts for Web Apps:
@bryanegraham Started working on it, but not usable yet. PRs welcome.
https://github.com/poVoq/HTML5-appsdk-bulmaI am interested indeed. I've got a couple things I want to do first on the project I want to port, but I'll hit you up on github if I hit any snags getting set up.
@bhdouglass said in CSS and Fonts for Web Apps:
As an alternative to the old sdk, there is the Vanilla framework by Canonical: https://vanillaframework.io/
It's not 100% Ubuntu Touch, but fairly close. I've used it for my Recipe Boss app: https://open-store.io/app/recipe-boss.bhdouglassAwesome I'll take a look at this! Your app is actually a pretty good template for what I'm trying to do, since I'm also using, and I think it has pretty good performance and fits the rest of the os design very well.
-
@bryanegraham feel free to bug me with any questions, I'm happy to help!
