Grid Style Sheets – Replace CSS with a Constraint-Solver
As GUI dev who worked with Apple's AutoLayout extensively I can confidently say constraint-based layout is a trap. It looks like more intuitive way to go on simple examples, but complexity spikes quickly as number of controls goes up. It's more complicated, more resilient to changes (harder to maintain), easy to get wrong, hard to understand and debug, bugs generally look uglier (what would be minor misplacement in CSS often becomes overlapping or clipping). It does not support word wrapping without hacks and restrictive assumptions about width. It is a real mess to insert/remove controls dynamically.
Compared to previous experience with Qt, I don't see any advantage of constraint-based layout over box-based layout.
Interestingly, @vjeux specifically preferred flexbox to a constraint solver (cassowary) for react native: https://twitter.com/nikitonsky/status/561941079038390273
His main points:
* you can't express text wrapping which is a huge issue. You've got to do workarounds in order to support it
* the api is very reference based. You need to say that the right of this element is left of this other one. whereas in react you don't want to assign every element you create to a local variable to get that reference the best api with react is one based on containers. <HorizontalLayout>... This is what I started with in react native but then, i realized that this was so close to flexbox that I could just use it instead :) you could use cassowary as an implementation detail of flexbox but that doesn't give you much
* also, when i tested cassowary, the js version, it was extremely slow. The version that we have in react native barely appears in traces for real code that we have
One of the absolute worst things about iOS development is struggling with auto layout. Sure there are some things you can do with it that are hard to do in a box layout method but 95% of the time it's just a massive headache to achieve something you could do with flexbox or even Bootstrap in a much more transparent way. In fact, one of the most appealing things about React Native is that it lets you do iOS layout with flexbox.
So I'll pass on similar constraint-based approaches to HTML layout, thanks!
From their demo: structure.gss
If you inject stuff like this into a project, make sure you're doing it solo. 'cause if you're on my team, i'll slap you.@h |-(#message)~-~(#follow)~-~(#following)-(#followers)-| in(#profile-card) gap($sgap) !strong { &[top] == &:next[top]; } }WTF is this voodoo? Less and Sass aren't complex enough? CSS isn't hard enough to work with as it is?
Demos were all slightly wrong on Android chrome until I rotated screen at which point they completely broke. Using js to augment layouts with useful functionality is a great idea, but relying on it for core styling is a terrible choice.
I'd love to use this. But in the back of my head I still think javascript should be optional if possible ... not that 99% of the rest of the world cares ...
I go to the demo, resize the browser window, and the layout falls apart. Not a good advertisement.
Constraints are the right approach to layout. This should have happened years ago. The important concept here is defining layout like this:
The trouble with this is that it's expressed as a programmer's approach; everything is about variables, not geometry. Constraints should be input from a GUI, like Dreamweaver. To see what this looks like done right, try sketch mode in Autodesk Inventor, where you can draw lines, circles, and arcs and constrain them to each other in various ways. Designers would love it if they could do layout that way, and we could lay off a few thousand Javascript programmers.#elmA[top-left] == "area"[top-left]; #elmB[bottom-right] == "area"[top-right];Auto-Layout is the worst. I used to spend so much time trying to figure out why things didn't line up or behave like they are supposed to. Luckily pods like Masonry and Paper make things easier but still, it is frustrating. To have it in CSS sounds like an absolute nightmare.
Autolayout is great once you've spent the first three days pulling your hair in anger.
Yet, i would absolutely not use it without the wysiwyg tools xcode provide, such as warnings on conflicts or automatic preview after changing the uppermost container's frame.
I just watched this GSS intro talk from last year: https://vimeo.com/91393694 It looks interesting, but obviously from this and the demo page it needs alot of work to be ready for the mass market.
One piece of advice for Dan if you are reading HN, you have a nice relaxed speaking style but please stop using the word "crazy" or "it gets pretty crazy" which for me at least parses as: "too complex to work with".
If your layout system's site looks like complete arse on a major browser like IE, your layout system deserves to be ignored.
Kudos!
I've been thinking about constraint satisfaction solver for layout, and keep it in mind as a possible project for a future. Great to see someone shares this view and went on to implement it.
I haven't studied this concrete project deeply, but the idea in general seems appealing, because CSS is hell.
(The site says this constraint language is used in Apple products - I didn't know that).
> http://puu.sh/igQ03/9d6f0ffcb5.jpg
I'm opposed to most CSS grid styles as I feel they trade accessibility for a faster production speed. This seems to have neither of those benefits.
That profile card demo completely breaks if you reduce the browser height a bit:
http://i.imgur.com/MLhaheD.png
Perhaps this is why the web uses box-based rather than constraint-based layout.
None of the demos work correctly on safari iOS
I must admit a certain trepidation anytime I hear the phrase, "and replace it with a constraint solver!" Not that they aren't useful and powerful tools. That's exactly the problem, they're very powerful tools. I'm not entirely convinced that doing website layout should require so much computing power.
Also, ironically, the site looks pretty bad on mobile and the entire left side of the page is chopped off. I don't take any "new ideas in style" page seriously if the mobile (or desktop, or whatever I'm using) experience on that page is bad.
I found the picture at the top to be a funny reflection of the problems of layout. The bird (I believe that's a cassowary as on the book cover) in a spacesuit is an interesting juxtaposition artistically, but the helmet face plate won't be able to rotate down over the birds beak and seal the helmet. A 'layout' case that the image didn't consider. Layout is hard.
I don't trust a layout engine whose webpage advertising the engine has centering issues... iPhone 5s in portrait does not center the section starting with 'Polyfills' but does so in landscape mode; I'm pretty sure this was not the expected design.
Heh, I'm looking at React Native with Flex Box precisely because of difficulties I've had with AutoLayout.
What is up with that logo? That's a terrifying chimeric space thing that I don't want on my machine.
Lol, I have a post from years and years ago where I rail against 960 gs and the like "grid style sheets" for not being semantic, and about a year ago one of the authors of this emailed me asking me to amend it specifying that I wasn't talking about this. I declined, and went on to comment how the use of JavaScript for layout was even worse, lol. I was a little irritated at the hubris of the guy and may have gone a little overboard.
You can't choose such an incredibly generic name though and then expect all existing references to update, that's simply illogical.
Update: http://jdon.at/1cgIw the emails in question
