JADE Basics Part 1

What is JADE?

Anyone familiar with NodeJS should be familiar with JADE. If you aren't, JADE is a high performance template engine built by the same people who brought us NodeJS and heavily influenced by HAML. JADE is usually the goto solution for NodeJS powered sites.

JADE with a Pre-Processor

Paired up with pre-processor, JADE can be used to create webpages that are easy to create and manage. JADE allows for importing, including and extending files, iteration, variables and much more. In this tutorial we'll be using http://incident57.com/codekit/CodeKit to pre-process our JADE.

CodeKit Crash Course

All thats needed to use CodeKit is to open the app and drag your project folder inside. CodeKit will process the JADE files every time the file is saved.

HTML Tags and Basic Syntax

JADE's syntax is pretty simple. It is written basically just the way HTML is just without the closing tags. For example, here is a really simple HTML file written in JADE.

Jade
html  
    head
        title HTML from JADE
    body
        h1 Here is an H1 Tag
HTML
<html>  
   <head>
        <title>HTML from JADE</title>
    </head>

    <body>
        <h1>Here is a H1 Tag</h1>
    </body>
</html>

Indentation is very important in JADE. Indenting lets JADE know that a particular tag should be nested inside another. In the following example the div tags are siblings and the paragraph tags are nested inside a div.

JADE
div  
    p
div  
    p
HTML
<div>  
    <p></p>
</div>

<div>
    <p></p>
</div>

Putting text inside of a tag is as simple as placing a space followed by the text you want to populate the tag with.

JADE
div  
    p Here is a p tag
div  
    p Here goes a second paragraph
HTML
<div>  
    <p>Here is a p tag</p>
</div>

<div>
    <p>Here goes a second paragraph</p>
</div>

Attributes

Now Attributes in JADE are simple as well. To add an attribute, place them inside parenthesis after the tag. Separate each set of attributes by comma.

JADE
div  
    h1(class="red", id="firstHeading") Lets make some Attributes
p  
    a(href="http://www.google.com") Link to Google!
HTML
<div>  
    <h1 class="red" id="firstHeading">Lets make some Attributes</h1>
    <p><a href="http://www.google.com">Link to Google!</a></p>
</div>

IDs and Classes

There's a shortcut for indicating classes and id's. You can of course go the attribute route and put them in parenthesis with the other attributes or you can just place it after the tag like this:

JADE
p#first This is how you create an ID  
p.second This is how you make a Class
HTML
<p id="first">This is how you create an ID</p>  
<p class="second">This is how you make a Class</p>

Place a hash(#) after the tag to create an ID. Place a decimal(.) after the tag to create a class. It's as simple as that.

 

That's it for Part 1, follow me on Twitter or subscribe to the RSS Feed to be notified when Part 2 is posted.

comments powered by Disqus