Awesome Open Source
Awesome Open Source


Bootstrap 3 samples rendered using Pug - former Jade - , NodeJS, Express and Grunt


Install dependencies

  • install NodeJS (globally)
  • install NPM (globally)
  • install Grunt (globally)

Download the code without Git

kudos to onlinemad, he wrote a script downloading the code and generating a package.json file

The following script will

  1. create a directory named "bootstrap3-jade-node-express-grunt"
  2. create a file named “init.js" containing this script
  3. install the depedencies: adm-zip, request, prompt and js-beautify
  4. run the following commands

mkdir bootstrap3-jade-node-express-grunt

cd bootstrap3-jade-node-express-grunt

curl > init.js

npm install adm-zip

npm install request

npm install prompt

npm install js-beautify

node init.js

  1. hit Enter on your keyboard :-)

  2. Fill the project information: Project name, description, version number (N.N.N), Author, Reposition (url),

    • the project name will be the directory used to store the [bootstrap3-jade-node-express-grunt] source code
  3. wait a few seconds, the download occurs in background and you don't have any visual feedback

  4. go to "How to run the app" chapter (hereafter)

Download the code using Git

How to run the app

  • Install the module using npm install command (locally, a node_modules directory will be created)
  • Start the server using the grunt command
  • open http://localhost:3001/ home page


  • start the server using grunt

  • click on the links leading you to the Bootstrap templates translated into Jade

  • Use the *.jade files into your projects !

  • how did we convert the html into jade

    • We use html2jade to translate automatically the html into a jade file
    • Remove the characters as Jade complains as it believes it has to interpret the code =================================================
    • replace inside the jade file the path to the JS and CSS files from [Bootstrap Twitter]: ../.. with the parameter #{pathToAssets}
    • change the link to the custom made CSS made for each template stored under the bootstrap-3.0.0/examples/ directory : #{pathToSelectedTemplateWithinBootstrap}

Examples, how to open a bootstrap page

Available templates (sorted)

Release History



  • Ilya Sheershoff has migrated the code due to a change in the name of "Jade" to "Pug" due to trademarks issues






  • Correct the chapter "Download the code without Git"






  • Bootstrap 3 is just released, it is time to convert HTML into Jade templates


Copyright (c) 2013 ALT-F1, We believe in the projects we work on™

Licensed under the MIT license.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
html (11,148
node-js (172
pug (97
bootstrap3 (56
express-js (31
jade (24