Using Bulma

[alirezamecheng]

Hello, Thank you for your wonderful package. I was reading the documentation and reached to this paragraph:

Interact widgets are by default styled with the Bulma CSS framework (the previously supported UIkit backend is now deprecated). Bulma is a pure CSS framework (no extra Javascript), which leaves Julia fully in control of manipulating the DOM (which in turn means less surface area for bugs).

I read the Bluma documentation and WebIO.jl documentation it seems that Bluma is a very good choice and I want to use its abilities to style my application but I couldn't figure out how can I do that. Can you please give us an example of that? Thank you for your time and attention.

[piever]

Hi! Thanks for the kind words.

To use Bulma you can simply use WebIO nodes and add classes that belong to Bulma, for example Node(:button, "press me", className="button is-primary")). To load the Bulma css you can put the node in a scope and add Bulma css cdn to the imports https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css. If you have loaded Interact you can also use InteractBase.slap_design!.

For example:

scp = Scope(imports = ["https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"])
ui = Node(:button, "press me", className="button is-primary"))
scp.dom = ui

or (if you loaded Interact)

scp = Scope()
ui = Node(:button, "press me", className="button is-primary"))
scp.dom = ui
InteractBase.slap_design!(scp)

[alirezamecheng]

It works. Thanks. Just to complete the code you have written I rewrite the entire code again.

using WebIO
using Blink

scp = Scope(imports = ["https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"])
ui = Node(:button, "press me", className="button is-primary")
scp.dom = ui

w = Window()
body!(w,scp)

And ofcorse if you load the Interact package

using WebIO
using Blink
using Interact

scp = Scope()
ui = Node(:button, "press me", className="button is-primary")
scp.dom = ui
InteractBase.slap_design!(scp)

w = Window()
body!(w,scp)

Just a note to add. My mistake was that I was loading body!(w,ui) instead of body!(w,scp).