4 ms·
Yeah I'm fairly proficient with CSS, having written it for over a decade, and as I skimmed the article I found myself getting a bit overwhelmed. Seems like quit
by danielvaughn 4y ago
Yeah I'm fairly proficient with CSS, having written it for over a decade, and as I skimmed the article I found myself getting a bit overwhelmed. Seems like quite a bit of effort.
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
}
This code would anchor the red square to the bottom/right of the blue square, with a 10px spacing between the two. Super simple! Far more difficult to implement a backend that satisfies this of course, which is why I haven't made much progress lol.
- dezgeg 4y agoIf I remember right, QML used in Qt allows that kind of positioning.
- danielvaughn 4y agoYep, Qt uses a very similar syntax.
- sorcix 4y agoThis is what Slint[1] does in their UI language[2]. 1: https://slint-ui.com/ https://slint-ui.com/ 2: https://slint-ui.com/releases/0.3.5/docs/rust/slint/docs/langref/index.html https://slint-ui.com/releases/0.3.5/docs/rust/slint/docs/lan...
- danielvaughn 4y agoEvery time I bring up my language on HN, someone tells me about a project I've never heard of before. This is super interesting, thanks for sharing!
- bfgeek 4y agoFWIW the equivalent code with this API is: .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); } https://jsfiddle.net/kbqua1te/ https://jsfiddle.net/kbqua1te/