Over the past 5 or 6 years since I've gotten deep into CSS development, I've slowly and surely created a generic template that I use for any new HTML project. While it's not perfect, it's an excellent starting point for most new websites, or web applications. For quick development, I use a text editor called Editplus. It's fast, and offers a whole raft of features including the ability to define a template for any number of file types. The template I use contains most of the things that I want in any new document. While it mostly consists of CSS declarations, it does also have some quick hooks for jQuery, JavaScript, and CSS includes. So here it is...do you have any suggestions for good additions, or questions?
<!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" lang="en" xml:lang="en">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="includes/styles.css" rel="stylesheet" type="text/css" />
<script src="includes/js.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
alert('testing');
});
//-->
</script>
<style type="text/css">
<!--
/* set the page background color and margins. */
body {
margin: 0px;
background: #ffffff;
}
/* set the page font formatting. */
body, p, div, td {
font-family: verdana;
font-size: 9pt;
color: #000000;
}
/* default link colors - this is the default link color for the page */
a:link { font-weight: bold; text-decoration: none; color: #2b4d8a; } /* standard link color */
a:visited { font-weight: bold; text-decoration: none; color: #2b4d8a; } /* visited link color*/
a:visited:hover { font-weight: bold; text-decoration: none; color: #000000; } /* visited hover link color*/
a:hover { font-weight: bold; text-decoration: none; color: #000000; } /* hover over an unvisited link color */
a:active { font-weight: bold; text-decoration: none; color: #2b4d8a; } /* active link color */
-->
</style>
</head>
<body>
</body>
</html>
If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!
You should look into adding support for microformats/RDFa. Meta tags for facebook, etc could be handy too. Meta keywords aren't even used by major search engines anymore, so you could probably ditch it. Why not put that CSS into your master CSS file? I think it's better to start with a master CSS file and then override values where need be. Have you tried using a CMS or MVC framework? Seems like the best way to handle consistent headers and footers, not to mention other things as well.
Russ S. - June 26, 2009 11:03 pm
I highly recommend looking at blueprint css framework; it'll save you a LOT of time and give you some great starting CSS..
Tom K - June 29, 2009 02:23 am