3 ms·

>Some concrete examples or resources would be much appreciated. Ok. I am not sure of your current front-end experience level, so I will give pointers as if you

>Some concrete examples or resources would be much appreciated. Ok. I am not sure of your current front-end experience level, so I will give pointers as if you are not experienced with CSS grid, forgive me if this is incorrect. The key CSS items in this case would be: display: grid; ... which will allow for CSS grid layout, and then for the particular item you discussed, the following two CSS values would do the trick. grid-template-areas .... for the layout container itself in a pseudo-visual way, and grid-area for the items to be laid out. Here[1] is a simple example, but if you are a visual-type person would get the idea across. [1]https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa... The demo at the top of the page is interactive and you can see how easy it is to move around items. Of course these items would already be styled themselves to maintain label positioning and alignment so simply moving the letters in the grid-template-areas value would be sufficient to completely change the layout. This does not let you drag and drop as in your demo, but it is equally fast and gives instant visual feedback in the browser. As a side note, I morn daily the continuing loss of desktop applications, which is where I cut my teeth in development. But the explosion of platforms and continued aggression from OS manufactures in the name of "safety" is basically forcing the hands of people to move to web apps. I agree that, in general, they are not as snappy or as light-weight as a well-designed desktop application (a "real" one, not an electron app), but if you know what you are doing you can get close and get all the benefits that do come with web apps. And, from someone that has done both desktop and web app development, web apps can be laid out very quickly if you have experience. I almost can not think of a single-page (non-animated) application that I can't layout in a single day. This is especially true if you are using an existing UI framework or you have built-up one of your own over time. The time-consuming parts tend to be testing on multiple platforms/screen-sizes for compatibility (iOS being the worst) and the business logic. Let me know if that is not the type of info you were looking for, and I will be happy to point you in a direction to get the info you are looking for.

magicalhippo 4y ago
Ah excellent, thank you very much. 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.
- mhuffman 4y ago
  >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.

magicalhippo 4y ago

Ah excellent, thank you very much. 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.

mhuffman 4y ago
>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.