Constraint based stylesheets are pretty interesting. Existing implementations are usually built on the Cassowary Constraint Solver, with the leading one being Grid Stylesheets.
There's also a higher level system called [Visual Formatting Language]() that allows you to describe high level layout as a little drawing. So, here's an example of a horizontal row with some buttons:
The 10s represent the amount of spacing. You're also able to describe variable spacing with ~.
General Thoughts
Are constraints an intuitive interface to style?
I'm a bit torn. They're very cool, though I'm not sure what the experience would be with a large stylesheet.
Silent Failure
Right now the above technologies fail silently if you overconstrain values. They provide a log viewer, though I dont really like the idea of diving into logs when my styles break.
Big Project
The two options generally seem to be interfacing with something like Grid Stylesheets directly or reimplementing this in Elm, which is probably an enormous project. Basically I see two things needed to bring this to style-elements.
A constraint solver
A CSS value harvester to get things like the intrinsic height of an element, which is required for all these calculations.
Constraints
Constraint based stylesheets are pretty interesting. Existing implementations are usually built on the Cassowary Constraint Solver, with the leading one being Grid Stylesheets.
Here's an example:
So, you're setting the constraints that a property can be and a bunch of magical math happens to arrive at a value.
Here's slightly out of date video on grid stylesheets.
Visual Formatting Language
There's also a higher level system called [Visual Formatting Language]() that allows you to describe high level layout as a little drawing. So, here's an example of a horizontal row with some buttons:
The 10s represent the amount of spacing. You're also able to describe variable spacing with
~.General Thoughts
Are constraints an intuitive interface to style?
I'm a bit torn. They're very cool, though I'm not sure what the experience would be with a large stylesheet.
Silent Failure
Right now the above technologies fail silently if you overconstrain values. They provide a log viewer, though I dont really like the idea of diving into logs when my styles break.
Big Project
The two options generally seem to be interfacing with something like Grid Stylesheets directly or reimplementing this in Elm, which is probably an enormous project. Basically I see two things needed to bring this to
style-elements.