Maybe this is just as simple as it can get? Either way, avoiding a large amount of quite expensive JS is promising. Looking forward to seeing how this goes. Would love to rip out floating ui dependency.
For years I've been working on a programming language for UI designers, and this was one of the stumbling blocks for me. It's definitely a hard problem.
My solution was to enforce unique names for every element, and then you could use a simple syntax for describing positioning constraints between them. For example:
BlueSquare {
width: 100px
height: 100px
top: 0px
left: 0px
}
RedSquare {
width: 100px
height: 100px
top: @BlueSquare.bottom + 10px
left: @BlueSquare.right + 10px
}
2: https://slint-ui.com/releases/0.3.5/docs/rust/slint/docs/lan...
.BlueSquare {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
anchor-name: --BlueSquare;
}
.RedSquare {
width: 100px;
height: 100px;
top: calc(anchor(--BlueSquare bottom) + 10px);
left: calc(anchor(--BlueSquare right) + 10px);
}
The complexity comes later in the article when they talk about handling details and oddities. Like `position-fallback`.
Again, maybe this is just as simple as it gets since it's just a hard problem. I really would love a CSS-only solution to this. Use cases are everywhere, and I certainly don't have any better ideas.
We already kind of did that with grid I guess. It feels like one step closer to imperative code in CSS rather than declarative, but I'll take it over JS to achieve this effect.