EvoBloggito

Free XHTML/CSS Template for Use with Photoshop 4-Column Grids

Author: Ray Gulick; Published: Jun 1, 2009; Category: CSS, Design/Development; Tags: CSS, Download, Template, XHTML; No Comments

A couple of days ago, we made some 4-column grid Photoshop templates available. By popular demand (OK, 2 people asked; but we’ve had hundreds of downloads) we’re furnishing a basic, barebones XHTML/CSS template to be used with the Photoshop grids. The template and style sheet match up with the Photoshop file "1024browserbase_960.psd." To use this XHTML/CSS for the other Photoshop grid templates available, adjust column widths and margins in the style sheet as appropriate, using the information on the Photoshop templates as a guide.

To point out the obvious (if you’ve looked at the template), the style sheet contains minimal styling, and cannot be considered a completed or comprehensive style sheet: it contains just enough styling to make the example elements behave, and it makes no attempt to be pretty. It supports the basic 4-column grid structure, but is only a starting point for your own website based on the Photoshop grid templates. It’s not meant to be a template per se, but a basic "framework" you can use as a starter. The major page areas that are defined are the header, navigation, content (with maincontent and sidebar) and footer. Depending on your design, the homepage XHTML/CSS may be significantly more complex than the "inside page" example provided.

Use and modification of these templates requires a basic understanding of XHTML/CSS and Photoshop. We would love to have you point us to websites you create using these templates, or hear your feedback here on our blog. This template has been tested in Mac and Windows Firefox 3.0, Safari 3.2.3, IE6, and IE7. As with the Photoshop grids, the template is available under a Creative Commons license, to be used and abused in anyway you see fit. The documents validate as XHTML 1.0 Strict and CSS level 2.1.

Download XHTML/CSS 4-Column Template»

Free 4-column Grid Photoshop Templates for Better Web Design

Author: Ray Gulick; Published: May 30, 2009; Category: CSS, Design/Development; Tags: Design/Development, Download, Grid, Templates; 14 Comments

UPDATE 9/29/09: If you’re looking for a 4-column grid-based WordPress theme, take a look at Evo4 CMS.

Most of us who design custom websites start with Photoshop. I currently use base template files that assume a 1024×768 screen resolution as the lowest common denominator (according to W3Schools, as of January, 2009, only 4% of identifiable browsers were operating at a screen resolution below 1024×768).

In the last 18 months or so, I’ve gone almost completely to the use of 4-column grids. They give me as much flexibility as I know what to do with, and allow for more sophisticated layouts than 2- or 3-column grids. And when it comes to being sophisticated, I need all the help I can get.

Over time, I’ve developed some variations of the basic 4-column template, varying the column widths and outside margins. Three of the ones I use most are available below as zipped files for download. They’re licensed under Creative Commons: you’re free to utilize them however you like for your own use, and share them with attribution. I encourage you to play with the column widths and spacing to make them work for your own purposes. If you feel like it, shoot me a link to a website you’ve designed using one of the grids (or a variation), or a note telling me if you found them helpful.

Zipped files are approximately 288k each.

Download: 4-column, 960 Template
Download: 4-column, 960 Uneven Columns Template
Download: 4-column, 996 Template

ALSO, download the Free XHTML/CSS template that goes with the first Photoshop template!