Page 1 of 1

Responsive design (bootstrap / bulma etc.)

Posted: Mon Feb 18, 2019 1:32 pm
by ong19
Hi,

there was a request for version 3 ( https://forums.nubuilder.cloud/viewtopic.php?f=13&t=8713 ) which I want to update and bring back to life.
I am all with sbigelow (in the mentioned post). Responsive seems good, as more and more people are not using desktop, but tablet or mobile devices to access data. Actually for me it might be the point of no return: I kind of need responsive design, as I expect people to use the application on their smartphone.

Say a company member is working out of office and needs to access the next customers address - how should he do that if the text becomes so small on his device? The much better solution would be a responsive design which allows the page elements to "flow". Larger screen - wider display, smaller screen - stacked above each other.

I tried the current version(nubuilder 4 / forte) and HTML5 objects, one for opening a DIV, then some other field, then a HTML5 object for closing a DIV. This did really not work :-(

There are some cumberstones form implementation:
* Every object must have a label
* Every object must hav coordinates that fix it's position.

If you remove those two restrictions: You might introduce a pure HTML object that does not have labels, but instead HTML can be used to create DIVs and SPANs. This would enable the user to create somehting of a logic structure and use his preferred CSS framework for styling.

PS: Bulma Framework - https://bulma.io

Just my 2cents
Olaf

Re: Responsive design (bootstrap / bulma etc.)

Posted: Thu Feb 21, 2019 8:03 am
by kev1n
Olaf,

A responsive design would be awesome of course but I believe a large part of the JavaScript code that creates the objects has to be rewritten. Also the styles have to be completely rewritten. It would probably take months to make the whole nuBuilder framework responsive.

The only "quick" way I see to use Bulma with nuBuilder (for certain forms) is to use a nuBuilder HTML object in which the Bulma specific HTML elements are inserted. Then the html header needs to be modified to enable a responsive layout and the Bulma styles have to be imported.

An experiment shows it could work that way. Nevertheless, there is probably still a lot of work to be done before everything is perfect.
Screenshot_2019-02-20-17-28-11.png

Re: Responsive design (bootstrap / bulma etc.)

Posted: Sat Feb 23, 2019 9:49 am
by ong19
Hi Ken1n,

thanks for your reply - and the successful test - great!
Could you please explain with a little more detail, where you put your HTML objects and what they contained? I did try this too, but I failed.

Olaf