Go to Top

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 [CodeKit](http://incident57.com/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.

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.

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



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.


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:

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.


About kreativemente

Clemente Gomez is a Freelance Developer specializing in mobile and social as well as the founder of imkreative. In addition to developing, he has a great love for Youtube and video games. When he isn't connected to his phone, he is making people laugh or hanging out with friends.