«Return to Blog List Free XHTML/CSS Template for Use with Photoshop 4-Column Grids
Template no longer available for download (article published in 2009). You should be using Zurb Foundation or Bootstrap as a basis for a responsive website.
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.
