Accessibility Links

Search Blink-Design

Sharing my site template

Before you start work on a site I find it helps to have a template ready that you can just grab a copy of and start working on. I don’t like frameworks as such but I do like having key files prepped and ready to go.

I won’t bore you to death with this post. Instead I’ll try to run through how I setup a site directory when beginning a new project.

Image

Creative

This is where I keep all my PSDs, fonts and other design related files for the project. It’s just a handy place to keep all the raw stuff that you may need to come back and edit later. Initially I start with two PSDs that are setup with grid lines and overlays for a 960 grid based layout. You can find more from the 960 grid system site.

CSS

Pretty obvious what goes in here but I tend to start with three files which are screen.css, print.css and resets.css. All my main site styles are placed in screen.css and at the top of the document I import resets.css which helps normalize the browser defaults. In case you’re wondering, it’s a modified version of Eric Meyer’s CSS reset, but whose isn’t these days?

Images

As a rule of thumb I place content images in /images or a sub folder of it and any site decoration images (CSS backgrounds, header images etc) are placed in /images/site.

JS

I start with a fresh copy of jQuery and a common.js to keep all my various functions.

Other bits..

And of course there is your standard index.html in there.

This folder structure can grow depending on the site. For example I often add an /inc folder which will hold any PHP includes but as I can’t always be sure of a PHP environment I don’t start with it.

You can stop reading here and just skip to the bottom to grab a download if you wish, but other readers can have a look at a couple of the templates.

The HTML template


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt">
<html xml="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
			<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
			<link rel="stylesheet" type="text/css" media="screen" title="Main Styles" href="css/screen.css" />
			<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
			<!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" /><![endif]-->
			<script type="text/javascript" src="js/jquery.js"></script>
			<script type="text/javascript" src="js/common.js"></script>
			<title>Title goes here</title>
	</head>
	
	<body>	
	
		<dl id="access">
			<dt><strong>Accessibility Links</strong></dt>
				<dd><a href="#content" title="Skip to content">Skip to content</a></dd>
				<dd><a href="#nav" title="Skip to navigation">Skip to navigation</a></dd>
		</dl>
	
	</body>
</html>

Regardless of the arguments I’m a fan of XHTML 1.0 Strict for the time being and although I know it isn’t really pure XHTML it does ensure I write the cleanest code possible. All the usual stuff is in there but I’ve dropped having a wrapper <div> by default as I try to work from the content out and only add elements as necessary. Of course I’m sure you’ve noticed my accessibility links sitting there. They are something I include with every site so it makes sense to have it in the template and it’s far easier to delete them.

Lastly, I tend to shy away from adding comments to my HTML unless absolutely necessary as I find it’s fairly obvious to tell when various wrappers are opening and closing if the developer follows a sensible naming structure and indents the code.

The CSS template


/* ----------------------------------------------------------
File: screen.css
Site: www.
Description: All site styles
Author: Simon Smith - http://www.blink-design.net
Version: 1.0
--------------------------------------------------------------

/* Imports ---------------*/ 
@import url(resets.css);

/* Body ----------------*/ 
body {
background: #fff;
text-align: left;
font: 62.5% Verdana, Helvetica, Arial, sans-serif;
color: #000;
}

/* Hidden items */
#access,
legend span { 
position: absolute; left: 0px; top: -3000px; width: 1px; height: 1px; overflow: hidden; 
}

This is all I start with CSS wise!

I’ve got my resets imported and a few body styles setup including the 62.5% font size. For those not in the know the reason this is used is so that ems can be used as if they were pixels. For example 1.2em is pretty much the same as 12 pixels and this makes them far easier to use.

The only other rule I have in place is the one to hide any items that still need to be seen by screenreaders (which display: none will ruin) so all that I have to do is drop the selectors into this list.

Download the template

Which you can do by clicking right here!

Feel free to use or modify my setup to suit your needs. Or just carry on as you were and call me weird instead…

Posted on Sunday, May 3rd 2009 and there are 4 comments

Categories: Tricks n Tips, Web Stuff

4 Comments

Contribute

Fields marked with * are required. Your email will not be shown.

  • Please enter the word you see in the image below:

Site Navigation