Dan Peverill - Front-End Web Developer

XHTML/CSS Framework

Each time I start coding a web site, I have the same exact file structure and base code that I use. The base code I use is a CSS reset and a skeleton XHTML file that has your doctype and header ready to go. The file structure keeps everything organized and consistent so it’s easy to find the files I’m looking for.

File Structure

|- css
  -- layout.css
  -- print.css
  -- stylesheet.css
|- graphics
|- images
|- javascript
|- psd
-- index.html

stylesheet.css

/*
*	IMPORTS
*/

@import url("layout.css");

layout.css

/*
*	DEFAULTS
*/

* { margin: 0; padding: 0; }
body { font: 100%/1.125em Verdana, sans-serif; }
input, button, textarea { font: 1em Verdana, sans-serif;}
input, button { vertical-align: middle; }
legend { display: none; }
fieldset { border: none; }
ul, ol { list-style: none; }
a { color: #1682cc; }
a img { border: 0; }
table { border-collapse: collapse; width: 100%; }
hr { display: none; }

index.html

<!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" xml:lang="en" lang="en">
	<head>
		<title>Page Title</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css" />
		<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
	</head>
	<body>
		
	</body>
</html>