I have to make a complex layout in html / css / js.
It's more like a picture honestly because of how complex it is.
For example on the left there are some buttons in a group and then on the bottom there is a line of buttons, and then some single buttons near the top.
If I was able to make it in xaml it would really simple, just set the location of the element in a grid or set the location in a canvas.
What is a good approach to making this layout?
I made it using bootstrap but it's really not working out when i need to add background to certain areas.
Do I have to use css grid? Is there maybe a js framework that can help?
Going to go with css grid and have a bunch of rows and columns. Seems like it's good enough. Don't think it's possible to do all of it with bootstrap simply.
Bootstrap is terrible in my opinion, along with all other frameworks that dump loads of unsemantic data in your HTML just to make it look a certain way.
Honestly, I mostly just write my layouts by hand, without using UI frameworks. Instead of using JavaScript, you can do a lot with CSS media queries. If you want to perform calculations in your layout, use SCSS and the compile it to plain CSS.
I will admit: I am not a front-ender and I'm not up to date with all the latest standards and practices. But it seems to me that most of the layout things one could want can be done with just HTML 5 and CSS 3.
Maybe you can show us a mockup of your page and we can suggest how to approach its implementation.
I attached an image of how the top part will look like. There will be another layout that looks similar on the same page under it.
It's basically a control panel. Those dark squares are buttons and the 3 bigger squares will be some visual graphic to group them together. There will also be labels all over.
I put together a layout that has them in a simple grid with 3 rows. I drew out a more complex grid for them on paper with 13 rows and 20+ columns to make it look better.
Maybe there's a better way? I have to set the row, col, and spans for each button so it's pretty tedious.
I'll see if I can come up with an example for you. The part with the slanted buttons looks like it might be a bit more difficult, maybe Bear has good advice for that.
What's more important though, is that you need to know how the UI will react when you resize it. On what part of the screen to the buttons stay? Do the buttons resize, do they move around and where to? Does your layout change completely once the screen size reaches a certain threshold?
Maybe it's a good idea if you write your GUI in XAML and share it with us, so we can see it in action for ourselves and play with the window size.
Actually I put it together already with css grid. I still used bootstrap for dividing the two main layouts. I did actually use rotate for those center buttons. They were still too far apart being centered so I moved them relative to top / left.
I used percent for everything so resizing works pretty well.
I'll post my html minus any private info.
1
![[Thumbnail for layout.png]](/t/729069/a/10942/layout.png "Filename: layout.png
Description:")
