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:

<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en" class="no-js"><!--<![endif]-->

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
    <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
//if IE 7
    <html class="no-js lt-ie9 lt-ie8" lang="en">
//if IE 8
    <html class="no-js lt-ie9" lang="en">
<!--[if gt IE 8]><!-->
html(class='no-js', lang='en')
    <!--<![endif]-->
    head
        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/lib/modernizr.min.js')
        script(src='http://nqlc725j47wafir1.zippykid.netdna-cdn.com/scripts/require-jquery.js', data-main='scripts/main')
 
    body
        block content

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