Clean grid units
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.
Abbreviate text for small screens
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.
Checking the grid below the fold
When designing on the grid, there are numerous ways to check that elements are properly aligned. For example, when working with xy.css the visual matrix lets you “see” how elements are lining up (or not) with the grid.