Preprocessors for HTML

Tools for Front End Design

CSS preprocessors are all the rage these days. Chris Coyier is musing about them. Stephen Hay uses them in his Responsive Design Workflow. The very popular front end design frameworks, Twitter’s Bootstrap and Zurb’s Foundation, use LESS and SASS, respectively.

As we integrate CSS preprocessing into our workflow for a project where we are delivering HTML and CSS to the client, the immediate concern I have is how to efficiently build a complex set of page templates for integration into the client CMS without using a CMS.

In projects where I am the sole designer and developer, I would normally use Symphony CMS to quickly build out page templates that can be updated dynamically, with changes to master and page templates being automatically distributed across all pages and tracked as changes to XSL files in a git repository. Then I can run a wget or use SiteSucker to output the HTML, CSS, JavaScript and any other assets to package into a ZIP archive for delivery.

In a distributed team of designers and developers, working on different platforms and with no experience using Symphony, my usual workflow may not make sense. There is the overhead of the Symphony codebase, the need to have a compatible localhost environment with Apache, MySQL and PHP, and the XSLT templating language.

However, as I thought through how best to manage and deliver a large number of static HTML pages, I began to wonder whether there would be some benefits in using XSLT in the same way that CSS preprocessors are used to write and compile CSS files. In many ways, the concepts are very similar. The preprocessors tend to offer these features:

  • Nesting - avoid repetitive CSS selectors
  • Variables - declare once, change everywhere
  • Mixins - package a set of properties as reusable chunks of code, with the option to pass variables

XSLT is a declarative language that works in much the same way to help avoid repeating the same code by setting up rules about how to process data, depending on the structure of the XML data that is being processed.

  • Nesting is analogous to match templates in XSLT, which provide instructions for how to handle the view of a particular element of data, selected by XPath, a far more powerful language for selecting elements than CSS.
  • Variables are analogous to variables and parameters in XSLT.
  • Mixins are analogous to named templates in XSLT.

Example Code

Note: This article assumes some knowledge of XML, HTML and CSS. If you need to learn a little more about any of these topics, there are plenty of resources on the web, so just do a little searching and you should be well on your way.

As a working example of these concepts in action, create some files that we can use to separate the front end code of a site into separate files that can be compiled into a single HTML file.

                site/
  ├── index.xml
  ├── xslt/
  │   ├── master.xsl

The XML File

The index.xml file is just a basic XML file that includes parameters and content that are specific to a particular page. For example, this XML would describe a home page:

              <?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="xslt/master.xsl" ?>
<data>
  <params>
    <website-name>Website Name</website-name>
    <page-title>Home</page-title>
  </params>
  <about>
    <section id="1" handle="about">About</section>
    <entry id="1">
      <title>Hello</title>
      <description>
        <p>Welcome to our site. This is a little description about who we are.</p>
      </description>
      <field-name attribute="attribute-value">value</field-name>
    </entry>
  </about>
</data>

Pay special attention to the XML Stylesheet declaration at the top of the file, which has a href attribute with the value of xslt/master.xsl. This declaration points to the file that is used a web browser to process this XML file to display the data as HTML. When the master.xsl file is available, almost all major browsers, going as far back as Internet Explorer 6, are able to process the XML file with the XSLT into HTML output.

The XSL File

The master.xsl file in the xslt directory is the XSLT file that is the main template that will be used to process the HTML output based on the data in the XML file.

              <?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml"
  doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
  doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
  omit-xml-declaration="yes"
  encoding="UTF-8"
  indent="yes" />

<xsl:template match="/">
  <html>
    <head>
      <title><xsl:value-of select="/data/params/website-name" /></title>
    </head>
    <body class="section">
      <h1><xsl:value-of select="/data/params/website-name" /></h1>
      <h2><xsl:value-of select="/data/about/entry/title" /></h2>
      <xsl:copy-of select="/data/about/entry/description/*" />
    </body>
  </html>
</xsl:template>

</xsl:stylesheet>

The XSLT stylesheet is a special type of XML file that conforms to the W3C specification for Extensible Stylesheet Language Transformations. In the above file, you’ll see an XML declaration at the top, followed by the opening tag of the stylesheet element with a namespace declaration for the xsl namespace. Following that is the xsl:output instruction, listing the properties to be used by the XSLT processor to output the result file. In this case, the output will be XML formatted as XHTML, omitting the XML declaration, encoded as UTF-8 and indented.

The next instruction provides rules for the output, using a match template. The match attribute of the xsl:template element has a value of /, referring to the root of the XML file. Within the xsl:template element, there is a pretty basic HTML structure, containing html, head, title, body, h1 and h2 elements. But there are also some XSL instructions, which will be replaced in the output by processing the selected XML nodes with the values from the XML file. Each of these XSL instructions includes a select attribute with an XPath expression as the value. XPath is used to navigate the tree structure of the XML file to select nodes of data to process.

The xsl:value-of instruction will output the text value of a node. The xsl:copy-of instruction will output a copy of the selected node, including attributes, text and descendant nodes.

If you were to copy these files to a web server, either a localhost or a remote server, and navigate to the XML file in a web browser, most browsers will use the built-in XSLT processor to display the HTML output. If you want to view the source, you’ll need developer tools to view the rendered code in the inspector. Very likely, viewing the source will show only the original XML file.

If you don’t have access to a server, but have a UNIX or Linux-based computer, you should be able to process the file on the command line. (On Windows, you can use Cygwin to run Linux applications.) To see whether you have xsltproc installed, run the following command to display the version of your XSLT processor:

              xsltproc --version

You should see something similar to the following output in your terminal:

              Using libxml 20703, libxslt 10124 and libexslt 813
xsltproc was compiled against libxml 20703, libxslt 10124 and libexslt 813
libxslt 10124 was compiled against libxml 20703
libexslt 813 was compiled against libxml 20703

Navigate to the directory containing the XML file:

              cd /path/to/directory

Then, run the following command:

              xsltproc -v -o index.html xslt/master.xsl index.xml

Running the above command should result in a new file, index.html, being created within the directory in which the command is run.

Here is an explanation of the xsltproc command:

  • The -v option enables verbose mode.
  • The -o option specifies the name of the output file that will be created, in this case index.html.
  • The next argument, xslt/master.xsl, is the path to the XSLT stylesheet.
  • The index.xml file is the XML file to be processed by the XSLT.

The HTML File

The resulting index.html file should contain the following XHTML code:

              <!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>Website Name</title>
  </head>
  <body class="section">
    <h1>Website Name</h1>
    <h2>Hello</h2>
    <p>Welcome to our site. This is a little description about who we are.</p>
  </body>
</html>

That would be a basic Hello, world example of using XSLT. But to illustrate nesting, variables and mixins, we need to go a little deeper into the features of XSLT.

The next article, XSLT Static Site Generator, will explore how to take advantage of XPath, variables, parameters, match templates, named templates and overriding templates.