This document outlines the exact way in which the Templating Engine
looks for your content files and composes your pages. Every website built on the
BITS Framework must conform to the structure defined below.
template/meta.html contains all tags that belong in the document
<head> across all pages. For example, linking the website icon or
the gobal stylesheet. DO NOT include a
tag, this will be specified per page and injected into the
as the template is composed. You should instead set the overall site name
<meta name="application-name" content="ABC Company Website">
tag as can be seen in the source of this page.
template/header.html should contain any site content that should
appear at the top of every page body. Likewise,
elements that you want to come after the main content of every page.
Actual page content goes into the
pages/ folder structure.
This site acts as a basic directory structure with various tests and examples
to use as a baseline and guide your implementation. URLs are written as
to either the file
pages/pagename/index.html. The existence of a
matching directory/index will take precedence. Deep paths can be specified as
you would expect. The following path
point to either the file
pages/deep/path/to/page/index.html or to
pages/deep/path/to/page.html depending on your directory structure.
If a linked page is not found, an HTTP 404 error is emiited and a message is
served from the file
pages/errors/404.html. If the first querystring
parameter of the URL is not a simple string like
then an HTTP 400 error message is emitted and served from
Querystring parameters after the
pagename parameter are perfectly
acceptable though, like this
rootpath/?pagename&this=ok. If either
of these error files do not exist, a blank page will be simply by rendered
instead of an error message.
Each individual page in
pages/ should be a minimal valid
<body> tags are
as in the following example:
Content files do not have to be Static HTML. Anywhere an
file can be used, a
.php file could take it's place. This includes the
template/, as well as those in
pages/. PHP files
take precedence over HTML files. Further discussion on the
usage of PHP is beyond the scope of this
document but an example of server-side rendering is included in this package.
FYI All text content before the
<title> tag in your content files will be dropped.
DO NOT PLACE ANY CONTENT OTHER THAN THE DOCTYPE DECLARATION ABOVE THE TITLE TAG IN THESE FILES.
It's ok to have PHP functions, etc above the doctype as long as nothing is output before the title
All markup after the title tag will be injected into a
<main> element with the rest of the template composed around it.
DO NOT INCLUDE
<main></main> tags in your
template header/footer or in your content files, they will be added automatically.
By default the file
theme.css is included in every page. Use
this to customize the general look-and-feel of your site. If you purchased a
theme, keep in mind that it will be pretty closely tied to the template scructure that
it came with. Changes you make in the header and footer files might affect how the theme looks.
Use the Theme Engine Test Page to determine if your customized
theme is covering all the necessary elements.
Aside from overall thematic changes, each content page can actually specify it's own
overriding or unique styles by including a
<style> tag after the
As you can see, this framework places very few restrictions on the structure
of your project. If you require clarification or have any comments you'd like to
share, feel free to get in touch.