5 ms·

I'd been working on a similar syntax for a while, mostly was inspired by some work I did in iOS back in 2015/2016. They used a constraint system and it's honest

I'd been working on a similar syntax for a while, mostly was inspired by some work I did in iOS back in 2015/2016. They used a constraint system and it's honestly pretty great, though some of the more complex features can be daunting. I'd love something like this: red-box { width: 100 height: 100 top: 10 left: 10 } blue-box { width: 50 height: 50 top: $red-box.bottom * 2 left: $red-box.right + 100 }

pistoleer 2y ago
Yes, that's exactly what I'm talking about!
- danielvaughn 2y ago
  Yeah it would be nice if it felt like saying "this goes here, that goes there." I wanted it to mirror how someone might verbally speak about layout. It gets harder when you consider multi-dimensional layouts like grids, but for 1D things like headers or lists, it would significantly reduce complexity.
graypegg 2y ago
I think CSS's own internal logic prevents this sort of syntax from working, since you could be talking about any element matching `red-box`. There's no good way to refer to a specific match of a selector, unless you enforce that the selector only selects 1 thing, even then, that would be conceptually hard to deal with. I think flexbox and grid handle a good chunk of what you'd want here, but having to handle constraints at the "group" level. Either flexbox, so the browser finds the best way to place elements into a line based on your rules, or grid for 2 dimensions: boxes { display: grid; /* there are only 2 columns, 100px each */ grid-template-columns: 100px 100px; /* all rows are 100px tall */ grid-auto-rows: 100px; > * { /* All children take up 1 col, and 1 row */ grid-column-end: span 1; grid-row-end: span 1; } } blue-box { /* blue-box must start at col #2 and row #2 */ grid-column-start: 2; grid-row-start: 2; }
- danielvaughn 2y ago
  I hear you, though one of the newest CSS features does in fact support this. It's called the anchor positioning API: https://developer.chrome.com/blog/anchor-positioning-api https://developer.chrome.com/blog/anchor-positioning-api The problem with this specific API is that it depends on source order. To have element-b anchored to element-a, element-a must come first in source. I'm not really sure if it was designed that way or just implemented that way in Chrome, but it's the behavior I experienced when I played around with it.
- phatskat 2y ago
  Tailwind’s group selectors may be able to help some here, not sure and I’m on mobile so can’t play with it. I am working on a as-close-to-pure CSS solution for a list with content to one side. When you scale to mobile, the list is the only displayed element. If you click a list item, the details become the full view with a button to go back to the list. Currently we are detecting mobile based on a JS library and branching the template based on that, which I abhor. Using Tailwind’s media prefixes and some data- group selectors, I’ve gotten a rough version working with just two small JS listeners to toggle the open state. I think you could apply group rules to target a specific child or sibling in such a way that you can apply specific rulesets, and maybe CSS variables to dynamically base those on sibling values.

pistoleer 2y ago

Yes, that's exactly what I'm talking about!

danielvaughn 2y ago
Yeah it would be nice if it felt like saying "this goes here, that goes there." I wanted it to mirror how someone might verbally speak about layout. It gets harder when you consider multi-dimensional layouts like grids, but for 1D things like headers or lists, it would significantly reduce complexity.

graypegg 2y ago

I think CSS's own internal logic prevents this sort of syntax from working, since you could be talking about any element matching `red-box`. There's no good way to refer to a specific match of a selector, unless you enforce that the selector only selects 1 thing, even then, that would be conceptually hard to deal with. I think flexbox and grid handle a good chunk of what you'd want here, but having to handle constraints at the "group" level. Either flexbox, so the browser finds the best way to place elements into a line based on your rules, or grid for 2 dimensions: boxes { display: grid; /* there are only 2 columns, 100px each */ grid-template-columns: 100px 100px; /* all rows are 100px tall */ grid-auto-rows: 100px; > * { /* All children take up 1 col, and 1 row */ grid-column-end: span 1; grid-row-end: span 1; } } blue-box { /* blue-box must start at col #2 and row #2 */ grid-column-start: 2; grid-row-start: 2; }

danielvaughn 2y ago
I hear you, though one of the newest CSS features does in fact support this. It's called the anchor positioning API: https://developer.chrome.com/blog/anchor-positioning-api https://developer.chrome.com/blog/anchor-positioning-api The problem with this specific API is that it depends on source order. To have element-b anchored to element-a, element-a must come first in source. I'm not really sure if it was designed that way or just implemented that way in Chrome, but it's the behavior I experienced when I played around with it.
phatskat 2y ago
Tailwind’s group selectors may be able to help some here, not sure and I’m on mobile so can’t play with it. I am working on a as-close-to-pure CSS solution for a list with content to one side. When you scale to mobile, the list is the only displayed element. If you click a list item, the details become the full view with a button to go back to the list. Currently we are detecting mobile based on a JS library and branching the template based on that, which I abhor. Using Tailwind’s media prefixes and some data- group selectors, I’ve gotten a rough version working with just two small JS listeners to toggle the open state. I think you could apply group rules to target a specific child or sibling in such a way that you can apply specific rulesets, and maybe CSS variables to dynamically base those on sibling values.