HTML+CSS Templates Manifest 1.0

Author:
Daniel Glazman <daniel.glazman@disruptive-innovations.com>
Date:
2009-jan-08
This version:
http://disruptive-innovations.com/zoo/templatesManifest/1.0/templatesManifest.html
Older versions:
none

Creative Commons License
HTML+CSS Templates Manifest by Disruptive Innovations SARL is released under Creative Commons Attribution Share Alike license.


  1. 1.Abstract
  2. 2. Requirements
    1. 2.1. Author Requirements
    2. 2.2. User Requirements
  3. 3. The (X)HTML+CSS Templates Manifest format
    1. 3.1. The 'templates' element
    2. 3.2. The 'template' element
    3. 3.3. The 'title' element
    4. 3.4. The 'author' and 'contributor' elements
    5. 3.5. The 'version' element
    6. 3.6. The 'date' element
    7. 3.7. The 'package' element
    8. 3.8. The 'license' element
    9. 3.9. The 'website' element
    10. 3.10. The 'support' element
    11. 3.11. The 'demo' element
    12. 3.12. The 'path' element
    13. 3.13. The 'description' and 'p' elements
    14. 3.14. The 'tags' element
    15. 3.15. The 'format' element
    16. 3.16. The 'width' element
    17. 3.17. The 'columns' element
    18. 3.18. The 'sidebars' element
    19. 3.19. The 'direction' element
    20. 3.20. The 'colorPalette' element
    21. 3.21 The 'thumbnail' element
    22. 3.22 The 'size' element
  4. 4. Example

1. Abstract

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.

2. Requirements

There are two types of requirements for a manifest format for (X)HTML+CSS templates: template author requirements, user requirements.

2.1. Author Requirements

A (X)HTML+CSS template author needs the following information to be associated with his/her template:

2.2. User Requirements

In addition to author requirements, a (X)HTML+CSS template user also needs the following information to be associated with a template:

3. The (X)HTML+CSS Templates Manifest format

3.1. The 'templates' element

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.

3.2. The 'template' element

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:

3.3. The 'title' element

The 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.

3.4. The 'author' and 'contributor' elements

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>

3.5. The 'version' element

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>

3.6. The 'date' element

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>

3.7. The 'package' element

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>

3.8. The 'license' element

The license element contains an absolute URI for the licensing terms 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>
<license>http://www.example.com/templates/license.txt</license>
...
</template>
</templates>
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.

3.9. The 'website' element

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>

3.10. The 'support' element

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>

3.11. The 'demo' element

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>

3.12. The 'path' element

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>

3.13. The 'description'  and 'p' elements

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.

3.14. The 'tags' element

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>

3.15. The 'format' element

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>

3.16. The 'width' element

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>

3.17. The 'columns' element

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>

3.18. The 'sidebars' element

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>

3.19. The 'direction' element

The 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>

3.20. The 'colorPalette' element

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>

3.21 The 'thumbnail' element

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.

3.22 The 'size' element

The size element contains the size of the template's package in bytes.

4. Example

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.