Do you even Jade, bro?

Making HTML fun again

What is Jade?

  • DRY HTML templating language
  • terse
  • supports dynamic code
  • uses nesting
  • clean to read and write

Tags

Tags are defined by their name, a space and then any text.

// Jade tags
ul
    li This is a bullet point
    li Another bullet point

p This is a paragraph
// HTML output
<ul>
    <li>This is a bullet point</li>
    <li>Another bullet point</li>
</ul>

<p>This is a paragraph</p>

Tag Examples

// Jade tags with attributes
img(src="cat.jpg", alt="Persian")

// HTML output
<img src="cat.jpg" alt="Persian"/>
// Jade inline syntax
ul
    li: img
    li This is some text #[span with a tag inside a span]

// HTML output
<ul>
  <li><img/></li>
  <li>This is some text <span>with an inline span</span></li>
</ul>

Attributes

Inline tags

Plain text

// Jade piped text
| Plain text can include #[em html]
p
  | It must always be on its own line

// HTML output
Plain text can include <em>html</em>
<p>It must always be on its own line</p>
// Jade multiline text
div.
    This is some multiline text
    that is manually returned
    to new lines.

// HTML output
<div>This is some multiline text
that is manually returned
to new lines.</div>

Piped text

Multiline text

Inline code

// Jade
- var name = "<em>Brett</em>";
p Hi, my name is #{name}

// HTML output
<p>Hi, my name is & l t ; e m & g t ; Brett & l t ; / e m & g t ;</p>
// Jade
- var name = "<em>Brett</em>";
p Hi, my name is !{name}


// HTML output
<p>Hi, my name is <em>Brett</em></p>

Escaped variables

Unescaped variables

Template Blocks

// Jade index.jade

doctype html
html
    head
        title Presentation
        
        block scripts
            script(src="main.js")
    body

Defining blocks

// HTML output

<!DOCTYPE html>
<html>
  <head>
    <title>Presentation</title>
    <script src="main.js"></script>
  </head>
  <body>
  </body>
</html>

Overriding Blocks

// Jade
// We've already defined "block scripts" in index.jade

extends index

block scripts
    script(src="new.js")
// HTML output

<!DOCTYPE html>
<html>
  <head>
    <title>Presentation</title>
    <script src="new.js"></script>
  </head>
  <body>
  </body>
</html>

Inheriting Blocks

// Jade
// We've already defined "block scripts" in index.jade

extends index

block append scripts
    script(src="new.js")
// HTML output

<!DOCTYPE html>
<html>
  <head>
    <title>Presentation</title>
    <script src="main.js"></script>
    <script src="new.js"></script>
  </head>
  <body>
  </body>
</html>

Includes

// Jade
// page.jade

include ./partials/_navigation.jade
// HTML output

<nav>
    <a href="goguardian.com">GoGuardian</a>
</nav>
// Jade
// navigation.jade

nav
    a(href="goguardian.com") GoGuardian

Classes & ID's

// HTML output

<div class="button"></div>

<div id="gg"></div>
// Jade

.button

#gg
// Jade

.button.blue
article#gg.button.blue

// HTML

<div class="button blue"></div>
<article id="gg" class="button blue"></article>

Comments

// HTML output

<!-- This comment will be output in HTML -->
// Jade

// This comment will be output in HTML
// Jade

//- This comment will not be output in HTML
// HTML output

Thank you!

The End.

Documentation

Made with Slides.com