UBports Robot Logo UBports Forum
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Register
    • Login

    CSS and Fonts for Web Apps

    App Development
    4
    12
    500
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • bryanegrahamB
      bryanegraham
      last edited by

      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.

      1 Reply Last reply Reply Quote 3
      • poVoqP
        poVoq
        last edited by poVoq

        There is the old and abandoned HTML5 UI SDK:
        https://github.com/ubports/ubuntu-html5-theme

        https://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.

        OnePlus3 (back on LinageOS)

        1 Reply Last reply Reply Quote 1
        • bryanegrahamB
          bryanegraham
          last edited by

          Awesome! This is exactly the kind of thing I was looking for, especially the united theme!

          Thanks so much!

          poVoqP 2 Replies Last reply Reply Quote 0
          • poVoqP
            poVoq @bryanegraham
            last edited by

            @bryanegraham would you be interested in collaborating on a "HTML5 SDK light" based on Bulma?

            OnePlus3 (back on LinageOS)

            1 Reply Last reply Reply Quote 0
            • poVoqP
              poVoq @bryanegraham
              last edited by

              @bryanegraham Started working on it, but not usable yet. PRs welcome.
              https://github.com/poVoq/HTML5-appsdk-bulma

              OnePlus3 (back on LinageOS)

              bhdouglassB bryanegrahamB 2 Replies Last reply Reply Quote 0
              • bhdouglassB
                bhdouglass @poVoq
                last edited by

                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

                open-store.io && bhdouglass.com

                poVoqP 1 Reply Last reply Reply Quote 1
                • poVoqP
                  poVoq @bhdouglass
                  last edited by poVoq

                  @bhdouglass hmm I wasn't aware of it 😞
                  Maybe not a bad choice...
                  Edit: It requires Vue?

                  OnePlus3 (back on LinageOS)

                  bhdouglassB 1 Reply Last reply Reply Quote 0
                  • bhdouglassB
                    bhdouglass @poVoq
                    last edited by

                    @poVoq No, vanilla framework is just css, Vue is just my preferred JS framework.

                    open-store.io && bhdouglass.com

                    1 Reply Last reply Reply Quote 0
                    • FlaF
                      Fla
                      last edited by

                      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.

                      1 Reply Last reply Reply Quote 0
                      • poVoqP
                        poVoq
                        last edited by

                        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.

                        OnePlus3 (back on LinageOS)

                        1 Reply Last reply Reply Quote 0
                        • bryanegrahamB
                          bryanegraham @poVoq
                          last edited by

                          Sorry to abandon the thread. Other projects ate up all my spare time! 🙇🏼 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-bulma

                          I 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.bhdouglass

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

                          1 Reply Last reply Reply Quote 0
                          • bhdouglassB
                            bhdouglass
                            last edited by

                            @bryanegraham feel free to bug me with any questions, I'm happy to help!

                            open-store.io && bhdouglass.com

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post