Will definitely take another stab using this. I'm assuming the grids compose, so I can work on one group (say name-address set) and it'll be well behaved when added into a larger layout grid.
The WYSIWYG drag and drop is nice, but if the results are predictable enough a manual "edit-and-run" cycle should suffice.
> Of course these items would already be styled themselves to maintain label positioning and alignment
So I guess this is the only thing I'd still be struggling with. Concretely, consider a grid layout like this:
a b
c c
d e
Here each cell has a label and a text input. Here the labels and inputs in a and d, as well as b and e, should automatically line up vertically, including if say b's label changes due to a dynamic event.
I'll have to see if it's easier with the grid layout.
>I'm assuming the grids compose, so I can work on one group (say name-address set) and it'll be well behaved when added into a larger layout grid.
Yes. That will work as expected.
>Here the labels and inputs in a and d, as well as b and e, should automatically line up vertically, including if say b's label changes due to a dynamic event.
This is where not rolling your own UI elements are faster. They will have been tested and any serious problems would have been addressed. But, even if you do roll your own, you can expect to be able to line up labels and fields both vertically and horizontally, even if the labels dynamically change (although watch for line wrapping if that is a possibility).
But, generally, your idea would work. I typically use flexbox unless I have a reason to use grid. For example if the entire flow of a page design changes between desktop and mobile, I normally use grid or if I need things consistently centered both vertically and horizontally, I use grid.
For laying out form UI elements, there are tons of examples that you can easily find online to fit the look and feel you are looking for.
If you have not settled on a stack yet, Svelte and Solid will offer the snappiness you are used to with desktop apps (due to no duplicate/virtual DOM). The drawback being that plugin elements are more readily available for more popular frameworks like React, however imho the plugins for Svelte or Solid tend to be better written.
Will definitely take another stab using this. I'm assuming the grids compose, so I can work on one group (say name-address set) and it'll be well behaved when added into a larger layout grid.
The WYSIWYG drag and drop is nice, but if the results are predictable enough a manual "edit-and-run" cycle should suffice.
> Of course these items would already be styled themselves to maintain label positioning and alignment
So I guess this is the only thing I'd still be struggling with. Concretely, consider a grid layout like this:
Here each cell has a label and a text input. Here the labels and inputs in a and d, as well as b and e, should automatically line up vertically, including if say b's label changes due to a dynamic event.I'll have to see if it's easier with the grid layout.