The starter theme used to build xy.css is now available for public use. You can learn more and download shapeSpace at Perishable Press.
After experimenting with different widths for the xy.css horizontal grid, I’ve settled on 60-pixel columns and 24-pixel gutters. This creates a horizontal grid comprised of 84px-width grid-units. In this article, I explain the mathematics of “clean” grid-units and how they produce a more flexible, extensible, and harmonious grid.
When designing on or off the grid, it can be challenging to resize or reposition longish strings of text for proper display on small screens. A prime example of this involves scaling list menu-items, which inherently offer limited flexibility.