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.

Jade
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
HTML
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
HTML

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
HTML

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
HTML
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.