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.
For an extensive list of jade features, visit the jade github page.
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
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
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
and include this file in “views/layout.jade”
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
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.