Base model for a PHP based website

07 January

Base model for a PHP based website

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


<title>DEVELOPMENT TEMPLATE</title>

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


Like the idea? Check it out for yourself and download the zip file. It contains 2 folders. 1 for HTML and the other PHP

Download the template-foundation zip

TAGS: Web Development