PHP Starter Template
Since Alex posted his HTML Starter Template article last week I was inspired to condense some of my starter code for building sites in PHP.
I use Aptana to code, so whenever I make a new project, I start by copying in files from 2 template projects I've made, xhtml-template and php-template. Each project has its own file structure and stub files. Since Alex already posted a thorough XHTML starter, I'll focus on the PHP template today.
The files and folders I include are as follows:
- components
- banner.php
- doctype.php
- footer.php
- global.php
- head.php
- sidebar.php
- css
- styles.css
- images
- js
- main.js
- offline-files
- docs
- mocks
- index.php
All of the PHP files in the components folder can be used by the pages on the site if need be, or deleted if not.
This is how I include the files on the homepage, index.php:
<?
include($_SERVER['DOCUMENT_ROOT'] . '/components/global.php');
$metaTags['keywords'] = '';
$metaTags['description'] = '';
$metaTags['author'] = '';
$metaTags['copyright'] = '';
$metaTags['charset'] = 'UTF-8';
$pageTitle = '';
$pageId = '';
include($_SERVER['DOCUMENT_ROOT'] . '/components/head.php');
?>
<body>
<? include($_SERVER['DOCUMENT_ROOT'] . '/components/banner.php'); ?>
<? include($_SERVER['DOCUMENT_ROOT'] . '/components/footer.php'); ?>
</body>
Inside the Components Directory
Here are the default contents of those files:
global.php
<?php
$metaTags = new ArrayObject();
$metaTags['keywords'] = '';
$metaTags['description'] = '';
$metaTags['author'] = '';
$metaTags['copyright'] = '';
$metaTags['charset'] = 'UTF-8';
$pageTitle = '';
?>
This file contains global variables used by the whole site. You could store constants here as well. The $metaTags array stores the default meta tags for the site, which can be overridden on a per-page basis.
This page also contains the default page title for the whole site, stored in the $pageTitle variable. Again, this should be overridden on a page by page basis (for best SEO benefits) but it's just a fallback in case you forget to define the title of that page.
banner.php
<div id="banner">
</div>
The banner file doesn't actually contain any PHP code, just an empty div tag. It's a stub, ready to be added to if the site needs a banner (and really, most sites do).
You could go a step farther by adding in a default image, or h1 and h2 tags with CSS image replacement, but for me, this is sufficient.
doctype.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">
You could combine the doctype file with the head file. It just comes down to preference for how granular you like the files to be, really.
footer.php
<div id="footer">
</div>
This is another stub. You could put default information such as copyright (using the © HTML entity perhaps), or a homepage link. But I just leave it empty and customize it for whichever site I'm working on.
head.php
<?php include('doctype.php'); ?>
<head>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Meta tags -->
<meta name="keywords" content="<?php echo $metaTags['keywords'] ?>" />
<meta name="description" content="<?php echo $metaTags['description'] ?>" />
<meta name="author" content="<?php echo $metaTags['author'] ?>" />
<meta name="copyright" content="<?php echo $metaTags['copyright'] ?>" />
<meta name="robots" content="FOLLOW,INDEX" />
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $metaTags['charset'] ?>" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<!-- Title -->
<title><?php echo $pageTitle; ?></title>
<!-- Shortcut icon -->
<link rel="shortcut icon" href="/favicon.ico" />
</head>
The head has some fun features. Let's go through one by one. First we include the doctype, as shown above. Then we start the head and include the default CSS file, styles.css.
Next we include a number of meta tags, including a few you may not have heard about before. For instance, we include <meta http-equiv="imagetoolbar" content="no" /> which causes IE to stop showing that annoying disk icon in the bottom right of images when you hover over them. We also include copyright and author tags, and another one to inform MS apps not to try to parse it with SmartTags. (I got this one from Blogger templates).
After that, we just define the title (that's a must) and link the default favicon file.
An observant reader will notice that we didn't define the JavaScript in the head. The reason for this is that it usually hurts page performance to define it in the head. In this page template, I didn't include the link to the template, but I recommend either adding it to the footer.php file after the closing div or creating a new file like so:
javascript-includes.php
<script src="/js/main.js" type="text/javascript"></script>
Default JavaScript to Include
As for JavaScript, I don't have a lot of helper methods or anything that I like to include since that is all taken care of by the library, ideally. But I do include this one piece of code which enables CSS background-image caching in IE:
// IE6 does not cache CSS background images by default.
// This code enables CSS background caching for the lifespan of the browsing session in IE6.
try {
document.execCommand('BackgroundImageCache', false,true);
} catch(e) {};
Other than that, I don't really include any boilerplate code. But suggestions are welcome! What default JavaScript templates do you use? Feel free to post your own in the comments.
Default CSS to Include
I am a big fan of Eric Meyer's reset styles. My default CSS pretty much looks like that:
/* Reset styles (adapted from Eric Meyer's Reset Reloaded) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul, li {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* Site styles */
/* Legend:
*/
/* Sitewide */
body {
font-size: 11px;
font-family: Helvetica, Arial, sans-serif;
color: #000000;
}
h1 {
font-weight: bold;
font-size: 27px;
}
h2 {
font-weight: bold;
font-size: 16px;
color: #000000;
}
h3 {
color: #000000;
font-size: 15px;
font-weight: bold;
}
h4 {
font-size: 12px;
font-weight: bold;
}
h5 {
color: #000000;
font-size: 11px;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: underline;
}
/* wrapper */
div#wrapper {
}
/* banner */
div#banner {
}
/* footer */
div#footer {
}
I could probably stand to update the CSS a bit. Right now the stubs are, well, just stubs-- I intend to add stronger default styles that are consistent with most site defaults nowadays. Maybe that will be the topic of a future article. Regardless, this is a nice blank slate to start out with.
What is your default template for starting websites? Comments are encouraged.
Labels: css, javascript, php
Since Alex posted his HTML Starter Template article last week I was inspired to condense some of my starter code for building sites in PHP.
I use Aptana to code, so whenever I make a new project, I start by copying in files from 2 template projects I've made, xhtml-template and php-template. Each project has its own file structure and stub files. Since Alex already posted a thorough XHTML starter, I'll focus on the PHP template today.
The files and folders I include are as follows:
- components
- banner.php
- doctype.php
- footer.php
- global.php
- head.php
- sidebar.php
- css
- styles.css
- images
- js
- main.js
- offline-files
- docs
- mocks
- index.php
This is how I include the files on the homepage, index.php:
<? include($_SERVER['DOCUMENT_ROOT'] . '/components/global.php'); $metaTags['keywords'] = ''; $metaTags['description'] = ''; $metaTags['author'] = ''; $metaTags['copyright'] = ''; $metaTags['charset'] = 'UTF-8'; $pageTitle = ''; $pageId = ''; include($_SERVER['DOCUMENT_ROOT'] . '/components/head.php'); ?> <body> <? include($_SERVER['DOCUMENT_ROOT'] . '/components/banner.php'); ?> <? include($_SERVER['DOCUMENT_ROOT'] . '/components/footer.php'); ?> </body>
Inside the Components Directory
Here are the default contents of those files:
global.php
<?php $metaTags = new ArrayObject(); $metaTags['keywords'] = ''; $metaTags['description'] = ''; $metaTags['author'] = ''; $metaTags['copyright'] = ''; $metaTags['charset'] = 'UTF-8'; $pageTitle = ''; ?>
This file contains global variables used by the whole site. You could store constants here as well. The $metaTags array stores the default meta tags for the site, which can be overridden on a per-page basis.
This page also contains the default page title for the whole site, stored in the $pageTitle variable. Again, this should be overridden on a page by page basis (for best SEO benefits) but it's just a fallback in case you forget to define the title of that page.
banner.php
<div id="banner"> </div>
The banner file doesn't actually contain any PHP code, just an empty div tag. It's a stub, ready to be added to if the site needs a banner (and really, most sites do).
You could go a step farther by adding in a default image, or h1 and h2 tags with CSS image replacement, but for me, this is sufficient.
doctype.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">
You could combine the doctype file with the head file. It just comes down to preference for how granular you like the files to be, really.
footer.php
<div id="footer"> </div>
This is another stub. You could put default information such as copyright (using the © HTML entity perhaps), or a homepage link. But I just leave it empty and customize it for whichever site I'm working on.
head.php
<?php include('doctype.php'); ?>
<head>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Meta tags -->
<meta name="keywords" content="<?php echo $metaTags['keywords'] ?>" />
<meta name="description" content="<?php echo $metaTags['description'] ?>" />
<meta name="author" content="<?php echo $metaTags['author'] ?>" />
<meta name="copyright" content="<?php echo $metaTags['copyright'] ?>" />
<meta name="robots" content="FOLLOW,INDEX" />
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo $metaTags['charset'] ?>" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta http-equiv="imagetoolbar" content="no" />
<!-- Title -->
<title><?php echo $pageTitle; ?></title>
<!-- Shortcut icon -->
<link rel="shortcut icon" href="/favicon.ico" />
</head>
The head has some fun features. Let's go through one by one. First we include the doctype, as shown above. Then we start the head and include the default CSS file, styles.css.
Next we include a number of meta tags, including a few you may not have heard about before. For instance, we include <meta http-equiv="imagetoolbar" content="no" /> which causes IE to stop showing that annoying disk icon in the bottom right of images when you hover over them. We also include copyright and author tags, and another one to inform MS apps not to try to parse it with SmartTags. (I got this one from Blogger templates).
After that, we just define the title (that's a must) and link the default favicon file.
An observant reader will notice that we didn't define the JavaScript in the head. The reason for this is that it usually hurts page performance to define it in the head. In this page template, I didn't include the link to the template, but I recommend either adding it to the footer.php file after the closing div or creating a new file like so:
javascript-includes.php
<script src="/js/main.js" type="text/javascript"></script>
Default JavaScript to Include
As for JavaScript, I don't have a lot of helper methods or anything that I like to include since that is all taken care of by the library, ideally. But I do include this one piece of code which enables CSS background-image caching in IE:
// IE6 does not cache CSS background images by default.
// This code enables CSS background caching for the lifespan of the browsing session in IE6.
try {
document.execCommand('BackgroundImageCache', false,true);
} catch(e) {};
Other than that, I don't really include any boilerplate code. But suggestions are welcome! What default JavaScript templates do you use? Feel free to post your own in the comments.
Default CSS to Include
I am a big fan of Eric Meyer's reset styles. My default CSS pretty much looks like that:
/* Reset styles (adapted from Eric Meyer's Reset Reloaded) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul, li {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* Site styles */
/* Legend:
*/
/* Sitewide */
body {
font-size: 11px;
font-family: Helvetica, Arial, sans-serif;
color: #000000;
}
h1 {
font-weight: bold;
font-size: 27px;
}
h2 {
font-weight: bold;
font-size: 16px;
color: #000000;
}
h3 {
color: #000000;
font-size: 15px;
font-weight: bold;
}
h4 {
font-size: 12px;
font-weight: bold;
}
h5 {
color: #000000;
font-size: 11px;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: underline;
}
/* wrapper */
div#wrapper {
}
/* banner */
div#banner {
}
/* footer */
div#footer {
}
I could probably stand to update the CSS a bit. Right now the stubs are, well, just stubs-- I intend to add stronger default styles that are consistent with most site defaults nowadays. Maybe that will be the topic of a future article. Regardless, this is a nice blank slate to start out with.
What is your default template for starting websites? Comments are encouraged.
Labels: css, javascript, php
posted by Jonah Dempcy at
7:28 PM
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home