How To Add Non-Textual Elements To A Baseline Grid

Posted: 17 Oct 2011 05:30 AM PDT

A few weeks ago I offered some tips for setting up a baseline grid. In a comment Raul wondered why most articles about baseline grids focused on textual elements while not mentioning non-textual elements such as forms.

It’s a fair point and I thought I’d extend my previous post and demo to include some non-textual elements.

I’ve added an image, a table, and a form to the demo and will walk through each below. I touched on this in the previous post, but I’ll try to offer more detail here. If you haven’t read the previous post you may want to take a look now.

A Quick Review

First let’s review a few things. The basic idea behind a baseline grid is to align elements along the vertical. Mostly this will be text and the baseline unit is the line-height of your text.

Using that baseline unit we want the vertical measurements in our design to be some multiple of it to ensure that everything falls on a baseline.

I mentioned 5 properties in my previous post that we need to pay attention to and today I’ll add a 6th.

font-size
line-height
top and bottom paddings
top and bottom borders
top and bottom margins
height

With text we’ll think about line-height. With non-textual elements we’ll think more about the height of the element.

The image below of the box model shows 4 parts of each box — content, padding, border, and margin. The vertical components of the last 3 are included in the 6 properties above and work the same for any element on our page.

The first, content, differs from element to element.

When we speak about text it’s enough to consider the line-height. The height of the content part of any textual element will be a multiple of the line-height. It will be the line-height × the number of lines of text.

With non-textual elements you think about height instead of line-height. Ultimately it’s the box model you’re thinking about. You want to make sure the top and bottom of every box sits on a baseline.

With elements like forms where both textual and non-textual elements are present, you’ll have to consider both.

Aligning an Image to the Baseline

Images are relatively easy to set on a baseline. All you really need to do is make sure the height of the image is a multiple of the baseline unit.

If you remember in the previous post I set a font-size of 1em (16px) and a line-height of 1.5em (24px) on the body copy in the demo.

The box model image was originally 340px in height, which isn’t a multiple of the baseline. However 336px is. I removed 4px of whitespace from the top of the image and added it to the demo.

I placed the image inside paragraph tags to make it easier to center.

That should have been enough and for the image itself it was. However everything below the image was off the baseline by a few px and checking in webkit inspector I could see the height of the paragraph containing the image was 343px instead of the expected 336px.

I have no idea why, but to get things back on the baseline I added 17px (1.0625em) of bottom padding to the paragraph. That made the total height 360px, which is a multiple of the baseline unit.

Setting a Table to the Baseline

Next I added a rather simple 2 column, 3 row table with the structure below.

 <table>   <tr>     <td></td>     <td></td>   </tr>   <tr>     <td></td>     <td></td>   </tr>   <tr>     <td></td>     <td></td>   </tr> </table>

Since this table is filled only with text there wasn’t much that needed to be changed other than to set the border-spacing to 0. By default this spacing was set to 2px, not a baseline multiple. Setting it back to 0 was enough to have everything working.

Of course that’s too easy so I decided to set a border around every cell to throw the height of the table and cells off again. I did this by giving each cell a 1px (0.0625em) border on the top and right and then setting the same border on the bottom and left of the whole table.

 table {   width: 100%;   border-spacing: 0;   margin:3em 0 2.9375em 0;   border: solid #ccc;   border-width: 0 0 0.0625em 0.0625em; } td {   padding: 0.6875em 5% 0.75em 5%;   border: solid #ccc;   border-width: 0.0625em 0.0625em 0 0; }

All the table cells now have one extra px of height as does the table itself.

I needed to either remove that px or add in another 23px to get to the next baseline multiple. I opted for the latter and added 23px of vertical padding in each table cell — 11px ( 0.6875em) to the top and 12px (0.75em) to the bottom.

The table itself was still off by the 1px border added to it. I opted to correct this with margins. I added 47px (2.9375em) of bottom margin, which when added to the 1px border gives us 48px or twice the baseline measurement.

And with that the table is back on the baseline.

One point you may have noticed is that I worked from the inside out. Since the height of the outer container (in this case the table) depends on the heights of what it contains (table cell and row), you want to first make sure the innermost elements are aligned to the grid and then work your way out to the container elements.

Setting a Form to the Baseline

The last new element I added was a simple contact form. You can see the html below. It’s not a working form, but it should include enough code for our purpose.

 <form>   <p><label for="bname">Name:</label> <input type="text" id="bname" /></p>   <p><label for="bemail">Email:</label> <input type="text" id="bemail" /></p>   <p><label for="bcomment">Comment:</label> <textarea id="bcomment"></textarea></p>   <p><input type="submit" value="Submit" id="bsubmit" /></p> </form>

Again not a particularly complex form. In practice you might have radio boxes, checkboxes, selects, etc. You’d handle them the same way as I deal with the text inputs, text area, and submit input below.

 label {   display: block; } input {   font-size:1em;   line-height: 1.42857em;   padding:0;   margin: 0; } input#bsubmit {   margin:0 0 0.7142857em 0; } textarea {   font-size:1em;   line-height: 1.743em;   height: 9.07142857em;   padding: 0; margin: 0; }

Labels and Inputs

As with the table we want to work from the inside out so we’ll style the inputs and labels to get them on the baseline, then look at the paragraphs, and the form to see if more styles are needed.

I set the labels to display as block level so that the inputs would sit below them. The labels are textual and are already covered by the font-size and line-height set in the sidebar in the last post.

Unfortunately form elements don’t like to cooperate. The inputs didn’t inherit the font-size from the sidebar and so needed to be set at 1em or the same 14px used in the rest of the sidebar.

Each input showed 2px of border around it by default. I could have styled these differently, but left the defaults.

There were several ways to account for these extra px and I opted for using a line-height equal to 20px (1.42857em). When the 4px of border are added it brings things back to the baseline unit of 24px.

I haven’t checked the above in every browser so those 2px borders may vary and throw things off. Better would have been to explicitly set the borders.

Textarea

With the textarea input I again set both font-size and line-height, though here I also wanted something other than the default height and so set it as well. Setting the height meant I didn’t really need to set the line-height.

Borders on the textarea are only 1px each so the plan was to set the height to be 2px less than a multiple of the baseline similar to what I did above with the inputs.

However I encountered another issue. Like the image there was some extra px that I couldn’t account for. I’m sure those px are coming from somewhere, though I haven’t managed to figure out where yet.

Here there were an additional 15px extra and so I needed to make the textarea height a total of 17px less than a baseline multiple. I set it to 127px (9.07142857em) + 2px (borders) + 15px (?) = 144px = 6 x 24px (baseline unit)

Submit Button

Almost done. Time for the submit button. Once again I set the font-size and line-height, though the submit input was even less cooperative. It insisted on ignoring the font-size I set and remained at 11px with 18px of line-height. Instead of fighting the submit I chose to work with it.

At first I set a margin of 6px to bring the total up to 24px (18px + 6px), but the overall form was showing some of those extra and unaccounted for px.

It turned out that an additional 4px would bring the entire form up to 360px (15 x the baseline) and so instead of adding 6px of margin to the submit button I added a total of 10px (0.7142857em).

I’m still not sure where all the extra or missing px came from, but I was able to account for them through paddings and margins of various elements.

Ultimately I could have just given the form any extra px necessary, but I wanted as many of the form elements as possible to align to the grid and also because I hoped the exercise would be instructive.

Summary

While I certainly haven’t covered every element a web page might have, hopefully you can see the process for adding any element to the baseline grid.

Start by working from the inside out. Table cells before table rows before tables. Labels and inputs before the form.

Set font-sizes and line-heights where necessary on text elements and set heights on non text elements. Adjust some combination of padding, border, and margin so that the overall height of the element’s css box is a multiple of the baseline unit.

Then work your way out to the container elements and do the same.

If you don’t mind that the elements inside the container, form inputs for example, aren’t on the grid, then you can just make sure the box of the outermost container (the form) is a multiple of the baseline.

However your grid will be more cohesive if you take the time to align the inner elements. It is ok for some elements not to be on the grid, but you should make a conscious choice to have them off the baseline rather than not wanting to do the math.

It also helps to have an image of the baseline visible so you can see by eye where things are off and also use a tool like webkit inspector, firebug, or dragonfly, to check the vertical measurements of your elements.

Keep the box model in mind throughout. If the total box height (including content, padding, border, and margin) is a multiple of the baseline then the next box will sit on the grid.

With text elements the height of the content of the box will be some multiple of the line-height. With non-text elements it’s the height property. That’s really the key difference between setting textual and non-textual elements on the baseline.

The math can be a pain at times, but it really isn’t that difficult and if you work through one or two baseline grids the basic process gets easier.