Constraint CSS - Hackdot

Re:Constraint CSS by spiralganglion on Friday July 04, 2014 @11:24AM (#7989128)

One of the devs of this project gave a talk about the motivation behind it, how it works, and other interesting details [1].

Of note, this project goes a fair bit deeper into advanced layout possibilities than the flexbox and grid modules included in the current CSS spec/drafts. Flexbox, for instance, prescribes a very particular pattern to the layouts that it affords. You must be rather methodical in how you break your layout into nested rows and columns. This focus on rows and columns causes quite a bit of visual shoehorning, or forces you to resort to hacks, at which point you've lost most of the benefit of using flexbox at all. Though for simple- to medium-complexity layouts where the visual arrangement is composed of nested rectangles following simple rules (as most of the web seems to be), flexbox is wonderful once you get the hang of it.

I'm very fond of constraint-based layout systems (and rule systems in general), having written a few of them myself. I feel that while this GSS project isn't a complete realization of the promise they offer, it is a nice step in that direction. I worry about the performance and complexity burdens this project seems to impose, though I say that only looking at the docs, the generated code, and the discussions that emerged the last time this was posted to HN. I will be using it for an in-house dev-facing tool in the near future, and about that I am quite excited.

[1]: https://vimeo.com/91393694

[ Parent | on HN ]

Re:Constraint CSS by d4tocchini on Friday July 04, 2014 @11:56AM (#7989253)

And here's a GSS screencast [1] that accompanied a tutorial in most recent issue of Net Magazine [2]

[1]: https://vimeo.com/99873002 [2]: http://www.creativebloq.com/net-magazine

[ Parent | on HN ]

Re:Constraint CSS by notduncansmith on Friday July 04, 2014 @09:26PM (#7990757)

Thanks for the link. It did help cement some of the concepts presented on the website, but the presenter did a really poor job of selling some of it: "This... [points to screen] ... I don't know, it's crazy. [next slide]". How does that in any way convey the value of this thing?

Also, his answer to the question "How do we debug GSS styles?" was pretty worrisome: "Just add and remove constraints, and see what breaks it". That sounds to me like what a lot or people are doing with CSS right now, and the idea is horrifying. It's tough to imagine embracing a nondeterministic system where there's no telling what rules you've given it will be obeyed, and which will be ignored - at least in CSS, it's pretty clear when something will be overridden.

[ Parent | on HN ]

Re:Constraint CSS by ender7 on Friday July 04, 2014 @11:57AM (#7989255)

Performance would always be my key concern with something like a general-purpose constraint solver. I know that LP is a field in its own right, but I don't have a ton of experience there -- do you think there's a practical path to bringing the performance up to a necessary level (i.e. real-time, <10ms calculation times for complex pages)?

[ Parent | on HN ]

Re:Constraint CSS by d4tocchini on Friday July 04, 2014 @12:05PM (#7989289)

Perf is surprisingly good, suitable for modern web apps. The bottleneck is DOM & CSS selector resolution, not the constraint solver - Cassowary is a beast!

We're working on a lib for pre-computing GSS layouts server-side, but it's significantly more hardcore than traditional pre-processing.

What we really need is browser vendors to offer deeper API hooks into layout lifecycle, painting, etc

[ Parent | on HN ]

Re:Constraint CSS by skrebbel on Friday July 04, 2014 @02:24PM (#7989749)

Did you or someone else ever try combining it with React? Because of the virtual DOM, it'll probably mean that you won't need CSS selector resolution at all. Not sure here - I don't know how the solver gets its input (e.g. how you compute which elements impact which ones - do you read existing offsets and sizes from the browser DOM, or do you do something different?). But somehow I feel that the constraints story and React's render-only pipeline should somehow be able to work together really well.

[ Parent | on HN ]