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.
html head title HTML from JADE body h1 Here is an H1 Tag
<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.
div p div p
<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.
div p Here is a p tag div p Here goes a second paragraph
<div> <p>Here is a p tag</p> </div> <div> <p>Here goes a second paragraph</p> </div>
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.
div h1(class="red", id="firstHeading") Lets make some Attributes p a(href="http://www.google.com") Link to Google!
<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:
p#first This is how you create an ID p.second This is how you make a Class
<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.