Win a copy of Five Lines of Code this week in the OO, Patterns, UML and Refactoring forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Liutauras Vilda
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • fred rosenberger
  • salvin francis
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Carey Brown

Easy in Xaml, hard in HTML/CSS

 
Rancher
Posts: 527
6
IntelliJ IDE Spring Fedora
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey All,

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?

Thank you for any insight

 
Al Hobbs
Rancher
Posts: 527
6
IntelliJ IDE Spring Fedora
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Saloon Keeper
Posts: 12126
258
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Al Hobbs
Rancher
Posts: 527
6
IntelliJ IDE Spring Fedora
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
layout.png
[Thumbnail for layout.png]
 
Stephan van Hulst
Saloon Keeper
Posts: 12126
258
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Marshal
Posts: 67414
173
Mac Mac OS X IntelliJ IDE jQuery Java
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The slanted buttons could be accomplished with a CSS rotate transform.
 
Al Hobbs
Rancher
Posts: 527
6
IntelliJ IDE Spring Fedora
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.

 
Al Hobbs
Rancher
Posts: 527
6
IntelliJ IDE Spring Fedora
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Here's my javascript. I used signalr library for the websocket connection.  Everything works perfectly. I am open to any criticism.
    Bookmark Topic Watch Topic
  • New Topic