bootstrap3-jade-node

Bootstrap 3 samples rendered using Jade, NodeJS, Express and Grunt

bootstrap3-jade-node-express-grunt

• Do you want to accelerate the bootstrapping of your web applications?

• Test it now https://bootstrap3-jade-node-express-grunt.azurewebsites.net/

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 https://gist.github.com/onlinemad/6373852
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 https://gist.github.com/onlinemad/6373852/raw/8439cc03c69cd171dc95a72874130b7f6a2e7c34/init.js > init.js

npm install adm-zip

npm install request

npm install prompt

npm install js-beautify

node init.js

5. hit Enter on your keyboard :-)

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

7. wait a few seconds, the download occurs in background and you don't have any visual feedback

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

Download the code using Git

• git clone https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt.git
• cd bootstrap3-jade-node-express-grunt

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

Documentation

• start the server using grunt

• click on the links leading you to the Twitter 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

• open http://localhost:3001/
• open the Starter template

Available templates

• carousel
• grid
• jumbotron
• jumbotron-narrow
• justified-nav
• navbar
• navbar-fixed-top
• navbar-static-top
• non-responsive
• offcanvas
• signin
• starter-template
• sticky-footer
• sticky-footer-navbar
• theme

Release History

TODOs

• add front end test against html pages

v2014-01-08

• Correct the chapter "Download the code without Git"

v2014-01-07

• Add script written by onlinemad - a simple script to init a project based on bootstrap3-jade-node-express-grunt: https://gist.github.com/onlinemad/6373852
• Petr Volny has made two changes:
  • Jade npm module update
  • Fix deprecated jade doctype 5

v2013-08-25

• Convert offcanvas.html template into offcanvas.jade
• Convert signin.html template into signin.jade
• Convert starter-template.html template into starter-template.jade
• Convert sticky-footer.html template into sticky-footer.jade
• Convert sticky-footer-navbar.html template into sticky-footer-navbar.jade
• Convert theme.html template into theme.jade

v2013-08-24

• Convert grid.html template into grid.jade
• Convert jumbotron.html template into jumbotron.jade
• Convert jumbotron-narrow.html template into jumbotron-narrow.jade
• Convert justified-nav.html template into justified-nav.jade
• Convert justified-nav.html template into justified-nav.jade
• Convert navbar.html template into navbar.jade
• Convert navbar-fixed-top.html template into navbar-fixed-top.jade
• Convert navbar-static-top.html template into navbar-static-top.jade
• Convert non-responsive.html template into non-responsive.jade
• add an issue on the html2jade project as "escaped characters are wrongly translated into html. e.g. < becomes > while it shouldn't be"

v2013-08-22

• Convert carousel.html template into carousel.jade

v2013-08-21

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

• Convert starter-template.html template into starter-template.jade

License

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

Licensed under the MIT license.