Building Our HTML Theme

Files and Structure

You will find four HTML files we’re going to convert (one for each PSD):

  • index.html – The homepage design
  • blog.html – A blog post listing page
  • directory.html – A business listing page
  • business.html – A single business page

All of our themes pages will be derived from the markup on these pages.

You will also find two folders: an /images/ folder, where all theme images will go (there are not many), and a /css/ folder, where all of the CSS will go. Within the /css/ folder, there are four CSS files that make up a simple framework.

  • reset.css – Your standard CSS reset for maximum browser compatibility.
  • master.css – The crux of the matter. All of the main CSS lives here.
  • ie.css – Any IE fixes go here. Luckily there aren’t too many.
  • style.css – This will simply import the other three stylesheets (in the order I’ve listed them here. That is very important).
  • You will also find a /img/ folder within the /css/ folder. Any images that are called within the CSS go in this folder.

Markup and CSS

If you take a look at one of the HTML files, I think you will see some pretty standard markup. I am using HTML5, which requires a few lines of code to make it work.

The first line is the doctype declaration, which is simply:

<!DOCTYPE html>

Once HTML5 sees adoption from all browsers and older browsers are phased out, this is all that will be necessary in order to use it. However, right now we do have older browsers that do not support it (I’m looking at you, IE), so we need some JavaScript magic in order to make it work. We will be using the invaluable html5shiv,6 which will add HTML5 elements to the Document Object Model (DOM), so that we can add style definitions for them in our CSS, and if we so desire, we can manipulate them using JavaScript. The line is simply:

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.▶
com/svn/trunk/html5.js"></script> <![endif]-->

In plain English, this is saying, “If the browser is IE8 or lower, call this JavaScript.” That’s all we need; we can now use HTML5 as we please!
 
The CSS (most of which is in master.css ) is also pretty selfexplanatory. I will point out that I tried to use percentages for widths whenever I could, giving us a more flexible grid to work with. There is a big trend toward “responsive web design,” which aims to make a website device agnostic.7 While that is outside the scope of this book (not that I’m an expert), flexible grids help us considerably with designing flexible, responsive websites. In order to achieve this flexibility, I created a class called #container with the following definition:

#container {
	margin: 0 auto;
	text-align: left;
	width: 70%; /* Target: 940px; */
	padding: 10px 0;
}

This will ensure that our entire layout takes up 70% of the browser window and centers the content. The comment tells the reader that from here on out, I will base my widths on a 940 px wide layout. In reality, the layout will expand and contract with the size of the browser window.8

I also have a few general CSS classes I use throughout the template. Since this is a 2-column layout, I created classes for both the left and right columns:

.left-col {
	width: 66%;
	float: left;
}

.right-col {
	float: right;
	width: 32%;
	margin-left: 2%;
}

As you can see, .left-col (for left column — I’m very clever) will take up 66% of #container and float to the left. Conversely, .right-col (for… well, I think you’ve got it) will take up 32% of #container, floating right. This leaves 2% wiggle9 room, which I used for a margin to separate the two columns. I also have two separate but similar CSS classes to easily float individual elements left or right:

.left {
	float: left;
}

.right {
	float: right;
}

These classes are also aptly named. To ensure none of these four classes extend past where they should and end up eating the rest of the page, I employ a nice little hack that Dan Cederholm came up with for self-clearing floats:

.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

Now, for any containing div that has floating elements, we can also apply the class name group and everything will stay within the container:

<div id="main" class="group">
	<div class="left">One Fish</div>
	<div class="right">Two Fish</div>
</div>

There is a fix we need to apply to make it work in IE 6 and 7, which you can find in the ie.css file:

* html .group { /* IE6 */
	height: 1%;
}

*:first-child+html .group { /* IE7 */
	min-height: 1px;
}

Share

You may also like...