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.

Tagged with: , , , , ,
Posted in NodeBlox, Nodejs, Projects, Technical, Tutorials
  • Pingback: Nodejs(Part-4) Bootstrap and Jade | TwentySeven...

  • Anonymous

    Good stuff :)

    • ric03uec

      thanks

  • Maddy

    Decent article, thanks!

  • kevo

    Total Node n00b here and I’ve really found your boilerplate examples quite easy to follow… I think the bootstrap download no longer comes built with a css file? They use .less files? 

    • Divyanshu Das

       ya.. bootstrap.min.css wasnt der…. i copied from the nodeblox…  :P

  • Pingback: 我們結合Twitter Bootstrap與Jade改善feedback web sites美學 « 熙鈞人生

  • http://www.facebook.com/ydeweerdt Yves Deweerdt

    Hi there, 
    Nice tutorial, only 2 remarks…

    - In the jade you need to include somehow the bootstrap.min.js file
    - the span classes on the Page Content and Secondary content divs are span10 and span4, this is too big to fit on 1 row. should be span10 and span2 or something like that.

    • ric03uec

      thanks for pointing out.. will make the required changed and update

  • Me

    I see where you say to see the below code but there is no code being shown.

  • http://twitter.com/rudifa Rudi Farkas

    Your article looks good, thanks.

    The url “http://twitter.github.com/bootstrap/examples/container-app.html” referenced under “Translated the page HERE into Jade.” produces a 404.

  • Tony Brown

    I love Jade

  • majb2008

    I appreciated this article as I learned a lot. Two comments:

    Important: you are using Twitter Bootstrap 2. If you simply download bootstrap you get Bootstrap 3 which means that ‘span’, etc. are removed and the default view is for a mobile device. It took me a while to realise this; I learned a lot as I futitely tried to make things work, but what I learned wasn’t about the tutorial topic eg. using ‘nodemon’ (outstanding tool!), placement of ‘vendor’ libraries, using Jade, etc.

    Suggestion: Cloning the repository is not useful for a tutorial. It teaches the idea but there is no retention. (copy-paste-it works!) doesn’t teach anything except that the author is a competent programmer.

    • ric03uec

      Hi,
      I will update the core libraries(bootstrap, jade, express and node itself) soon. Send me a pull request if you’ve already managed to do the same :)
      Really appreciate the suggestion and I agree that cloning is not particularly useful for a tutorial but the idea here was to have something that actually runs out of box so that its easy for the reader in case he gets stuck anywhere while going through the tutorial. There have been times I’ve personally faced this problem and hence decided to provide a fix in what I have to offer

  • Alexander Shemshurenko

    Hi .
    When i clone boostrap the folder does not look right. It does not have bootstrap.min.css’ file in it. Should i just copy all the files from dist/css to public/lib/boostrap folder?

  • Emma

    Hi, Emmanuel here.

    Your article has been extremely helpful.

    w/o the customer.css, I get a page w/o any formating.

    with the customer.css, I get the following the error below.
    I can’t find this ILLEGAL token.
    Thank you for your time.

    Express

    500 SyntaxError: C:UsersuserDesktopNodejskrslviewslayout.jade:6 4| title= title 5| link(rel=’stylesheet’, href=’/lib/bootstrap/bootstrap.min.css’) > 6| link(rel=’stylesheet’, href=’/stylesheets/custom.css’) 7| script(type=’text/javascript’, src=’/lib/bootstrap/bootstrap.min.js’) 8| body 9| block content Unexpected token ILLEGAL

    4| title= title

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

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

    7| script(type=’text/javascript’, src=’/lib/bootstrap/bootstrap.min.js’)

    8| body

    9| block content

    Unexpected token ILLEGAL

    at Function ()

    at assertExpression (C:UsersuserDesktopNodejskrslnode_modulesjadeliblexer.js:28:3)

    at Object.Lexer.attrs (C:UsersuserDesktopNodejskrslnode_modulesjadeliblexer.js:629:20)

    at Object.Lexer.next (C:UsersuserDesktopNodejskrslnode_modulesjadeliblexer.js:849:15)

    at Object.Lexer.lookahead (C:UsersuserDesktopNodejskrslnode_modulesjadeliblexer.js:111:46)

    at Parser.lookahead (C:UsersuserDesktopNodejskrslnode_modulesjadelibparser.js:111:23)

    at Parser.peek (C:UsersuserDesktopNodejskrslnode_modulesjadelibparser.js:88:17)

    at Parser.tag (C:UsersuserDesktopNodejskrslnode_modulesjadelibparser.js:704:22)

    at Parser.parseTag (C:UsersuserDesktopNodejskrslnode_modulesjadelibparser.js:690:17)

    at Parser.parseExpr (C:UsersuserDesktopNodejskrslnode_modulesjadelibparser.js:199:21)

  • Seth Williams

    Great tutorial! Maybe you can include a screenshot of what the page is supposed to look like? I have the basic page rendered but I don’t think it’s using the CSS because there is no styling. I’m not sure what I’m doing wrong.