Responsive design (bootstrap / bulma etc.)

Questions related to using nuBuilder Forte.

Responsive design (bootstrap / bulma etc.)

Postby ong19 » Mon Feb 18, 2019 10:02 pm

Hi,

there was a request for version 3 ( 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
* Database development *
https://datenbank-projekt.de *
ong19
 
Posts: 16
Joined: Sat Feb 16, 2019 1:43 am

Re: Responsive design (bootstrap / bulma etc.)

Postby kev1n » Thu Feb 21, 2019 4:33 pm

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
Screenshot_2019-02-20-17-28-11.png (118.72 KiB) Viewed 398 times
kev1n
 
Posts: 358
Joined: Mon Oct 15, 2018 2:13 am

Re: Responsive design (bootstrap / bulma etc.)

Postby ong19 » Sat Feb 23, 2019 6:19 pm

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
* Database development *
https://datenbank-projekt.de *
ong19
 
Posts: 16
Joined: Sat Feb 16, 2019 1:43 am


Return to General