xy.css

Out of all the HTML elements, forms are the absolute worst for designing on the liquid matrix. Okay technically it’s not the form elements themselves, but the way which each browser displays them.

Specifically, each browser puts their own “spin” on how fonts, line-heights, padding, margins, and borders are rendered on the page. CSS resets help to neutralize some of the browser inconsistencies, but more control is needed when sticking form elements to the xy grid.

Vertical Grid

The simplest way to ensure vertical consistency on form (and other) elements is to apply height to the parent element. I call this “synthetic normalization” because it provides a solution without solving the problem.

So for example, instead of something like this:

<fieldset>
	<label for="input">Example</label>
	<input name="input" type="text">
</fieldset>
<style type="text/css">
	.ie input { margin-top: 3px; }
	.mozilla input { margin-top: 7px; }
	.opera input { margin-top: 5px; }
	.safari input { margin-top: 8px; }
		.
		.
		.
</style>

We apply synthetic normalization:

fieldset { height: 36px; }

By defining an explicit height for the fieldset element, we provide a consistent yet flexible amount of vertical space in which the various form elements may be displayed at whatever height for any particular browser. I.e., “synthetic” normalization for working on the vertical grid.

Horizontal Grid

For the horizontal grid the same technique may be applied, but the actual disparity between the grid and the inconsistent element widths is more apparent, imo.

A more precise technique is to be mindful of any horizontal properties such as input padding, margins, and/or borders. After styling the form elements, add up the horizontal widths and subtract them from the calculated width.

To illustrate, let’s say you have a form input that you want to set at 480px width (6 columns, 5 gutters). The parent container, say, has a width of 984px (12 columns, 11 gutters). The calculation looks like this:

480 / 984 (100) = 48.78%

Applying this width to a <div>, the results would be accurate. As mentioned, form elements in each browser are displayed differently, so even before applying any styles, widths of form elements break the grid out of the box. And then as you apply your own styles such as padding, margins, and borders, element widths increase, further breaking the grid.

So, without relying on JavaScript, there are three keys for normalizing form elements on the horizontal grid:

• Apply width(s) to parent element(s) to allow for variation
• Subtract padding, margins, borders, et al from the calculated width
• Further customize as desired by targeting specific browsers

Note that the techniques and tips given in this article are aimed at those working with xy.css, which provides a solid framework for designing on a responsive liquid matrix. The principles should, however, extend to any grid-based design methodology.