Hacker News Reader

Comment by fredgrott | Hacker News Reader

okay simple from mobile web apps its a way to native layout like the mobile apps do but in css..ie one step closer to full parity between native mobile apps and mobile web apps

View on HN

Well, that sure cleared things up.

Ok, but seriously, no jokes: What is it? I'm utterly lost and feel like a gringo in Colombia with no way to communicate.

You know how in Keynote or Powerpoint, when you drag elements around they snap to certain guidelines? Like, if you drag a text box close to the center of the slide, it'll snap to being exactly centered. Or if you drag something close to a margin, it'll snap to a standard distance from the edge.

A "constraint" captures a relationship such as those. "Block A is horizontally centered in its container." "Block B's right edge is 20 pixels from the right edge of its container".

The layout is then based on those captured relationships.

CSS sorta works like that too. The difference is that this system has one general thing (a constraint), where CSS has a lot of very specific interacting properties (margin, padding, etc).

A constraint has basically the form

    y = m*x + b

where x and y are geometric attributes of blocks. For example,

    blockA.left = 1 * blockB.right + 20

The = could also be <= or >=.

Last, you can say that a constraint should hold with strength one of {required, strong, medium, weak}. In this demo:

    http://gridstylesheets.org/demos/apple/

the "Change Mode" button is weakly centered in the panel, but there is a required constraint that it be to the right of the "Add" button. So, when the panel gets too narrow, the "Change Mode" button stops being centered.

Helpful, thanks. Can anyone articulate in simple terms why that is better (and not worse even) than CSS?

Reply on news.ycombinator.com