Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework

When Collis launched this site and asked readers for tutorial requests, a common one was for a "magazine themes" how-to for blog platforms. This tutorial focuses on the first part of the process: applying a CSS grid to the design to prototype a home page template.

Demo and Source

You can see a demo of this tutorial by clicking on the "Demo" button, below. For the source, the ZIP file download does not include the Blueprint CSS code.

What We're Building

The focus here is on an web page design example using the Blueprint CSS grid framework, based on my earlier Which CSS Grid Framework article. However, you can apply the same process to any CSS grid framework you prefer. If you don't like using grid frameworks on production sites, you can always replace the CSS code and corresponding HTML classes with your own.

The page design shown below is influenced by numerous WordPress magazine themes, so you might see familiar design elements, though this is not a WP-specific tutorial.

A Typical Graphic Design Process

Let me point out that I am only an "armchair", self-taught designer, and the minimalist nature of my design will reflect my lack of proper training. Hopefully that allows you to focus on the general grid design and coding process, which is based on geometric elements, not on style.

A typical design process for web pages is to start with a sketch on paper, followed by a graphic mockup in Photoshop or Fireworks, etc. Drop in all the design elements, positioned approximately where you want them. Later, in the CSS grid-based design phase, you'll determine exact measurements.)

FilmPundits is a site owned by a friend that I'm building up. The mockup below is one of several "FilmScenic" designs that I've prototyped. The topic of film just lends itself to this example because of the widescreen-style images.

If you want to use a similar design for non-film topics, just adjust the image heights to make them look less widescreen-y. For my design needs, the largest image has to have the most impact. So the composition is positioned slightly off-center, horizontally. This makes the whole page a bit more dynamic and draws the eye to the most important elements.

Let's look at the "guide" lines, below, that form the design grid for the mockup above.

Use your favorite graphics software to turn the guide lines into a "slice" map:

If you are not using a CSS grid, you would either manually code your web page and CSS file at this point, or let your software generate the code for you.

CSS Grid-Based Design Process

Now that we have a graphic design mockup, we need to translate that into HTML and CSS code. To reiterate, using a CSS grid framework speeds up the prototyping process. You can measure your design elements in pixel widths and finetune to suit the CSS grid that you are using. (I'm not getting much into vertical positioning because I tend to control that with image heights and top/bottom margins.)

Here is the process I typically use to apply CSS grids, which treats the graphic design mockup as an aside. You'll have to adjust this to suit your needs.

On a piece of paper, draw a bounding rectangle - landscape or portrait - representing the general shape of your page design.
Partition the bounding rectangle into rough sections: header, footer, main content, sidebar.
Partition the rough sections further, as necessary.
Pick your CSS grid framework, whether pre-built or custom. I'm using Blueprint. You can use this one-page PDF document as a "cheat sheet".
Decide on the maximum page width. I've used the Blueprint default page width of 950 pixels, which is formed of 24 columns of 30 px wide each, and 10 px wide gutters between columns (24x30 - 10 = 950 px).
Mock up your design in raster graphics software (Photoshop, Fireworks, etc.) if you like. I tend to skip this step because. Note that most CSS grid frameworks include a PNG or JPG grid that you can overlay as a guide. I did not use that grid in the graphic design process discussed above.
Decide on minimum widths for your various sections.
1. I wanted the sidebar to be at least 190 px wide (5 Blueprint columns), but left this until last, to ensure the three small feature blocks at bottom left had priority.
2. The left side of the "features" block should have a fair bit of white space (>= 30 px, since that's the width of one column in Blueprint). After twiddling with the higher-priority sections, I settled on 3 columns = 110 px wide.
3. The three small features blocks need to be the same width. Anything less than 190 px wide would not have the same visual impact. Anything more than 190 px would not leave enough room for the white space to the left. (If I had the time and inclination, I could have created a custom Blueprint framework that would give finer control, or used a larger width page altogether.)
4. The large feature image's width (590 px = 15 columns) is automatically decided, since it has to span the width of all three smaller feature blocks. Its height/ width ratio is larger than for the smaller feature images, for visual impact and thus to signify that it's "more important" than other page elements. All these images give a widescreen-like appeal, despite different height/width ratios.
5. In the "Recent Posts" section of the sidebar, the image width is forced to 70 px (2 cols) - instead of my desired 48x48 thumbs - as a result of what horizontal screen real estate is left. (Here's where a CSS grid framework can be a liability: forced sizes.) In the end though, the even the small thumbnails lightly hint at the "widescreen" theme.
6. Any text blocks that are too wide can easily be fixed by using a smaller font - preferably using a font-family that is still readable at the reduced size.
Determine element heights where possible. Satisfying height preferences is of lesser concern to me, but I minimized the placement of design elements vertically so that the overall page design echoes a "widescreen" feel. At least for this home page template, I did not want the page height to be so large that most readers would have to scroll down. That would ruin the "widescreen" effect.
1. The menu is only a placeholder and not covered here in code. It spans the entire "content" width of 710 px (18 cols).
2. The height of the large feature image was decided by the layout. Its proportions should resemble a "wide screen".
3. The small feature images are a scaled-down version of those I use at another film site. The originals are 470 w x 175 h. Since there's only 190 px wide to work with, scaling an original image makes the resulting height 71 px, which I've trimmed here to 70 px. The resulting proportion still gives a widescreen feel, but echoes the fact that these blocks are not as important as the large feature image.
4. The height of the text of each small feature section is defined by four vertical sections: movie title, post date, post author and description, as well as several "bottom borders". (In the CSS code later, you'll see that default line height is 115%.)
5. The height of the items in the Recent Posts block are a minimum 49 px, though they are variable depending on the length of a post's title.
6. The top of the News section does not quite line up to the top of the small features. There are ways to achieve this, though I've not covered that here.
Determine the final widths of every element, factoring in your grid framework's settings. You can use your paper sketch or graphics mockup as an aid.
Slice up your graphic mockup, if you're using one, and save segments to image files.
Add the necessary Blueprint div tags and class attributes to support your design.
Test and tweak until you have a final design you're happy with.
If you like, strip out the Blueprint framework. This means replacing the explicit framework (HTML, CSS) with an implicit one - which to me sounds like a lot of unnecessary work (but that's just me). At the least, in production, use the "compressed" version of the Blueprint files.
Go live.

If you're a real designer, unlike myself, you'll probably do most of the design mockup in your favorite graphics editing package. I generally prefer to sketch on paper, then mock up on the fly using HTML and CSS (both Blueprint and custom classes), as discussed below.

Grid-Based Coding Process

Now that you have a mockup of your page layout, you can start coding in HTML and CSS. Here is a rough process of the actual coding steps:

Include the necessary Blueprint CSS references and IE conditional code in the head element of your web page.
In the body tag, start with a div whose class attribute is set to "container". This is a Blueprint code to specify a container area for design elements. This sections off the entire page. If you want the grid to be visible, to help you place elements properly, also add the value "showgrid" to the class attribute of this div.
Start refining the blocks into smaller sections using HTML content wrapped in div tags, as well as CSS-controlled rectangles for images. To specify widths, use the Blueprint "span-x" classes. Add in any custom CSS classes that you need. I usually put in redundant custom blocks (with a gray background), then remove them after I have my actual design implemented in code.
You can continue to refine each rough block, or jump to the next step.
Create any necessary logos, icons, or banners that were not already created earlier.
Replace rough blocks with actual design elements. Add the appropriate div tags, any remaining Blueprint class values.

Example HTML and CSS Code

To make the above processes clearer, let's have a look at some actual HTML and CSS code fragments for the film site design example pictured earlier. Keep in mind that I've gone extreme with the non-Blueprint div tags purely for clarity in this tutorial. You will probably want to strip out any excess classes, possibly merge nested div tags.

Note also that I've used some "ugly" non-Blueprint CSS class names for clarity. They are all preceded by "fs-", followed by a functional name, to make it clear what I'm using them for.

I've coded five stages for this tutorial, to illustrate the refinement process in HTML and CSS. Normally, I'd compress stage 1-3.

Blank template with Blueprint "container" class and empty CSS file.
Rough blocking stage 1.
Rough blocking stage 2. Refine rough blocks from stage 1.
Rough blocking stage 3. Final block refinement into necessary sections.
Final web page and CSS.

These steps will be clearer in the sections below.

Step 1: Blank Template Code

To start off with, we want to set up the HTML file:


<html ... ?>
<head ... >
<title>FilmScenic Template</title>
    
  <!-- Framework CSS -->
	<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
	<!--[if IE]>
		<link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection">
	<![endif]-->

	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection">

</head>

<body>
<div class="container showgrid"> <!--  showgrid -->
header, content, sidebar, and footer go here
</div>

</body>
</html>

Link to the Blueprint "screen" and "print" CSS files. If you use a different directory structure, don't forget to change the URLs accordingly. I've placed the "blueprint" directory below the index.html file, though in production, it probably should go "above" your theme directory.
Link to the custom "style" CSS file, which will contain all the non-Blueprint CSS classes. In this step, that's style.css.
Set up a div with the classes "container" and "showgrid", both part of Blueprint. Using the showgrid class will render the grid we're using, making it easier to see that design elements are being placed properly.

Step 2: Rough Blocking Stage 1

Now roughly block off the entire page (container) into three CSS-controlled sections: fs-mainblock, fs-sidebar, and fs-footer. You can see this in the HTML code below, which fills in some of the div.container element we introduced earlier:


<div class="container showgrid"> <!--  showgrid -->
	<div class="fs-content">
		<div class="fs-mainblock span-18 colborder">header, content blocks go here</div>
		<div class="fs-sidebar span-5 last">sidebar</div>
	</div><!-- end: fs-content -->
	<div class="clear"></div>
	
	<div class="fs-footer span-24">
		<p>(c) Copyright 2008-present, This blog</p>
	</div>
	<br/>
	
</div>

You'll notice that the divs above use both custom classes and Blueprint classes (span-18, colborder, span-5, last, span-24). The "last" class is very important, otherwise the fs-sidebar section default right margin will not be turned off, and the section will render below the fs-mainblock section instead of beside it. The colborder draws a vertical line between fs-mainblock and fs-sidebar, and takes up a column by itself. This is not reflected in the "span-18" value. In theory, the mainblock actually takes up 19 columns (19+5 = 24 columns, the Blueprint default).

Now we add classes to the custom stylesheet for these three blocks (see below). Note: some of these are temporary, to demonstrate the block rectangles on screen while refining the design. Consult the final style.css file instead of using exactly the rules presented in the CSS code snippets below.


div.fs-content {
	margin-bottom: 20px;
}

div.fs-mainblock {
	height: 700px;
	background: #ccc;
}

div.fs-sidebar {
	height: 700px;
	background: #ccc;
}

div.fs-footer {
	margin-top: 20px;
	padding-top: 5px;
	height: 30px;
	background: #ccc;
	border-top: 1px solid #000;
}

The CSS above results in the rough mockup below:

Step 3: Rough Blocking Stage 2

Let's refine the design further by break down the sections. The fs-mainblock div class is divided into fs-header and fs-featured sections. The fs-sidebar is divided into fs-recentposts and fs-newsbox. Here is the refined div.container:


<div class="container showgrid"> <!--  showgrid -->
	<div class="fs-content">
		<div class="fs-mainblock span-18 colborder"><!-- s: fs-mainblock -->
			<div class="fs-header">Logo + menu</div>
			<div class="fs-featured">Featured sections</div>
		</div><!-- e: fs-mainblock -->

		<div class="fs-sidebar span-5 last"><!-- s: fs-sidebar -->
			<div class="fs-recentposts">
				Recent posts
			</div>
			<br/>

			<div class="fs-newsbox"><!-- s: fs-newsbox -->
				News
			</div><!-- e: fs-newsbox -->
		</div><!-- e: fs-sidebar -->

	</div><!-- end: fs-content -->
	<div class="clear"></div>
	
	<div class="fs-footer">
		<p>(c) Copyright 2008-present, This blog</p>
	</div>
	<br/>
	
</div>

As before, classes for the new sections are added to the custom stylesheet, style.css. Each section's height is approximated where necessary, and we're once again adding a temporary background to some of the elements, which will be removed in the final style.css file. Here are some additional CSS rules:


div.fs-header {
	//Logo + menu
	width: 710px;
	height: 110px;
	background: #ccc;
	margin-bottom: 10px;
}
div.fs-featured {
	// Featured sections
	width: 710px;
	height: 580px;
	background: #ccc;
	margin-bottom: 10px;
}

div.fs-sidebar div.fs-recentposts {
	height: 370px;
	background: #ccc;
	margin-bottom: 10px;
}
div.fs-sidebar div.fs-newsbox {
	height: 270px;
	background: #ccc;
}

This results in the following mockup:

Step 4: Rough Blocking Stage 3

This is the final stage in the mockup process. We add sections for all remaining design elements:

Divide the fs-header div class into fs-logo and fs-horiznav.
Divide fs-featured into fs-txt-featured and fs-features.
Further divide fs-features into fs-bigfeature and fs-smfeatures.
Further divide fs-smfeatures into three blocks, each spanning 5 Blueprint colums. No custom CSS classes are need for the latter.
Divide fs-recentposts into five fs-recentpost sections. (In a later tutorial, these sections will be integrated into WordPress, so only one section will be used in a code loop.)

Here is how our div.container looks now:


<div class="container"> <!--  showgrid -->
	<div class="fs-content">
		<div class="fs-mainblock span-18 colborder"><!-- s: fs-mainblock -->
			<div class="fs-header"><!-- s: fs-header -->
				<div class="fs-logo">Logo</div>
				<div class="fs-horiznav">Menu</div>
			</div><!-- e: fs-header -->

			<div class="fs-featured"><!-- s: fs-featured -->
				<div class="fs-txt-featured span-3">Featured</div>
				<div class="fs-features span-15 last">
					<div class="fs-bigfeature">big feature</div>
					<div class="fs-smfeatures"><!-- s: fs-smfeatures -->
						<div class="span-5">sm feature</div>
						<div class="span-5">sm feature</div>
						<div class="span-5 last">sm feature</div>
					</div><!-- e: fs-smfeatures -->
				</div>
			</div><!-- e: fs-featured -->
			<div class="clear"></div>
		</div><!-- e: fs-mainblock -->

		<div class="fs-sidebar span-5 last"><!-- s: fs-sidebar -->
			<div class="fs-recentposts">
				Recent posts
				<div class="fs-recentpost">recent post</div>
				<div class="fs-recentpost">recent post</div>
				<div class="fs-recentpost">recent post</div>
				<div class="fs-recentpost">recent post</div>
				<div class="fs-recentpost">recent post</div>
			</div>
			<br/>

			<div class="fs-newsbox"><!-- s: fs-newsbox -->
				News
			</div><!-- e: fs-newsbox -->
		</div><!-- e: fs-sidebar -->

	</div><!-- end: fs-content -->
	<div class="clear"></div>
	
	<div class="fs-footer">
		<p>(c) Copyright 2008-present, This blog</p>
	</div>
	<br/>
	
</div>

As you can see, there are a lot of nested divs used. Some of it is merely for clarity in this tutorial. For the rest, on a production site, you can compact some of it or replace the Blueprint classes with your own. Some people prefer to use caching on their sites, when using "magazine" themes with grid frameworks - though that's out of scope for this tutorial.

Each of the new classes gets added to the custom stylesheet, with temporary heights and backgrounds:


div.fs-logo {
	/* Site logo */
	height: 90px;
	width: 400px;
	background: #999;
	margin-bottom: 10px;
}
div.fs-horiznav {
	/* Horizontal menu */
	height: 25px;
	width: 710px;
	background: #999;
	margin-bottom: 10px;
}

div.fs-featured {
	/* Featured sections */
	width: 710px;
	height: 580px;
	background: #ccc;
	margin-top: 10px;
	margin-bottom: 10px;
}
div.fs-txt-featured {
	/* Featured */
	height: 30px;
	width: 110px;
	background: #999;
}
div.fs-features {
	/* Features */
	height: 570px;
	width: 590px;
	background: #999;
}
div.fs-bigfeature {
	/* Big feature */
	height: 260px;
	width: 590px;
	background: #666;
	margin-bottom: 20px;
}
div.fs-smfeatures div{
	/* Small  feature */
	height: 280px;
	background: #666;
	margin-bottom: 10px;
}

div.fs-recentpost {
	/* Individual recent post. Height is actually variable, but is a minimum of 49 px */
	height: 50px; // Roughly
	width: 190px;
	background: #999;
	margin-bottom: 10px;
}

This results in our final mockup stage, which looks fairly close in geometries to our "sliced" graphic design mockup:

We're now ready to produce the final code.

Step 5: Final Template Code

This is the final step in the coding process, where we drop in actual design elements, do cleanup on excess divs and classes, and get rid of any "blocking" elements:

Take all the custom CSS classes and drop the background and height settings - with the exception of fs-horiznav. (Some width settings are necessary. Drop those that are not.)
Now drop in design elements (images, text blocks) in the appropriate places. Use the necessary Blueprint classes. (E.g., I use "div class='clear' " to force a vertical reset after a group of horizontal blocks. Look for this in the sample, and try removing them to see what happens otherwise.)
Add any final div sections and CSS classes, as necessary. E.g., fs-smfeature, fs-posttitle, fs-postdate, fs-postauth, fs-descr, fs-recposts-head, fs-newsbox-head, fs-newsbox-ul.
Remove any custom CSS classes that are no longer necessary. E.g., fs-features, fs-txt-featured.
Remove any custom "constructor" divs that are extraneous, or merge them with existing Blueprint divs in your HTML. I've left them in for clarity.
Note that the CSS file, below, uses "outline" instead of "border" on all of the images. Outlines get rendered over top of an image and thus do not take up additional screen real estate.
The page's default line height is set to 115%.

Now we have our final design, below, which is the same as at the top of this tutorial:

Demo and Download

The final files have none of the gray-blocked elements, and there are additional verbose comments in the style.css file that should help you decipher the purpose of each custom class. The ZIP file includes images cropped from various movie posters, which are the copyright of their respective owners. The Blueprint CSS grid files are not included in the ZIP.

Please note that some minor discrepancies might exist between the source files and the code presented above.

Final Thoughts

Some final comments on the example in this tutorial:

The code presented here is a bit clunky with its extra div tags, but they're used to clearly illustrate a grid-based design process. Specifically, I've stretched out the mockup and coding process to highlight the possible stages. Many of the design elements can be tightened up and their corresponding div classes eliminated in the CSS file.
As you get accustomed to using CSS grid frameworks, it's likely you'll compress the three CSS grid mockup stages discussed above into just one stage, especially if you have a graphic design slice-up to start with.
This is not the only process for grid-based page design. For a much more indepth treatment of grid design, please see Mark Boulton's series, Five Simple Steps to designing grid systems.

This is not a complex example, nor a full theme for a blog platform, but I hope it helps you to understand how to use CSS grids for web page design. While the code here is for a static page, the next step is to integrate it with a blog platform to produce a homepage template.