UX Design and Development course

Jade - pre-processor for the JavaScript'ers

Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node.

At it's core, Jade is much like Haml, just slightly re-imagined for JavaScript as so many do.

Read more about all of Jade's features.

Want to see real time conversions? Check out html2jade.org

The basics of Jade

The core feature of Jade is the reduction of markup needed to create an HTML element. First off, you don't need the chevrons < ... > that surrounds the tag name. Next, you don't need closing brackets </ ... > either.

Unlike Haml, there is no need to place a percent symbol % before the selector name.

Simple tag conversion

HTML:
<!DOCTYPE html>
Jade:
doctype html
HTML:
<strong>Hello, World!</strong>
Jade:
strong Hello, World!

Jade also knows which elements are self closing:

HTML:
<img/>
Jade:
img

Text

Jade offers three ways to enter text. Inline, piped and block. Using these techniques you can accomplish many combinations of copy blocks.

Jade:
p this is standard inline text, you can also add <b>add inline html elements</b> if needed,.

p
  | This is a piped string.
  | When adding a new <strong>pipe</strong>, this will break the strings up

p.
  This makes it easy to have a large block of text
  that you will want to <a href="link>"breakup</a> and not have
  to worry about using pipes in each break

p
  | I need to add some text
  a(href="link") click me
  | then I can continue to write more text
HTML:
<p>this is standard inline text, you can also add <b>add inline html elements</b> if needed,.</p>
<p>
  This is a piped string.
  When adding a new <strong>pipe</strong>, this will break the strings up
</p>
<p>
  This makes it easy to have a large block of text
  that you will want to <a href="link>"breakup</a> and not have
  to worry about using pipes in each break
</p>
<p>I need to add some text<a href="link">click me</a>then I can continue to write more text</p>

Adding attributes

HTML:
<a href="google.com">Google</a>
<a class="button" href="google.com">Google</a>
Jade:
a(href='google.com') Google
a(class='button', href='google.com') Google

Classes and IDs literal

Much like Haml, simply declaring the class or ID on the tag will produce the desired HTML output. And exactly like Haml, if you don't designate a tag, the <div> will be used by default.

Jade

a.button click me
.content put stuff in here
a#main-link click me too
#content pictures? anyone?

HTML

<a class="button">click me</a>
<div class="content">put stuff in here</div>
<a id="main-link">click me too</a>
<div id="content">pictures? anyone?</div>

Intelligent markup

The class attribute can be a string (like any normal attribute) but it can also be an array of class names, which is handy when generated from JavaScript.

Jade:
- var classes = ['foo', 'bar', 'baz']
a(class=classes)
//- the class attribute may also be repeated to merge arrays
a.bing(class=classes class=['bing'])
HTML:
<a class="foo bar baz"></a><a class="bing foo bar baz bing"></a>

Boolean attributes

HTML:
<input type="checkbox" checked="checked"/>
<input type="checkbox" checked="checked"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
Jade:
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox')
input(type='checkbox', checked=true)

If the doctype is html jade knows not to mirror the attribute and uses the terse style (understood by all browsers).

HTML:
<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" checked="checked">
Jade:
doctype html
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox')
input(type='checkbox', checked=true && 'checked')

Nesting is pretty awesome

Basic nesting in Jade is addressed by returns and soft (2 space) tabbing.

HTML:
<div class="class">
  <ul class="class">
    <li><a href="link/path">click me</a></li>
    <li><a href="link/path">click me</a></li>
    <li><a href="link/path">click me</a></li>
  </ul>
</div>
Jade:
div.class
  ul.class
    li
      a(href='link/path') click me
    li
      a(href='link/path') click me
    li
      a(href='link/path') click me

Jade even offers a way that you can next tags without having to always indent

Jade:
div.class: ul.class
  li: a(href='link/path') click me
  li: a(href='link/path') click me
  li: a(href='link/path') click me

Or another example would be

HTML:
<a href="/"><img src="/path/img.jpg"/></a>
<div class="orange">
  <p>these are words</p>
</div>
Jade:
a(href='/'): img(src='/path/img.jpg')

div.orange: p these are words

Summary

There it is. Want to play more with Haml? A great way to learn is to write some HTML that you are used to and run it through a converter to see how things shake out.