bootstrap3-pug-node

Bootstrap 3 samples rendered using Pug - former 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.githubusercontent.com/onlinemad/6373852/raw/2d660c6e5b8a04325fa41f72aabd8b4b1b1114ee/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 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 (sorted)

• [X] blog
• [X] carousel
• [X] cover
• [X] dashboard
• [X] grid
• [X] jumbotron-narrow
• [X] jumbotron
• [X] justified-nav
• [X] navbar-fixed-top
• [X] navbar-static-top
• [X] navbar
• [X] non-responsive
• [X] offcanvas
• [X] signin
• [X] starter-template
• [X] sticky-footer-navbar
• [X] sticky-footer
• [X] theme

Release History

v2016-11-08

• update dependencies by Frank Lemanschik using greenkeeper

v2016-08-30

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

v2016-03-13

• Agnieszka Gancarczyk has migrated from Express 3.2.6 to 4.8.0

v2016-02-16

• Josh Crunkelton has aligned the check box on the sign in page

v2014-11-13

• Kobi Eisenberg has migrated the code from Bootstrap 3.2.0 to 3.3.1

v2014-10-20

• Matan Eine has migrated the code from Bootstrap 3.0.0 to Bootstrap 3.2.0
  • Add Cover template
  • Add Blog template
  • Add Dashboard template
• Simon has found that the html code was broken in the Bootstrap 3.0.0

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

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