WP FUNFun with WordPress

Themery : Blogged - LayoutFiled Under: General

This is the seventh post in my series, Themery : Blogged, where I blog about each step of a WordPress theme design.

Although I already explained how the layout would work, in the initial design process that I wrote about last week, I didn’t do any calculations at that time; it was purely visual. This post will explain the process behind creating the major structures, and the basics of the type that the theme will use.

As this theme doesn’t really include any graphics there isn’t really any excuse for restricting the users’ ability to resize the text. I want to keep the structure intact, but allow resizing, and so I have opted for an elastic layout.

Normally I would set the body font-size to the final size I wanted (equivalent to 12px) but to make the layout simpler I have set the body size to the equivalent of 10px: 62.5%; the background colour is used to illustrate the layout and will be removed.

body
{
	font-size:62.5%;
	background-color:#fff;
	font-family:verdana, arial, helvertical, sans-serif;
}

With a font-size of 10px the rest of the layout should be relatively straightforward. The basic HTML looks like this (I have omitted the actual content for simplicity:

<div id="container">
    <ul id="sitewide_navigation">
    ...
    </ul>
    <div id="content">
        <h1>Page Title</h1>
        <ul id="post-navigation">
        ...
        </ul>
        <p>Content</p>
        <div id="comments>
        ...
        </div>
        <p>Content</p>
        <blockquote>
        ...
        </blockquote>
        <p>Content</p>
    </div>
</div>

The important point to note about this layout is that, with the exception of the site wide navigation, all of the content is contained within the content div and then moved out using negative margins. This means that for elements such as blockquotes and the comments that I can wrap the text around it while having it appear mostly as a separate column.

The width of the content and the width of the columns, placed side-by-side are roughly the dimensions of the golden ratio: 55em (550px) X 0.618 = 34em (340px). The comments are then indented, also using the golden ratio: 34em (340px) X 0.618 = 21em (210px).

The same dimensions are used for the blockquote on the left hand side, and will be used for other items such as figures.

The key CSS that achieves these is set out below:

#container
{
	width:97em;
	margin:0 auto;
	background-color:#ccc;
}
 
#content
{
	width:55em;
	margin:4.2em 21em 0 21em;
	background-color:#efefef;
}
 
#comments
{
	width:30em;
	padding:0 1em;
	margin:0 1em;
	float:right;
	margin-right:-21em;
	background-color:#ccccff;
}
 
#content blockquote
{
	width:30em;
	padding:0 1em;
	margin:0 1em;
	float:left;
	margin-left:-21em;
	clear:left;
	background-color:#ffefef;
}

As I have sized everything using EMs the whole layout will scale as the font-size is increased

The type I have used follows a fairly standard baseline rhythm. The font is 1.2em (12px) Grey Verdana with a line height of 1.75em (21px) and margins the same height. The comment text is 1.1em (11px) but follows the same line height to ensure that the text remains consistent throughout.

The header is 2.8em (28px) Ameretto with a line height of 1.5em (42px), and the text beneath it, which will become the post navigation is 1em (10px) with the standard 2.1em (21px) line height and a bottom margin of 0.75em (21px).

The image on the right shows how the comment text, despite being a different font size is perfectly lined up with the content text. This helps to create a uniformity on the page that reinforces the minimalist concept.

When seen without the lines the text is very easy to read, uniform, and resizeable.

This isn’t absolutely final. I am still tweaking things as I go; for example, I am not sure I like the line space between the name of each commenter and their comment, but in general this is how it will appear.