Base model for a PHP based website

Posted on Jan 7, 2010 by Rich to Web Development

There are characteristics that every web developer has. One of those things is the way a project is started. While some developers might use open source Content Management Systems / Blogging software like: Wordpress, Joomla, Movable Type or any of the other systems out there, some developers chose to have a foundation to their projects.

Here at THAT Agency, we write alot of custom code for our clients, but I personally still like building off of my own foundation. Here is my breakdown.

Note that we usually build in PHP.

css/
inc/
js/
img/
template.php

Seems pretty simple right? well lets look inside the folders themselves.

css

This folder includes 2 files (which you can merge into 1, but i like the two files). We have been really utilizing the 960 Grid System for our development standards, so the first css file (reset-960.css) is pretty much what you expect. It contains the condensed versions of reset as well as the 960 grid. I opted not to use the text.css file that is included in the 960 grid download but wrote my own (this you can change to your own).

The next file site.css contains some regular standard css elements:

/* important */
html{background-color:#F9F9F9;}
body{font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:1.3em;}
*{margin:0;padding:0;}
/* headers */
h1{font-family:Georgia, "Times New Roman", Times, serif;font-size:24px;font-weight:normal;}
h2{font-family:Georgia, "Times New Roman", Times, serif;font-size:22px;font-weight:normal;}
h3{font-family:Georgia, "Times New Roman", Times, serif;font-size:20px;font-weight:normal;}
h4{font-family:Georgia, "Times New Roman", Times, serif;font-size:18px;font-weight:normal;}
h5{font-family:Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;}
h6{font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;}
h1,h2,h3,h4,h5,h6{margin:10px 0;padding:0;display:block;clear:both;}
/* Text and links */
p{font-family:Arial, Helvetica, sans-serif;line-height:1.5em;margin:0 0 10px 0;padding:0;}
blockquote{font-style:italic;display:block;margin:20px 0;padding:10px;background-color:#fff;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
a,a:link,a:visited{color:#21759B;}
a:hover{color:orange;}
ul{margin:0 0 0 10px;}
ul li{margin:0 0 0 10px;padding:0;}
/* clear pieces */
.clear5{height:5px;}
.clear10{height:10px;}
.clear15{height:15px;}
.clear20{height:20px;}
.clear25{height:25px;}
.clear50{height:50px;}
.clear100{height:100px;}
/* Text Classes */
.textRight{text-align:right;}
.textLeft{text-align:left;}
.textCenter{text-align:center;}

inc

The inc(ludes) folder for starters contains 3 files:

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEVELOPMENT TEMPLATE</title>
<link rel="stylesheet" media="all" type="text/css" href="/css/reset-960.css" />
<link rel="stylesheet" media="all" type="text/css" href="/css/site.css" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/site.js"></script>
</head>

analytics.php
This file was created to house your analytics code for your website. I find it annoying to have to copy and past something as simple as that on every page of your website.

footer.php