HTML+CSS Templates Manifest
by Disruptive
Innovations SARL is released
under Creative
Commons Attribution Share Alike license.
Many web sites provide Web Authors with free (X)HTML+CSS templates, usually served as a ZIP package containing an example document, stylesheets and images/media. An online demo of the template is also often available. Using these templates is not trivial for people who lack basic computer knowledge of what is a ZIP package, how one can unpackage it, and what are really HTML and CSS.
This document proposes a XML format available to templates providers to let them list and describe their templates in a single document containing all the information needed to allow the user of a content editing environment to select, download and use a template package.
There are two types of requirements for a manifest format for (X)HTML+CSS templates: template author requirements, user requirements.
A (X)HTML+CSS template author needs the following information to be associated with his/her template:
In addition to author requirements, a (X)HTML+CSS template user also needs the following information to be associated with a template:
A Templates Manifest is a XML
document instance of root element templates
in namespace http://disruptive-innovations.com/zoo/templatesManifest/1.0
.
All text nodes in a document conforming to this format must be encoded in UTF-8.
An empty Templates Manifest is then:
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0"/>
The templates element contains zero or more template elements.
The templates element must carry a name
attribute
that holds a human-readable title for the repository the manifest
represents.
A template
element is a container for all information describing a template made
available to the public by the manifest's author.
A template
element must carry a non-empty shortname
attribute, that attribute being a XML ID.
A template
element contains:
title
elementsauthor
elementscontributor
elementsversion
elementdate
elementpackage
elementlicense
elementwebsite
elementsupport
elementdemo
elementpath
elementdescription
elementstags
elementformat
elementwidth
elementcolumns
elementsidebars
elementdirection
elementcolorPalette
elementthumbnail
elementssize
elementThe title
element contains a human-readable title for the template. That title
can be localized providing multiple title
elements carrying the
xml:lang
attribute.
If no localized title
element meets the language choices of the user, the first title
element in traversal order in the list of children of the parent template
element serves as the default title.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title xml:lang="en">Title of my template</title>
<title xml:lang="fr">Titre de mon modèle</title>
...
</template>
</templates>
A title
element can be empty, although an empty description is clearly
uninformative to the user and should be avoided.
The author
and contributor
elements respectively contain the name of an author of the template or
contributor to the template.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<author>John Doe</author>
<contributor>Pär Håkansson</contributor>
<contributor>François Léger</contributor>
<contributor>山田花子</contributor>
...
</template>
</templates>
The version
element contains the version of the template.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<version>1.0</version>
...
</template>
</templates>
The date
element contains the release date of the template in ISO 8601
format.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<date>2009-01-07T10:28Z</date>
...
</template>
</templates>
The package
element contains an absolute URI for the template ZIP package.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<package>http://www.example.com/templates/myTemplate-1.0.zip</package>
...
</template>
</templates>
The license
element contains an absolute URI for the licensing terms of the
template.
<?xml version="1.0" encoding="UTF-8"?>User agents - content editing environments in the current case - are expected to show the user the licensing terms for approval before download and local installation/usage.
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<license>http://www.example.com/templates/license.txt</license>
...
</template>
</templates>
The website
element contains an absolute URI for the template provider or the
template itself.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<website>http://www.example.com/templates/alltemplates.html</website>
...
</template>
</templates>
The support
element contains an absolute URI for template support.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<support>mailto:support@templates.example.com</support>
...
</template>
</templates>
The demo
element contains an absolute URI for an online demonstration of the
template
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<package>http://www.example.com/templates/myTemplate-1.0.zip</package>
<demo>http://www.example.com/templates/demos/myTemplate-1.0.html</demo>
...
</template>
</templates>
The path element contains a relative path to the mandatory master document instance contained in the ZIP package of the template.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<path>html/index.html</path>
...
</template>
</templates>
The description
element contains a human-readable description of the template. That
description can be localized providing multiple description
elements carrying the
xml:lang
attribute.
If no localized description
element meets the language choices of the user, the first description
element in traversal order in the list of children of the parent template
element serves as the default description.
Blocks of text inside the
description can be created encapsulating text nodes inside a p
element.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title xml:lang="en">Title of my template</title>
<title xml:lang="fr">Titre de mon modèle</title>
<description xml:lang="en">
<p>This is the first template I ever wrote</p>
</description>
<description xml:lang="fr">Ceci est mon tout premier modèle</description>
...
</template>
</templates>
An empty title
element is invalid.
The tags
element contains a comma-separated list of keywords.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<tags>monochrome,liquid,menus</tags>
...
</template>
</templates>
The format
element contains the textual data "html" or "xhtml", depending on the
format of the template.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<package>http://www.example.com/templates/myTemplate-xhtml-1.0.zip</package>
<format>xhtml</format>
...
</template>
</templates>
The width
element contains a length representing the width of the main content
area of the template. The format of a length is a number (with or
without a decimal point) immediately followed by a unit identifier ('%'
to represent a percentage of the viewport's width, or 'px' to represent
an absolute length in pixels). A number consists of one or
more digits "0" to "9" possibly followed by a dot (.) followed by one
or more digits. Lengths '0%' and '0px' are invalid.
Most common values are:
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTemplate">
<title>Title of my template</title>
<width>784px</width>
...
</template>
</templates>
The columns
element contains an integer representing the number of columns
in the main content area.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTwoColumnsTemplate">
<title>My 2 columns template</title>
<columns>2</columns>
...
</template>
</templates>
The sidebars
element contains a positive integer representing the
number of sidebars in the template.
The element can be omitted if the number of sidebars is 0, and is mandatory otherwise.
The sidebars
element should carry the position
attribute if the content of the element is not 0. The attribute
contains a keyword, "left" "right" or "both", describing if the
sidebars of the template are placed at the left, the right or either
side of the main content area.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTwoColumnsOneSidebarTemplate">
<title>My 2 columns and 1 sidebar template</title>
<columns>2</columns>
<sidebars position="right">1</sidebars>
...
</template>
</templates>
direction
'
elementThe direction
element contains a keyword, "ltr" "rtl" or "bidi-safe".
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myTwoColumnsOneSidebarTemplate">
<title>My 2 columns and 1 sidebar template</title>
<direction>ltr</direction>
...
</template>
</templates>
The colorPalette
element
contains a non-zero positive integer representing the number of colors
in the palette of colors used by the template, or the keyword "websafe"
to indicate the
216 web-safe palette.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="myUberGeekTemplate">
<title>My monochrome template</title>
<colorPalette>2</colorPalette>
...
</template>
</templates>
The thumbnail
element contains
an absolute URI to an image representing the template. This element is
optional although it presence is strongly recommended.
It is also strongly recommended to use data URLs to represent the thumbnail for a template instead of letting the users retrieve all thumbnails over the wire. You can use for instance Sveinbjorn Thordarson's DataURLMaker to turn a given image into a data URL.
The size
element contains the size of the template's
package in bytes.
The following example is a manifest for one single existing template authored and released by Bryant Smith.
<?xml version="1.0" encoding="UTF-8"?>
<templates xmlns="http://disruptive-innovations.com/zoo/templatesManifest/1.0">
<template shortname="aFarewellToColor">
<title xml:lang="en">A Farewell to Color</title>
<description xml:lang="en">
<p>Remember the early days when the Internet was all black and white,
this is a throwback to those days. In all seriousness, I made this
template because it was based on an earlier design that many found
useful. Plus I've always had a thing for creating designs on the web
with zero color, I guess it is an 'off the beaten path type deal'.</p>
<p>I should also mention that this template has some updates (err...
advantages) over the previous designs... this one uses h1 and h2
tags in the header for better SEO results, and has new image
rollovers for the navigation.</p>
</description>
<author>Bryant Smith</author>
<version>1.0</version>
<!-- the following URL does not exist (yet) -->
<license>http://bryantsmith.com/template/license.txt</license>
<website>http://bryantsmith.com/template/</website>
<support>http://bryantsmith.com/component/option,com_alfcontact/Itemid,55/</support>
<demo>http://bryantsmith.com/template/afarewelltocolor</demo>
<thumbnail>http://bryantsmith.com/template/previews/afarewelltocolor.jpg</thumbnail>
<package>http://bryantsmith.com/template/afarewelltocolor.zip</package>
<path>index.html</path>
<size>228275</size>
<tags>gray,menus</tags>
<format>xhtml</format>
<width>750px</width>
<columns>1</columns>
<sidebars>0</sidebars>
<direction>ltr</direction>
</template>
</templates>
A WYSYWYG web editor like BlueGriffon will only need the URL for that manifest to be able to download and use any template listed in the manifest. See a mockup of the Templates Manager based on the current specification and planned for BlueGriffon 1.0.