In addition to this I need to say that you can use this great grid system not only with 12 or 16 columns grid. You can also create your own grid based on 18, 20, 22, 24 ... XX columns. The point of 960px is that it subdivides nicely into lots of equal column sizes so is a very versatile width. It also happens to be slightly less than the minimum width you can actually use when a browser is maximized on a 1024 pixel wide display. As you might have heard, we've already created an e107 theme Blue City using this great concept. In this blog post I'll try to explain you how to use 960 Grid System in your e107 themes.

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

Why using a grid sytem?

The answer is very simple. It saves time when writing your HTML and CSS code and is easy to use. It is also very useful in creating the graphic design for your theme.

Tools

You can use various tools in your theme creation process.

• Variable Grid System - http://www.spry-soft.com/grids
  
• Grid System Generator - http://www.gridsystemgenerator.com
  
• 960 Gridder - http://gridder.andreehansson.se
  
• 960-Grid-System Templates - http://github.com/nathansmith/960-Grid-System/tree/master/templates

Graphic Design

Well I'm not a guru in creating graphic concepts, because we have one of the best designers in e107 (and not only e107) Stoewarius, nevertheless I'll show you how to use 960 Grid System in your graphic design. I my all day work I prefer to use Adobe Fireworks for slicing but you can also us Adobe Photoshop. Go to http://960.gs and download the template package.



Inside this package you can find useful templates for your preferred graphic software. I'll use the 12 column one for Fireworks. Browse the package to /templates/fireworks and open 960_grid_12_col.png. As you can see there are 12 red columns and this is your working grid. Every column is 60px wide with 10px left and 10px right margin. The whole width is 960px and the real content width is 940px.



With this template you can easy create you layout. Let say you need in your header logo and banner areas, left column, center column and two menu areas after the header area. I'll not create a real design for a theme, I'll only show you how to use this grid system for your layout.

Using 960.css

The ZIP you've already downloaded (download again) comes with a lot of stuff to help you design with the 960 system, including PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop, Visio, and CSS framework with demo HTML. We'll only used the CSS files, which is all you need for coding your site. The system comes with 3 CSS files.

• 960.css – Sets up the grid system, the 12-, and 16-column containers, alpha, omega, and prefix. This file is necessary to the grid system.
  
• reset.css - “Initializes” the system so that all margins and paddings are 0, outline is 0, etc… This file is necessary to the grid system.
  
• text.css - Sets the font sizes including headers, adds margins to lists, etc… This file is not technically needed for the 960 grid system - we can ignore this file

960.css uses the following classes to structure the page:

• container_XX is used in the outermost box to determine how many columns. You can use container_12 or container_16.
  
• grid_XX is the bread and butter of the system. XX is for how many columns you want the block to be. For example, grid_10 will be 10 columns wide. The exact pixel width is determined by how many columns you’ve divided the grid into.
  
• prefix_XX allows you to add in blank columns before a block. XX specifies how many blank columns you want.
  
• sufix_XX allows you to add in blank columns aftera block. XX specifies how many blank columns you want.
  
• push_xx and pull_xx. These classes can be used for "Content first" layouts.
  
• alpha is for if you have children blocks. If you do this, you’ll want the first child to have no margin on the left side. alpha makes that happen.
  
• omega is similar to alpha, except that it gives no margin on the right side. Use it for the last child
  
• clearfix and clear - Clear Floated Elements, more info at http://sonspring.com/journal/clearing-floats and http://perishablepress.com/press/2009/12/06/new-clearfix-hack

There are lot of tutorials over the web on how to combine and use all this classes.

960 in action

Now it is a time to start creating your first 960gs based theme. Copy 960.css to your theme folder. Open theme.php and add these lines to the theme_head function.

function theme_head() {
echo '
	<link rel="stylesheet" href="'.THEME_ABS.'960.css" type="text/css" media="all" />
';
}

Because theme_head function will load after the main style.css file we need to put the contents of reset.css at the top of your style.css. Copy the code from reset.css and paste it to the top of style.css

The last step is to create your $HEADER and $FOOTER. You can easy create your HTML code for the layout without any line of CSS code. Everthing is don by 960.css.

//In the code below remove the empty space after the " { " (left curly brace )
$HEADER = '
<div class="container_12 clearfix">
	<!-- HEADER BOF -->
	<div class="grid_5">
		<!-- Add your LOGO and SITENAME content here -->
	</div>
	<div class="grid_7">
		<!-- Add your BANNER SHORCODE here -->
	</div>
	<div class="clear"></div>
	<!-- HEADER EOF -->
	
	<!-- AREA 2 BOF -->
	<div class="grid_6">
		{ SETSTYLE=menu_area}
		{ MENU=2}
	</div>
	<!-- AREA 2 EOF -->
	<!-- AREA 3 BOF -->
	<div class="grid_6">
		{ SETSTYLE=menu_area}
		{ MENU=3}
	</div>
	<!-- AREA 3 EOF -->
	<div class="clear"></div>
	
	<!-- AREA 1 BOF -->
	<div class="grid_4">
		{ SETSTYLE=menu_area}
		{ MENU=1}
	</div>
	<!-- AREA 1 EOF -->
	<!-- MAIN CONTENT BOF -->
	<div class="grid_8">
		{ SETSTYLE=center}
';

$FOOTER = '	
	</div>
	<!-- MAIN CONTENT EOF -->
	<div class="clear"></div>
	
	<!-- FOOTER BOF -->
	<div class="grid_12">
		<!-- Add your footer content here -->
	</div>
	<div class="clear"></div>
	<!-- FOOTER EOF -->
</div>
';

As you can see your layout is done by these few lines. The only thing you need to remember is that you always need to add DIV with class CLEAR after every grid column combination. Every grid_xx is floated to the left and you need to clear these floats to start a new "row" with columns.

I hope this post was helpful. Just try 960.gs and you'll find how easy to use is this grid system and how many time you'll save when writing your code. Happy coding !!!