My HTML/CSS templating system

When creating pages with HTML/CSS I like to make it as speedy as possible for both production and future maintenance. I make this possible with a very simple PHP template system.

UPDATE: This article was written in 2007. Many techniques are no longer considered best practice.

Every page on a site has lots of identical elements e.g. the DOCTYPE, opening and closing <html> and <head> tags and lots of pages have very similar characteristics that vary slightly from page to page e.g. the <title> tag or external JavaScript files a page needs so why needlessly repeat that information. Turning it into a template speeds up the time it takes me to build a site and reduces time spent making changes later in production. My template uses PHP but this could easily be done with any other language.

Generic page e.g. index.php

Here is my normal generic page. I have commented it out quite extensively so you can see what all the variables are and why they exist.


<?php

include($_SERVER["DOCUMENT_ROOT"]."/inc/def.inc.php");

$pageTitle = 'Welcome to Phil\'s Website'; /* <title />*/
$pageDescription = 'Phil\'s website is a great website.'; /* <meta />*/
$pageClass = 'home'; /* <body class="home"> */

$css = array('home','forms'); /* CSS needed for this page */
$extraCSS = 'div.box{color: #F00;}'; /* page specific style */
$js = array('jquery','validateForm'); /* JavaScript needed for this page */
$extraJS = ''; /* page specific JavaScript */

/* HTML header */
include($_SERVER["DOCUMENT_ROOT"]."/inc/header.inc.php");
?>
<!-- All page content goes here between these two PHP includes statements -->
<?php include($_SERVER["DOCUMENT_ROOT"]."/inc/footer.inc.php"); ?>

def.inc.php

I store defined site variables in a file called def.inc.php but this could easily be an XML file or grabbed from a database.


<?php

define('SITE_NAME','Phil\s Website');
define('SITE_URL','www.philswebsite.com');

?>

header.inc.php

My header file looks like this:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?=SITE_NAME?> | <?=$pageTitle?></title>
<meta name="description" content="<?=$pageDescription?>" />
<?php include($_SERVER["DOCUMENT_ROOT"]."/inc/commonStyle.inc.php"); ?>
<link rel="home" title="Home" href="http://<?=SITE_URL?>/" />
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link href="/feed/" rel="alternate" type="application/rss+xml" title="rss" />
</head>
<body id="<?= str_replace('.','-',SITE_URL);?>" class="<?=$pageClass=?>">
<?php include($_SERVER["DOCUMENT_ROOT"]."/inc/shortcuts.inc.php"); ?>
<!-- // HOLDER DIV  // -->
<div id="holder">
<?php include($_SERVER["DOCUMENT_ROOT"]."/inc/branding.inc.php"); ?>

Note: shortcuts.inc.php includes a simple list with skip content links and branding.inc.php includes the site’s name and/or logo in a <h1> or a <div> tag.

commonStyle.inc.php

My stylesheet includes file looks like this:


<style type="text/css" media="all">
@import url("/style/reset.css");
@import url("/style/yui-fonts.css");
@import url("/style/global.css");
<?php
/* the 3 files above are present on every page but the files below are only relevant to a particular pagesor group of pages */
if (is_array($css)){
  foreach($css as $import){
   echo "\\t".'@import url("/style/'.$import.'.css");'."\n";
  }
}
else{
  echo "\\t".'@import url("/style/'.$css.'.css");'."\n";
}
if($extraCSS){
  echo $extraCSS."\n";
}

?>
</style>
<?php //Internet Explorer Specific CSS ?>
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/style/ie7.css" media="all"><![endif]-->
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="/style/ie6.css" media="all"><![endif]-->

Note: I split my CSS into separate files. reset.css (Eric Meyer), yui-fonts.css (YUI) and global.css are set on every single page which includes html tags styling, common classes and basic layout of the site’s framework. Usually pages like the homepage have vastly different layouts so I split page/section specific CSS into its on file e.g. home.css.

commonBehaviour.inc.php

My JavaScript includes file looks like this:


<?php
// common JS
if (is_array($js)){
  foreach($js as $src){
    echo "\\t".'<script type="text/javascript" src="/behaviour/'.$src.'.js"></script>'."\n";
  }
}

if($extraJS){
  echo '<script type="text/javascript">'."\n";
  echo $extraJS."\n";
  echo '</script>'."\n";
}
?>

footer.inc.php

My footer includes file looks like this:


</div>
<!-- // END HOLDER DIV  // -->
<?php include($_SERVER["DOCUMENT_ROOT"]."/inc/commonBehaviour.inc.php"); ?>
</body>
</html>

Summary

I hope by revealing my tricks someone will benefit. So please let me know if you do or if you think these templates could be improved in any way.

8 responses to “My HTML/CSS templating system”

  1. Very ugly php code, but in the same time you seem to be among the few ones these days who know that php itself is a template language.

    Good luck cleaning this code!

  2. Thanks for the comment ion, I appreciate that the PHP code isn’t too great.

    If you or anyone else has got any ideas to improve the PHP, I’d love to here them.

  3. Hi !

    This will be helpful for sure, nice tips :)

    On my own though, I don’t tend to code specific browser code unless i’m really forced to, because I prefer writing standard approved code, and I think it’s not the programmer task to solve problems of uncapable browsers.

    We would all live in a better world if JS/CSS tricks didnt exist, because then browsers would all be compliant for not breaking their rendering :)

    Anyways, keep up the good work ;)
    Cheers
    KiLVaiDeN

  4. I agree KiLVaiDeN, it’s a bad idea to have specific browser code.

    Sometimes (Always), it is necessary to have some CSS adjustments for Internet Explorer and so I put these in separate files included via conditional comments.

  5. My point is that if IE is broken, don’t fix it :) make standard code instead, and validate your website towards the multiple validation utilities available, and if IE doesn’t render it the way it’s supposed to be, it’s fine; As long as users realise it’s their browser which is broken and not your code !

  6. KiLVaiDeN, the attitude of letting IE render incorrectly just doesn’t work out sadly because clients and visitors alike don’t appreciate broken layouts.

  7. I haven’t done web-design in 3 and a half years. This(and the rest of your site) has honestly been the best refreshers I’ve found on the web.