Web design with 960 grid system

Sometimes we lose a lot of time solving some web design problems like unstable components positions or page structure. Often web pages change with screen width, content and web browser.

Some CSS frameworks like BluePrint and 960 Grid System cut down development time. They give a web developer a solid foundation to build UI with an easy-to-use grid and other features.

Photo credit: HannyB

This article presents 960 Grid System and suggests to integrate it in a dynamic web project (JEE JSF web project).

How 960 grid system works?

960 grid System framework propose two ways to manage the web page area. The first one use the central part of the web page with a fixe width. The second way use fluid width to define the exploited area of the page.

960 grid System framework uses the css class name to manage DIV position and the inner component position into the web page.

A row is defined by the container which is a div used to specify how many total columns exist, either 12 or 16.

If a grid unit contains grid children, the child need to a class which will indicate a number of columns it will take (grid_X). If you want to insert empty space before or after a grid unit, use class prefix_P or suffix_S.


pref grid_10 prefix_2 suffix_1 suf

The picture above explains how to use 960 grid CSS to manage Div positions. The content of the grid will be in the green area.

After we have a look to basic use case of the 960 grid framework, we will try to integrate it in a web application to manage screen components position.

960 grid in JEE project

Usually, the first step in UI design we define the page template. The picture bellow presents a template that we suggest to use for a project sample.


960 grid system gives us the possibility to choose the way to place the different part of the application user interface into a grid system. We made a choice to use fixed width of 960px with 12 grids.

To use 960 grid system in your template page you need to add 960.css to the CSS folder of the web project and reference it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="#{request.contextPath}/css/default.css"  rel="stylesheet" type="text/css"/>
<link href="#{request.contextPath}/css/960.css"  rel="stylesheet" type="text/css"/>
<title>Sample Template</title>
<body >

<div id="wrap">
	<div id="header" class="container_12">
		<ui:include src="/pages/template/header.xhtml" />
	<div id="main" class="container_12">
		<div id="menu" class="grid_2 " >
			<ui:include src="/pages/template/menu.xhtml" />
		<div id="content" class="grid_6  prefix_2 suffix_2">
			<ui:insert name="body" />

<div id="footer" class="container_12" >
		<ui:include src="/pages/template/footer.xhtml" />


The picture bellow presents the application interface after we applied the 960 grid system.

One thought on “Web design with 960 grid system

  1. Pingback: WordPress Themes 960 Grid System Camfrog | Camfrog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s