Tag Archives: html5bp

NodeJS Tip: Jade with HTML5 Boilerplate

Like every good developer suffering from the Not Invented Here syndrome, I’ve been working on my own version of a NodeJS/Express project template to give me a headstart when goofing around. The HTML5 Boilerplate is a shoe-in, but getting it to play nicely with Jade to produce correctly formatted HTML output was another story.

The problem is all the IE specific conditional comments at the top of the HTML5 Boilerplate. For example:

Jade can handle conditional comments pretty easily within the body of a document, as indicated in the documentation. The problem with using them with the html element is it wants to put a closing html tag inside the comment, which leads to a weird page structure and not closing html tag.

The workaround is a bit ugly, but it got me what I wanted. The following will generate the HTML5 Boilerplate conditional comments with proper HTML using Jade:

!!! 5
//if lt IE 7
//if IE 7
//if IE 8

html(class='no-js', lang='en')
        title= title
        link(rel='stylesheet', href='http://nqlc725j47wafir1.zippykid.netdna-cdn.com/stylesheets/bootstrap.css')
        link(rel='stylesheet', href='http://nqlc725j47wafir1.zippykid.netdna-cdn.com/stylesheets/font-awesome.css')
        link(rel='stylesheet', href='http://nqlc725j47wafir1.zippykid.netdna-cdn.com/stylesheets/style.css')
        script(src='http://nqlc725j47wafir1.zippykid.netdna-cdn.com/scripts/require-jquery.js', data-main='scripts/main')
        block content

Yes, ugly is the right word, but fortunately you’ll only need to do this in the layout.