3 ms·

> CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements I couldn't agree more! Does anyone k

by uryga 8y ago

> CSS defines properties on individual elements, while layout fundamentally needs to define relationships between elements I couldn't agree more! Does anyone know a language/toolkit/something that gets layout right? I remember getting excited by Grid Stylesheets [1] but the project seems dead now... [1] https://github.com/gss/ https://github.com/gss/

rimliu 8y ago
I do. It's CSS. There is a nifty feature display: grid. And also display: flex.
- ZenPsycho 8y ago
  This is not what I mean. Flex and Grid are simply defining layout in terms properties on an individual element, and what it expects its children to do. Still no way to represent relationships between elements (except the implied relationship between siblings, only indirectly accessible by setting properties on their parent, or setting properties on a child that affect the implicit relationship between it and its parent and or siblings, such as, eg, "margin") These things at least make certain things that were simply impossible to do before now possible, but they're doing it in a bolted on, unnatural, overcomplicated way. And still there are things that are only possible by rearranging the HTML to accomodate the implied relationships these layout systems expect.
avip 8y ago
I’m still missing xaml every time I need to position something on a webpage.
int_19h 8y ago
Take a look at WPF and its descendants (like the UWP XAML). https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/layout https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanc... https://docs.microsoft.com/en-us/windows/uwp/design/layout/layouts-with-xaml https://docs.microsoft.com/en-us/windows/uwp/design/layout/l...
thexa4 8y ago
The layout constraints system on iOS works pretty well once you understand that it uses a global constraint solver: https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html https://developer.apple.com/library/archive/documentation/Us...
- ZenPsycho 8y ago
  I wonder if CSS could be translated/compiled to sets of linear constraints? Obviously just the parts that affect layout would be relevant for this translation. But I wonder if it's possible to come up with a formalised mathematical relationship between the byzantine context sensitive rules of CSS layout, and the smaller set of building blocks that cassowary supplies. And then, I wonder how much could be round tripped? Do flexbox and grid fill enough of the gaps to make systems of linear constraints fully expressible in terms of flexbox/grid? If not, where are the remaining gaps, and are they useful enough "real world" usecases that you couldn't practically make constraints->css a (potentially) lossy translation. It kinda looks like GSS attempted this, but I wonder if GSS can be improved upon to rely less on JS for filling the gaps in 2018?
aaaaaaaaaab 8y ago
AutoLayout on iOS and macOS. It’s a modern incarnation of the Cassowary constraint solver: https://dl.acm.org/citation.cfm?id=504705 https://dl.acm.org/citation.cfm?id=504705 Mind you, people who don’t understand linear constraint systems (typically web devs) will find it hard to use (and they usually complain about this endlessly, because in their opinion Apple should “just use flexbox” - which is ironically just a special case of a linear constraint layout). I’m afraid CSS (and the web in general) is just another case of the “Worse is better” paradigm.

by uryga 8y ago

rimliu 8y ago

I do. It's CSS. There is a nifty feature display: grid. And also display: flex.

ZenPsycho 8y ago
This is not what I mean. Flex and Grid are simply defining layout in terms properties on an individual element, and what it expects its children to do. Still no way to represent relationships between elements (except the implied relationship between siblings, only indirectly accessible by setting properties on their parent, or setting properties on a child that affect the implicit relationship between it and its parent and or siblings, such as, eg, "margin") These things at least make certain things that were simply impossible to do before now possible, but they're doing it in a bolted on, unnatural, overcomplicated way. And still there are things that are only possible by rearranging the HTML to accomodate the implied relationships these layout systems expect.

avip 8y ago

I’m still missing xaml every time I need to position something on a webpage.

int_19h 8y ago

Take a look at WPF and its descendants (like the UWP XAML). https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/layout https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanc... https://docs.microsoft.com/en-us/windows/uwp/design/layout/layouts-with-xaml https://docs.microsoft.com/en-us/windows/uwp/design/layout/l...

thexa4 8y ago

The layout constraints system on iOS works pretty well once you understand that it uses a global constraint solver: https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html https://developer.apple.com/library/archive/documentation/Us...

ZenPsycho 8y ago
I wonder if CSS could be translated/compiled to sets of linear constraints? Obviously just the parts that affect layout would be relevant for this translation. But I wonder if it's possible to come up with a formalised mathematical relationship between the byzantine context sensitive rules of CSS layout, and the smaller set of building blocks that cassowary supplies. And then, I wonder how much could be round tripped? Do flexbox and grid fill enough of the gaps to make systems of linear constraints fully expressible in terms of flexbox/grid? If not, where are the remaining gaps, and are they useful enough "real world" usecases that you couldn't practically make constraints->css a (potentially) lossy translation. It kinda looks like GSS attempted this, but I wonder if GSS can be improved upon to rely less on JS for filling the gaps in 2018?

aaaaaaaaaab 8y ago

AutoLayout on iOS and macOS. It’s a modern incarnation of the Cassowary constraint solver: https://dl.acm.org/citation.cfm?id=504705 https://dl.acm.org/citation.cfm?id=504705 Mind you, people who don’t understand linear constraint systems (typically web devs) will find it hard to use (and they usually complain about this endlessly, because in their opinion Apple should “just use flexbox” - which is ironically just a special case of a linear constraint layout). I’m afraid CSS (and the web in general) is just another case of the “Worse is better” paradigm.