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='/stylesheets/bootstrap.css')
        link(rel='stylesheet', href='/stylesheets/font-awesome.css')
        link(rel='stylesheet', href='/stylesheets/style.css')
        script(src='/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.

5 thoughts on “NodeJS Tip: Jade with HTML5 Boilerplate”

  1. Doesn’t Work , add “|” to fix it:

    !!! 5
    //if lt IE 7

    //if IE 7

    //if IE 8

    html(class=’no-js’, lang=’en’)

  2. Thanks Johan. I did this with Express 2 and an earlier Jade, so guessing something changed. I’ll test it out and update.


  3. Johan, I tried in Express 3 with jade 0.27.6. Other than adding the handling of the body to “block content”, it worked just fine. Email me the code since it got trashed in the comment.


  4. The following is the solution i found that allow jade to render HTML as in the HTML5 boilerplate
    ( tested on jade version 1.9.2) (THE RIGHT ONE )

    doctype html
    //[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'>

    - // html
    include head
    include body

    Ciao Massimiliano
    PS: sorry but the code was not shown correctly in the previous post
    this is the last try (hope the right one)

Leave a Reply

Your email address will not be published. Required fields are marked *