Back when I was a Classic MacOS developer, there was a great C++ based GUI library called Metrowerks PowerPlant. It featured a neat and simple way of laying out and sizing panes (the equivalent of container elements in html). You simply laid out your panes inside a parent pane (a windows is also a pane) and specify its height and width. This is all fairly standard and not unique to PowerPlant.
What made PowerPlant unique, however, is how panes adapted their positions and sizes automatically when a parent pane dimension changes. When you draw a pane, you specify wether each of the corners are pinned or not. When a corner is not pinned, it remains static and when it is, it moves with the parent. When you resize a Window (a parent pane), for instance, a single pane with all its corners pinned will adapt to its size relative to the Window’s new size. Likewise, a pane with all its corners unpinned, would not change relative to the Window’s new size. Pinning could be specified programmingically or declaritively via a resource file as a list of booleans values, ie. { topleft = false, topright=false, bottomleft = true, bottomright=true}. It’s equivalent to how you specify margins, paddings, etc in CSS.
This convention made programming GUIs intuitive, powerful and productive. I struggled learning HTML after being spoiled on it. The entire concept of using percentages, combined with inlined elements, just made the whole experience cognitively taxing and frustrating. Pinning made layouts not only simple, but made their behavior far more predictable. The first Mac version of Netscape Navigator used PowerPlant, but for some reason they didn’t add it to their HTML implementation.
Pinning may not work for the web as PowerPlant implemented it, but by adding a few layout and behavioral capabilities, it would make web development far more productive. I’m not proposing to change the CSS/HTML standard, but merely adding it as an extension to CSS. It can be easily retrofitted into CSS and HTML as an extension, for instance:
.myPanel {
layout: pinned;
width: 50px;
max-width: 100px;
border: black 1px;
// stretch box from the bottom
pinnings: { topleft = false, topright=false, bottomleft = true, bottomright=true }
}
I’d like to know what others think about this layout method.
