Node.js(Part-3) Jade + Bootstrap

Moving on with the next part of this series of tutorial, today I will give an introduction about the Jade template engine for Nodejs and Bootstrap tookit provided by twitter. In the PREVIOUS post, I have described about the basic layout of a nodejs application based on express engine and we have till now run a very basic(and mostly useless) server. By the end of this tutorial, we would’ve made a nice looking container that will hold the various parts of our application.

What I have in mind is basically something like following diagram.

This is the most simplistic layout and we will work with it for some time before changing it.

Lets start with Jade first.

Jade :

According to Jade’s github page : Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node.

For an extensive list of jade features, visit the jade github page.

What jade does basically is clean up the HTML content of the page and hence improves the readability.  It provides a lot of functionalities on top of that like ‘partials’ and easily mix javascript and HTML code. We will see how that happens in the course of making the design just described.

So we dont use Jade instead of  plain old HTML. How does that help? Well, it helps people like me who get intimidated easily by all the HTML code they see and who also want to add lots of javascript to it. Plus, as just mentioned, while doing that, the readability of the page is maintained.

For example, if we had a simple username form written in html, it would look something like following.

Now if Jade were used in place of this, the same form would look something like following.

Don’t know about you, but I think the second one looks pretty nice. The trick here is the indentation. All the elements under same indent form similar hierarchy and hence, if you know your indents, you’re good to go. Once you get used to this, things will never be the same(with regard to writing html ofcourse) and the development speed increases manifolds. Also, other developers feel much comfortable to look into your layouts and pages.

That’s the part about jade, now coming to Bootstrap

Twitter Bootstrap

According to bootstrap’s home page : Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.

It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

I, and many like me, consider Twitter Bootstrap as one of the god sent tools for ‘css challenged’ folks. By ‘css challenged’ I mean people of two types.

a) who don’t know/want to learn css

b) who know/can learn css but have no clue how to make an aesthetically good page.

We all know where we belong :P. Anyway, bootstrap is a toolkit that provides a wide range of widgets (almost everything a normal dev would use) with support for all the major browsers. The benefit, as one might have guessed, is that it takes the responsibility of designing good looking widgets from you without leaving you with prehistoric default widgets.

Again, head to bootstrap homepage and feel free to drool over all the freebies that have cut down your work tremendously.

Combining the two utilities just described, we get a compact and easy to read/manage html with all sorts of good looking fancy widgets.

Now lets do something with all that.

So we start by downloading the Twitter Bootstrap and including Jade in our package manager.

Download Twitter Bootstrap form the github repo and put the files in “public/lib/bootstrap” directory in the project root.

In the “package.json” file add the following line “jade”: “latest”.  Typing in  “npm install ” will now install the latest version of jade to the project. If that line was already there, dont add it (duh).

Next, you need to rig up your code to use the bootstrap files. Open up “views/layout.jade” and add the following line

link(rel=’stylesheet’, href=’/lib/bootstrap/bootstrap.min.css’)

Also add a new file in the directory “public/stylesheets/custom.css” to contain all the custom css changes and add the content described in following link

public/stylesheets/custom.css

and include this file in “views/layout.jade”

link(rel=’stylesheet’, href=’/stylesheets/custom.css’)

And by now you should know what the indentations in this file mean. So you know that this line is to be added just below the css already included.

So now the “layout.jade” looks like the following

After this, we need to put the actual content in the page. So open up “views/index.jade” file. Start by adding the following code.

This adds the topbar to the main page. At this point you can save the files, and run the express server and see the topbar…

Now add the following code to the same file, i.e. “views/index.jade”

Thats IT. If everything has gone the way it was supposed to be, you should have a good looking basic layout of the application.

To summarize, what we have done here is

  1. Included Twitter Bootstrap in our application to provide decent looking widgets

  2. Used Jade to build a basic framework and container for our nodejs based blogging application.

  3. Translated the page HERE into Jade. The custom.css has been taken from here.

If you didn’t get the code right, clone the project repository from following link

https://github.com/ric03uec/nodeblox

Checkout the Master branch and got to the tag “tutorial_3” to get the complete working code of this tutorial.

Hope this has gotten you started and worked up. Next we are going to add user login support and store user information using Mongoose wrapper of MongoDb.

Feel free to point out any discrepancies, if any, in this tutorial.

Share Comments
comments powered by Disqus