povoq/html5-appsdk-bulma

Simple HTML5 app template for Ubuntu Touch made with Bulma CSS and VanillaJS

HTML5-appsdk-bulma

Simple HTML5 app template for Ubuntu Touch made with Bulma CSS and VanillaJS.

You might want to check out the official (but outdated) HTML5 SDK instead.

Known issues

• Let me know :)

Todo

• Initial prototype
• Replace Fontawesome icons with Suru

Credits

• Bulma
• Bulmaswatch
• Bulma-switch
• Bulma-interactions
• Fontawesome5

Copyright (C) 2019 - 2020 poVoq

html5-appsdk-bulma's Issues

Include source scss files?

Probably better to also include the source files for the minified css files to build them easier.

Replace Fontawesome icons with Suru?

Bulma comes with Fontawesome icons build in (still need to be added to this repo), but in general it would be nicer to have the native Suru icons as well.

They are available here as SVGs:
http://docs.ubports.com/projects/icons/en/latest/

Bulma seems to be able to work with SVGs directly, but it might be nicer to have a webfont file with them that makes it easy to swap them in and out against Fontawesome.

Native Ubuntu font?

The Bulmaswatch United theme does seem to include some font styling but maybe it would be better to include the ubuntu-light font from the original HTML SDK:
https://github.com/ubports/ubuntu-html5-theme/blob/xenial/0.1/ambiance/css/ubuntu-light.woff

Various Bulma extensions for a closer to native feel?

Default Bulma is missing various styles for a nice mobile UI.

Here are some extensions that could be utilized:
https://bulma.io/extensions/

Also see:
https://wikiki.github.io/
https://github.com/wikiki/bulma-extensions

https://github.com/chrisrhymes/bulma-block-list

https://creativebulma.net/product/calendar/demo
https://github.com/wikiki/bulma-calendar

https://github.com/mymth/vanillajs-datepicker

https://github.com/hunzaboy/Cool-Checkboxes-for-Bulma.io

https://github.com/aldi/bulma-social

https://github.com/mubaidr/bulma-addons
https://mubaidr.js.org/bulma-addons/#/addons

https://github.com/roslyak/css-snippets

Also some website templates that could give inspiration:
https://aldi.github.io/awesome-bulma-templates/
https://github.com/Subtora/bulma-dark
https://github.com/michael-andreuzza/Free-Bulma-Templates

Clean vanilla javascript to complement Bulma?

Not everything can be some in pure CSS and I would like to avoid pulling in a full javascript framework.

Maybe in the future something like Svelte is an option but for now I want to keep it simple.

Here are some options:
https://github.com/tontonsb/bulma-interactions

https://github.com/devgeniem/bulmally

Switch to Vanilla Framework?

Seems like there is actually a fairly modern Ubuntu Touch like HTML framework:
https://vanillaframework.io/

Maybe the better solution given that there is even already a UT app build with it?
https://open-store.io/app/recipe-boss.bhdouglass

Add example html code

As a show case for buttons, modals etc.

Add fontawesome files

Currently still missing

Dark theme switching?

Needs further research, but it would be nice if the theme could be easily switched.
See also: https://github.com/Subtora/bulma-dark

Nice mobile menu?

The navbar Bulma has build in works, but is really more geared towards websites.
A nice left slide in menu with hamburger button or something like that which people are used to from android might be better.

Currently I am looking at these options:
More like a website menu, but looks ok on mobile and might work well on Tablets?
https://github.com/hunzaboy/bulma-megamenu

Default navigation menu from here:
https://github.com/mubaidr/bulma-addons

Or this right side slider?
https://github.com/Wikiki/bulma-quickview/tree/e70542dd3598f19eed30cd207fcbf9fe3ab17b54

Slider switch upstream and color fix

Right now the included slider switch is an older version due to an bug and has been partially modified for the Ubuntu colors from United Bulmaswatch.

This should probably be made less hackish.

Original repo here:
https://github.com/Wikiki/bulma-switch