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

Do you even Jade, bro?

By Brett Hayes

Made with Slides.com

Do you even Jade, bro?

Are you jaded with HTML? No worries bro! Jade has you covered making HTML fun again! In this session I'll be giving a basic overview of how to get up and running with Jade.

  • 974

More from Brett Hayes