
Grid Style Sheets – Replace CSS with a Constraint-Solver - aeontech
http://gridstylesheets.org/
======
hamstergene
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.

~~~
thewarrior
I saw the headline , didn't even read the article and came here to say this
and saw your comment.

I've been struggling with auto-layout for about six months now. I finally get
it but there's a certain impedance mismatch between how you want your elements
to be laid out and what constraints are required to achieve the same result.
Humans beings aren't wired to intuitively think like a constraint solver.

I'm not an experienced developer but my thinking on this issue is that the
platform should provide some functionality to achieve the most common boiler-
plate layouts and anything more complex should be written in code.

Usually constraints are simple and so are the layouts. But to achieve more
complex layouts you need constraints which are at cross purposes to each other
but have different priorities. It's not intuitive to work through this stuff.

Here's an example :

[http://stackoverflow.com/questions/25766747/emulating-
aspect...](http://stackoverflow.com/questions/25766747/emulating-aspect-fit-
behaviour-using-autolayout-constraints-in-xcode-6)

The answer there is great but tell me , you could have aspect fitted the view
to it's parent in just four lines of code instead of going through this
confusing series of constraints.

I was making a tic tac toe game and I decided to try and draw the boxes and
lines using auto layout. The constraints were making me tear my hair out and
finally I wrote 5 lines of custom layout code and it took me only ten minutes
and this was after futzing about with the constraints for half an hour and it
did what I wanted to on an iPhone , iPad and for any height or width.

I personally believe in a simplified version of FlexBox for common cases (yes
I think it needs to be even simpler) and custom code for anything more
complex.

Bringing in all the baggage of a constraint solver to do your layout is like
trying to use an Abrams Tank to kill a mouse.

~~~
murbard2
Perhaps the right approach would be to still use constraints to describe the
layout, but to infer those constraints from examples provided interactively by
the designer. The workflow would be:

10 designer creates an initial mock-up

20 designer re-sizes the window / uses another device

30 designer alters the style on that new format, re-sizing boxes, changing
font sizes, etc.

40 constraint solver finds a minimal set of constraints consistent with the
designer wishes

50 goto 20

~~~
masklinn
Some sort of genetic constraint generator, where the fitness function is
examples provided by designers?

~~~
murbard2
The examples are meta-constraints. The fitness function is the
parsimoniousness of layout constraints, under the constraint that they
reproduce the examples.

------
masklinn
Interestingly, @vjeux specifically preferred flexbox to a constraint solver
(cassowary) for react native:
[https://twitter.com/nikitonsky/status/561941079038390273](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

------
cageface
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!

~~~
pavlov
Agreed completely. Constraint-based layout solvers are very appealing to
programmers because they seem intuitively like the "right" solution -- but
that intuition is based on the programmer's mental model of user interfaces.
Constraints don't match the way designers think and work, so they're not good
as a non-programmer's interface.

As often happens with solutions that are abstractly "right", constraint-based
layout engines do a great job of fixing complex theoretical non-problems that
nobody was asking to have fixed, while at the same time failing to address
real-world issues that impede users' everyday workflows.

~~~
kenferry
> appealing to programmers because they seem intuitively like the "right"
> solution … Constraints don't match the way designers work

Interesting, I'd say almost the opposite.

These constraints capture almost exactly the same thing as the orange guide
lines you see in Keynote (or Powerpoint, or whatever). This is inset from the
top right by 10, this button is the same width as the one above, the distance
between these two buttons is eight.

That's almost exactly what designers' specs look like in my experience –
screenshots annotated with lines with numbers on 'em.

~~~
paulojreis
> That's almost exactly what designers' specs look like in my experience –
> screenshots annotated with lines with numbers on 'em.

Yes, but that's because those designers were asked to specify the layout in
engineer terms. :) That doesn't mean that that's the way they think and
conceive the UI.

~~~
Ygg2
Actually - learning to draw, one of first thing to learn is proportions.

Distance between eyes is equal to one additional eye; nose lies on a line that
connects it to bottom of the ear; mouth are about halfway between chin and
nose; body is about seven heads tall, etc.

I'd say constraint solving is pretty much in line with that kind of thinking.

~~~
paulojreis
You're right. The drawing canons are, in a way, constraints.

However, it's not relevant for this, I think. Drawing is very different, goal-
wise, from design. Designers do learn how to draw early on their education,
but I think it's more a matter of learning how to "see" and developing other
useful skills. The approach to drawing doesn't translate directly to the
approach used while designing.

------
SchizoDuckie
From their demo: structure.gss

    
    
         @h |-(#message)~-~(#follow)~-~(#following)-(#followers)-|
         in(#profile-card)
         gap($sgap)
            !strong {
              &[top] == &:next[top];
            }
          }
    

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.

WTF is this voodoo? Less and Sass aren't complex enough? CSS isn't hard enough
to work with as it is?

~~~
coldtea
> _' cause if you're on my team, i'll slap you_

Because you're so macho, right? And anything you don't understand shouldn't be
used.

[EDIT] I find the sample code quite readable -- as long as one understands
that it does more than constraints in that example, and that you of course
have to read on the symbols to get them, like you'd have to read on Ruby's @,
C's * and &, on regular expressions, etc.

But this macho talk from "team leaders" I dislike.

What exactly does it try to prove, even "metaphorically"? That the leader is
so arrogant that wont discuss but bully his team? How about we reverse it: who
would want to work in a team with some slap happy lead? Who'd want to hire
that team or acquire that "talent"?

(And would this talk help the IT industry attract more female programmers?)

~~~
anc84
Way to overreact to some shallow taunting. You read a lot of things into this
that aren't there.

~~~
cloakandswagger
Look at how he/she tacks some feminist pandering onto the end of the post.
It's just one step away from accusing the original commenter of creating a
hostile work environment.

This is the exact type of person you don't want on your team: thin-skinned,
easily offended and expecting the same level of mollycoddling we pour onto
children (another problem in itself).

------
weego
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.

------
Qantourisc
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
...

~~~
thrownaway122
> javascript should be optional if possible

I got a blank page so I closed the tab.

Any page that requires javascript and I don't need to use (at the level of do
my taxes) or that I don't trust the owners of gets the same treatment.

So yeah optional javascript is a thing unless 100% of your audience are
absolutely required to use your site.

EDIT given that sites today use google analytics instead of their own server
logs I wonder if non-javascript users just don't even get logged by the
javascript-for-everything brigade?

~~~
shocks
You are a minority. Perhaps not here (HN) because "I disable Javascript" seems
to be a pretty trendy thing to say (:P), but in the world at large you are.

It's bad enough we have to build websites that work on IE8. We have to worry
about screen readers and other accessibility problems, but we also have to
worry about a fraction of users that disable a fundamental browser feature
literally every site uses? Nah. It'll break and you can expect it to break!
Sorry. :)

~~~
adrusi
You have to make your site accessible to search engines, so as long as you're
not doing something weird like using javascript for styling and layout, just
treating users who have disabled javascript as search engines should work just
fine.

~~~
bsimpson
Google has been working pretty aggressively at learning to crawl JS-framework-
powered apps lately. I'd still play it safe and serve up HTML when possible,
but JS isn't the SEO black hole it once was.

------
freyr
I go to the demo, resize the browser window, and the layout falls apart. Not a
good advertisement.

[http://i.imgur.com/KkxICEw.png](http://i.imgur.com/KkxICEw.png)

------
Animats
Constraints are the right approach to layout. This should have happened years
ago. The important concept here is defining layout like this:

    
    
        #elmA[top-left] == "area"[top-left];
        #elmB[bottom-right] == "area"[top-right];
    

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.

~~~
ambrop7
As a non-designer, I disagree. I played around with FreeCAD a bit, and I was
constantly wishing "just let me enter the damn formula" while messing with
those graphical constraints. Or could be it's just implemented badly there...

~~~
M4v3R
Newest XCode does this in the right way I think. It lets you do most of the
stuff from the GUI (and detects conflicts), but you also have the power to
enter constraints manually in the code.

------
electic
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.

------
bsaul
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.

------
robogimp
I just watched this GSS intro talk from last year:
[https://vimeo.com/91393694](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".

------
Otik
If your layout system's site looks like complete arse on a major browser like
IE, your layout system deserves to be ignored.

~~~
AdamTReineke
+1. Unusable on IE. Screenshot for those not on Windows:
[http://i.imgur.com/oFoAbAS.png](http://i.imgur.com/oFoAbAS.png)

~~~
Saming
Looked even worse on my tablet
[http://i.imgur.com/tP5YSTu.png](http://i.imgur.com/tP5YSTu.png)

------
avodonosov
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).

~~~
kagamine
Not sure what you mean that "css is hell", although I understand from working
with a lot of programmers (I do front end they do back end) that CSS is seen
as something you might also want to learn but not really because it isn't
proper programming. CSS as it is now is incredibly powerful and works almost
as it should (almost int he way all languages/technology are works in
progress).

I can see this (GSS) as having its place amongst a developers list of tools,
but ultimately I can't see how it is better than Flexbox, or why I would want
to a javascript library to do layout, or who in their right mind would want to
pass a project using this on to someone else.

------
jjar
> [http://puu.sh/igQ03/9d6f0ffcb5.jpg](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.

------
TazeTSchnitzel
That profile card demo completely breaks if you reduce the browser height a
bit:

[http://i.imgur.com/MLhaheD.png](http://i.imgur.com/MLhaheD.png)

Perhaps this is why the web uses box-based rather than constraint-based
layout.

------
usaphp
None of the demos work correctly on safari iOS

~~~
x0054
Just tried a few demos on iPad 3 running iOS8, works fine for me.

~~~
TazeTSchnitzel
Yes, because the iPad has a large screen. It doesn't work well on iPhone-sized
screens.

------
CodexArcanum
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.

------
ColinDabritz
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.

------
dyarosla
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.

~~~
enkitosh
The bottom is cut off as well. Where it says e-mail address and then something
else but you cannot see it. Like this idea but this looks a bit bad for
someone offering a solution to css bad parts :/

------
msie
Heh, I'm looking at React Native with Flex Box precisely because of
difficulties I've had with AutoLayout.

------
JabavuAdams
What is up with that logo? That's a terrifying chimeric space thing that I
don't want on my machine.

------
donatj
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](http://jdon.at/1cgIw) the emails in question

~~~
cowls
Its funny that you post that, he comes off a lot better than you in that
thread.

