From eee8ff38858d8a73e688b3974f5b7b8335826e87 Mon Sep 17 00:00:00 2001 From: Abdelkrim Boujraf Date: Sun, 25 Aug 2013 21:39:54 +0200 Subject: [PATCH] add theme, sticky-footer, sticky-footer-navbar, signin, offcanvas --- README.md | 45 ++- app/views/bootstrap3-templates/carousel.jade | 2 +- .../jumbotron-narrow.jade | 2 +- app/views/bootstrap3-templates/jumbotron.jade | 2 +- .../bootstrap3-templates/justified-nav.jade | 2 +- .../navbar-fixed-top.jade | 2 +- .../navbar-static-top.jade | 2 +- app/views/bootstrap3-templates/navbar.jade | 2 +- .../bootstrap3-templates/non-responsive.jade | 2 +- app/views/bootstrap3-templates/offcanvas.jade | 127 +++++++ app/views/bootstrap3-templates/signin.jade | 32 ++ .../starter-template.jade | 2 +- .../sticky-footer-navbar.jade | 85 +++++ .../bootstrap3-templates/sticky-footer.jade | 42 +++ app/views/bootstrap3-templates/theme.jade | 325 ++++++++++++++++++ app/views/index.jade | 49 ++- app/views/layout.jade | 35 +- 17 files changed, 696 insertions(+), 62 deletions(-) create mode 100644 app/views/bootstrap3-templates/offcanvas.jade create mode 100644 app/views/bootstrap3-templates/signin.jade create mode 100644 app/views/bootstrap3-templates/sticky-footer-navbar.jade create mode 100644 app/views/bootstrap3-templates/sticky-footer.jade create mode 100644 app/views/bootstrap3-templates/theme.jade diff --git a/README.md b/README.md index e3b4471..718d75d 100644 --- a/README.md +++ b/README.md @@ -19,10 +19,10 @@ bootstrap3-jade-node ## Documentation + start the server -+ click on the links leading you to the [Bootstrap Twitter] templates translated into Jade ++ click on the links leading you to the [Twitter Bootstrap] templates translated into Jade + Use the *.jade files into your projects ! -+ html vs. jade conversion ++ 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}` @@ -36,21 +36,21 @@ bootstrap3-jade-node ## Contributing Feel free to help me convert all the templates: -+ [X] [carousel](http://twbs.github.io/bootstrap/examples/carousel/) -+ [X] [grid](http://twbs.github.io/bootstrap/examples/grid/) -+ [X] [jumbotron](http://twbs.github.io/bootstrap/examples/jumbotron/) -+ [X] [jumbotron-narrow](http://twbs.github.io/bootstrap/examples/jumbotron-narrow/) -+ [X] [justified-nav](http://twbs.github.io/bootstrap/examples/justified-nav/) -+ [X] [navbar](http://twbs.github.io/bootstrap/examples/navbar/) -+ [X] [navbar-fixed-top](http://twbs.github.io/bootstrap/examples/navbar-fixed-top/) -+ [X] [navbar-static-top](http://twbs.github.io/bootstrap/examples/navbar-static-top/) -+ [X] [non-responsive](http://twbs.github.io/bootstrap/examples/non-responsive/) -+ [ ] [offcanvas](http://twbs.github.io/bootstrap/examples/offcanvas/) -+ [ ] [signin](http://twbs.github.io/bootstrap/examples/signin/) -+ [X] [starter-template](http://twbs.github.io/bootstrap/examples/starter-template/) -+ [ ] [sticky-footer](http://twbs.github.io/bootstrap/examples/sticky-footer/) -+ [ ] [sticky-footer-navbar](http://twbs.github.io/bootstrap/examples/sticky-footer-navbar/) -+ [ ] [theme](http://twbs.github.io/bootstrap/examples/theme/) +- [X] [carousel](http://twbs.github.io/bootstrap/examples/carousel/) +- [X] [grid](http://twbs.github.io/bootstrap/examples/grid/) +- [X] [jumbotron](http://twbs.github.io/bootstrap/examples/jumbotron/) +- [X] [jumbotron-narrow](http://twbs.github.io/bootstrap/examples/jumbotron-narrow/) +- [X] [justified-nav](http://twbs.github.io/bootstrap/examples/justified-nav/) +- [X] [navbar](http://twbs.github.io/bootstrap/examples/navbar/) +- [X] [navbar-fixed-top](http://twbs.github.io/bootstrap/examples/navbar-fixed-top/) +- [X] [navbar-static-top](http://twbs.github.io/bootstrap/examples/navbar-static-top/) +- [X] [non-responsive](http://twbs.github.io/bootstrap/examples/non-responsive/) +- [X] [offcanvas](http://twbs.github.io/bootstrap/examples/offcanvas/) +- [X] [signin](http://twbs.github.io/bootstrap/examples/signin/) +- [X] [starter-template](http://twbs.github.io/bootstrap/examples/starter-template/) +- [X] [sticky-footer](http://twbs.github.io/bootstrap/examples/sticky-footer/) +- [X] [sticky-footer-navbar](http://twbs.github.io/bootstrap/examples/sticky-footer-navbar/) +- [X] [theme](http://twbs.github.io/bootstrap/examples/theme/) ## Release History @@ -58,6 +58,15 @@ TODOs + add front end test against html pages +v2013-08-25 + ++ Convert [offcanvas.html](http://twbs.github.io/bootstrap/examples/offcanvas/) template into [offcanvas.jade](https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt/tree/master/app/views/bootstrap3-templates) ++ Convert [signin.html](http://twbs.github.io/bootstrap/examples/signin/) template into [signin.jade](https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt/tree/master/app/views/bootstrap3-templates) ++ Convert [starter-template.html](http://twbs.github.io/bootstrap/examples/starter-template/) template into [starter-template.jade](https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt/tree/master/app/views/bootstrap3-templates) ++ Convert [sticky-footer.html](http://twbs.github.io/bootstrap/examples/sticky-footer/) template into [sticky-footer.jade](https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt/tree/master/app/views/bootstrap3-templates) ++ Convert [sticky-footer-navbar.html](http://twbs.github.io/bootstrap/examples/sticky-footer-navbar/) template into [sticky-footer-navbar.jade](https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt/tree/master/app/views/bootstrap3-templates) ++ Convert [theme.html](http://twbs.github.io/bootstrap/examples/theme/) template into [theme.jade](https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt/tree/master/app/views/bootstrap3-templates) + v2013-08-24 + Convert [grid.html](http://twbs.github.io/bootstrap/examples/grid/) template into [grid.jade](https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt/tree/master/app/views/bootstrap3-templates) @@ -77,7 +86,7 @@ v2013-08-22 v2013-08-21 -+ [Twitter Bootstrap] 3 is just released, it is time to convert HTML into Jade templates +- [Twitter Bootstrap] 3 is just released, it is time to convert HTML into Jade templates + Convert [starter-template.html](http://twbs.github.io/bootstrap/examples/starter-template/) template into [starter-template.jade](https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt/tree/master/app/views/bootstrap3-templates) ## License diff --git a/app/views/bootstrap3-templates/carousel.jade b/app/views/bootstrap3-templates/carousel.jade index af4cbd3..f60e42e 100644 --- a/app/views/bootstrap3-templates/carousel.jade +++ b/app/views/bootstrap3-templates/carousel.jade @@ -1,4 +1,4 @@ -!!! 5 +doctype 5 html(lang='en') head meta(charset='utf-8') diff --git a/app/views/bootstrap3-templates/jumbotron-narrow.jade b/app/views/bootstrap3-templates/jumbotron-narrow.jade index 4718076..c49eb01 100644 --- a/app/views/bootstrap3-templates/jumbotron-narrow.jade +++ b/app/views/bootstrap3-templates/jumbotron-narrow.jade @@ -1,4 +1,4 @@ -!!! 5 +doctype 5 html(lang='en') head meta(charset='utf-8') diff --git a/app/views/bootstrap3-templates/jumbotron.jade b/app/views/bootstrap3-templates/jumbotron.jade index e6d5793..81cc960 100644 --- a/app/views/bootstrap3-templates/jumbotron.jade +++ b/app/views/bootstrap3-templates/jumbotron.jade @@ -1,4 +1,4 @@ -!!! 5 +doctype 5 html(lang='en') head meta(charset='utf-8') diff --git a/app/views/bootstrap3-templates/justified-nav.jade b/app/views/bootstrap3-templates/justified-nav.jade index 6f7b63c..a8a9684 100644 --- a/app/views/bootstrap3-templates/justified-nav.jade +++ b/app/views/bootstrap3-templates/justified-nav.jade @@ -1,4 +1,4 @@ -!!! 5 +doctype 5 html(lang='en') head meta(charset='utf-8') diff --git a/app/views/bootstrap3-templates/navbar-fixed-top.jade b/app/views/bootstrap3-templates/navbar-fixed-top.jade index eda29fd..004e810 100644 --- a/app/views/bootstrap3-templates/navbar-fixed-top.jade +++ b/app/views/bootstrap3-templates/navbar-fixed-top.jade @@ -1,4 +1,4 @@ -!!! 5 +doctype 5 html(lang='en') head meta(charset='utf-8') diff --git a/app/views/bootstrap3-templates/navbar-static-top.jade b/app/views/bootstrap3-templates/navbar-static-top.jade index 0160afe..18fbe2a 100644 --- a/app/views/bootstrap3-templates/navbar-static-top.jade +++ b/app/views/bootstrap3-templates/navbar-static-top.jade @@ -1,4 +1,4 @@ -!!! 5 +doctype 5 html(lang='en') head meta(charset='utf-8') diff --git a/app/views/bootstrap3-templates/navbar.jade b/app/views/bootstrap3-templates/navbar.jade index ee509bd..89190af 100644 --- a/app/views/bootstrap3-templates/navbar.jade +++ b/app/views/bootstrap3-templates/navbar.jade @@ -1,4 +1,4 @@ -!!! 5 +doctype 5 html(lang='en') head meta(charset='utf-8') diff --git a/app/views/bootstrap3-templates/non-responsive.jade b/app/views/bootstrap3-templates/non-responsive.jade index 88633a4..6acf744 100644 --- a/app/views/bootstrap3-templates/non-responsive.jade +++ b/app/views/bootstrap3-templates/non-responsive.jade @@ -1,4 +1,4 @@ -!!! 5 +doctype 5 html(lang='en') head meta(charset='utf-8') diff --git a/app/views/bootstrap3-templates/offcanvas.jade b/app/views/bootstrap3-templates/offcanvas.jade new file mode 100644 index 0000000..b9c6570 --- /dev/null +++ b/app/views/bootstrap3-templates/offcanvas.jade @@ -0,0 +1,127 @@ +doctype 5 +html(lang='en') + head + meta(charset='utf-8') + meta(name='viewport', content='width=device-width, initial-scale=1.0') + meta(name='description', content='') + meta(name='author', content='') + link(rel='shortcut icon', href='#{pathToAssets}/assets/ico/favicon.png') + title Off Canvas Template for Bootstrap + // Bootstrap core CSS + link(href='#{pathToAssets}/dist/css/bootstrap.min.css', rel='stylesheet') + // Custom styles for this template + link(href='#{pathToSelectedTemplateWithinBootstrap}/offcanvas.css', rel='stylesheet') + // HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries + //if lt IE 9 + script(src='#{pathToAssets}/assets/js/html5shiv.js') + script(src='#{pathToAssets}/assets/js/respond.min.js') + body + .navbar.navbar-fixed-top.navbar-inverse(role='navigation') + .container + .navbar-header + button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse') + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Project name + .collapse.navbar-collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + // /.nav-collapse + // /.container + // /.navbar + .container + .row.row-offcanvas.row-offcanvas-right + .col-xs-12.col-sm-9 + p.pull-right.visible-xs + button.btn.btn-primary.btn-xs(type='button', data-toggle='offcanvas') Toggle nav + .jumbotron + h1 Hello, world! + p + | This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action. + .row + .col-6.col-sm-6.col-lg-4 + h2 Heading + p + | Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. + p + a.btn.btn-default(href='#') View details » + // /span + .col-6.col-sm-6.col-lg-4 + h2 Heading + p + | Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. + p + a.btn.btn-default(href='#') View details » + // /span + .col-6.col-sm-6.col-lg-4 + h2 Heading + p + | Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. + p + a.btn.btn-default(href='#') View details » + // /span + .col-6.col-sm-6.col-lg-4 + h2 Heading + p + | Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. + p + a.btn.btn-default(href='#') View details » + // /span + .col-6.col-sm-6.col-lg-4 + h2 Heading + p + | Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. + p + a.btn.btn-default(href='#') View details » + // /span + .col-6.col-sm-6.col-lg-4 + h2 Heading + p + | Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. + p + a.btn.btn-default(href='#') View details » + // /span + // /row + // /span + #sidebar.col-xs-6.col-sm-3.sidebar-offcanvas(role='navigation') + .well.sidebar-nav + ul.nav + li Sidebar + li.active + a(href='#') Link + li + a(href='#') Link + li + a(href='#') Link + li Sidebar + li + a(href='#') Link + li + a(href='#') Link + li + a(href='#') Link + li Sidebar + li + a(href='#') Link + li + a(href='#') Link + // /.well + // /span + // /row + hr + footer + p © Company 2013 + // /.container + // + Bootstrap core JavaScript + // ================================================== + // Placed at the end of the document so the pages load faster + script(src='#{pathToAssets}/assets/js/jquery.js') + script(src='#{pathToAssets}/dist/js/bootstrap.min.js') + script(src='#{pathToSelectedTemplateWithinBootstrap}/offcanvas.js') diff --git a/app/views/bootstrap3-templates/signin.jade b/app/views/bootstrap3-templates/signin.jade new file mode 100644 index 0000000..91d72bb --- /dev/null +++ b/app/views/bootstrap3-templates/signin.jade @@ -0,0 +1,32 @@ +doctype 5 +html(lang='en') + head + meta(charset='utf-8') + meta(name='viewport', content='width=device-width, initial-scale=1.0') + meta(name='description', content='') + meta(name='author', content='') + link(rel='shortcut icon', href='#{pathToAssets}/assets/ico/favicon.png') + title Signin Template for Bootstrap + // Bootstrap core CSS + link(href='#{pathToAssets}/dist/css/bootstrap.css', rel='stylesheet') + // Custom styles for this template + link(href='#{pathToSelectedTemplateWithinBootstrap}/signin.css', rel='stylesheet') + // HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries + //if lt IE 9 + script(src='#{pathToAssets}/assets/js/html5shiv.js') + script(src='#{pathToAssets}/assets/js/respond.min.js') + body + .container + form.form-signin + h2.form-signin-heading Please sign in + input.form-control(type='text', placeholder='Email address', autofocus='autofocus') + input.form-control(type='password', placeholder='Password') + label.checkbox + input(type='checkbox', value='remember-me') + | Remember me + button.btn.btn-lg.btn-primary.btn-block(type='submit') Sign in + // /container + // + Bootstrap core JavaScript + //================================================== + // Placed at the end of the document so the pages load faster diff --git a/app/views/bootstrap3-templates/starter-template.jade b/app/views/bootstrap3-templates/starter-template.jade index e1c738e..fc5eab9 100644 --- a/app/views/bootstrap3-templates/starter-template.jade +++ b/app/views/bootstrap3-templates/starter-template.jade @@ -1,4 +1,4 @@ -!!! 5 +doctype 5 html(lang='en') head meta(charset='utf-8') diff --git a/app/views/bootstrap3-templates/sticky-footer-navbar.jade b/app/views/bootstrap3-templates/sticky-footer-navbar.jade new file mode 100644 index 0000000..ac3e50f --- /dev/null +++ b/app/views/bootstrap3-templates/sticky-footer-navbar.jade @@ -0,0 +1,85 @@ +doctype 5 +html(lang='en') + head + meta(charset='utf-8') + meta(name='viewport', content='width=device-width, initial-scale=1.0') + meta(name='description', content='') + meta(name='author', content='') + link(rel='shortcut icon', href='#{pathToAssets}/assets/ico/favicon.png') + title Sticky Footer Navbar Template for Bootstrap + // Bootstrap core CSS + link(href='#{pathToAssets}/dist/css/bootstrap.css', rel='stylesheet') + // Custom styles for this template + link(href='#{pathToSelectedTemplateWithinBootstrap}/sticky-footer-navbar.css', rel='stylesheet') + // HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries + //if lt IE 9 + script(src='#{pathToAssets}/assets/js/html5shiv.js') + script(src='#{pathToAssets}/assets/js/respond.min.js') + body + // Wrap all page content here + #wrap + // Fixed navbar + .navbar.navbar-default.navbar-fixed-top + .container + .navbar-header + button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse') + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Project name + .collapse.navbar-collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + li.dropdown + a.dropdown-toggle(href='#', data-toggle='dropdown') + | Dropdown + b.caret + ul.dropdown-menu + li + a(href='#') Action + li + a(href='#') Another action + li + a(href='#') Something else here + li.divider + li.dropdown-header Nav header + li + a(href='#') Separated link + li + a(href='#') One more separated link + // /.nav-collapse + // Begin page content + .container + .page-header + h1 Sticky footer with fixed navbar + p.lead + | Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within + code #wrap + | with + code padding-top: 60px; + | on the + code .container + | . + p + | Back to + a(href='/template/sticky-footer') the default sticky footer + | minus the navbar. + #footer + .container + p.text-muted.credit + | Example courtesy + a(href='http://martinbean.co.uk') Martin Bean + | and + a(href='http://ryanfait.com/sticky-footer/') Ryan Fait + | . + // + Bootstrap core JavaScript + //================================================== + // Placed at the end of the document so the pages load faster + script(src='#{pathToAssets}/assets/js/jquery.js') + script(src='#{pathToAssets}/dist/js/bootstrap.min.js') diff --git a/app/views/bootstrap3-templates/sticky-footer.jade b/app/views/bootstrap3-templates/sticky-footer.jade new file mode 100644 index 0000000..2a9e392 --- /dev/null +++ b/app/views/bootstrap3-templates/sticky-footer.jade @@ -0,0 +1,42 @@ +doctype 5 +html(lang='en') + head + meta(charset='utf-8') + meta(name='viewport', content='width=device-width, initial-scale=1.0') + meta(name='description', content='') + meta(name='author', content='') + link(rel='shortcut icon', href='#{pathToAssets}/assets/ico/favicon.png') + title Sticky Footer Template for Bootstrap + // Bootstrap core CSS + link(href='#{pathToAssets}/dist/css/bootstrap.css', rel='stylesheet') + // Custom styles for this template + link(href='#{pathToSelectedTemplateWithinBootstrap}/sticky-footer.css', rel='stylesheet') + // HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries + //if lt IE 9 + script(src='#{pathToAssets}/assets/js/html5shiv.js') + script(src='#{pathToAssets}/assets/js/respond.min.js') + body + // Wrap all page content here + #wrap + // Begin page content + .container + .page-header + h1 Sticky footer + p.lead + | Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. + p + | Use + a(href='/template/sticky-footer-navbar') the sticky footer with a fixed navbar + | if need be, too. + #footer + .container + p.text-muted.credit + | Example courtesy + a(href='http://martinbean.co.uk') Martin Bean + | and + a(href='http://ryanfait.com/sticky-footer/') Ryan Fait + | . + // + Bootstrap core JavaScript + // ================================================== + // Placed at the end of the document so the pages load faster diff --git a/app/views/bootstrap3-templates/theme.jade b/app/views/bootstrap3-templates/theme.jade new file mode 100644 index 0000000..4eb3732 --- /dev/null +++ b/app/views/bootstrap3-templates/theme.jade @@ -0,0 +1,325 @@ +doctype 5 +html(lang='en') + head + meta(charset='utf-8') + meta(name='viewport', content='width=device-width, initial-scale=1.0') + meta(name='description', content='') + meta(name='author', content='') + link(rel='shortcut icon', href='#{pathToAssets}/assets/ico/favicon.png') + title Theme Template for Bootstrap + // Bootstrap core CSS + link(href='#{pathToAssets}/dist/css/bootstrap.css', rel='stylesheet') + // Bootstrap theme + link(href='#{pathToAssets}/dist/css/bootstrap-theme.min.css', rel='stylesheet') + // Custom styles for this template + link(href='#{pathToSelectedTemplateWithinBootstrap}/theme.css', rel='stylesheet') + // HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries + //if lt IE 9 + script(src='#{pathToAssets}/assets/js/html5shiv.js') + script(src='#{pathToAssets}/assets/js/respond.min.js') + body + // Fixed navbar + .navbar.navbar-inverse.navbar-fixed-top + .container + .navbar-header + button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse') + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Bootstrap theme + .navbar-collapse.collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + li.dropdown + a.dropdown-toggle(href='#', data-toggle='dropdown') + | Dropdown + b.caret + ul.dropdown-menu + li + a(href='#') Action + li + a(href='#') Another action + li + a(href='#') Something else here + li.divider + li.dropdown-header Nav header + li + a(href='#') Separated link + li + a(href='#') One more separated link + // /.nav-collapse + .container.theme-showcase + // Main jumbotron for a primary marketing message or call to action + .jumbotron + h1 Hello, world! + p + | This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. + p + a.btn.btn-primary.btn-lg Learn more » + .page-header + h1 Buttons + p + button.btn.btn-lg.btn-default(type='button') Default + button.btn.btn-lg.btn-primary(type='button') Primary + button.btn.btn-lg.btn-success(type='button') Success + button.btn.btn-lg.btn-info(type='button') Info + button.btn.btn-lg.btn-warning(type='button') Warning + button.btn.btn-lg.btn-danger(type='button') Danger + button.btn.btn-lg.btn-link(type='button') Link + p + button.btn.btn-default(type='button') Default + button.btn.btn-primary(type='button') Primary + button.btn.btn-success(type='button') Success + button.btn.btn-info(type='button') Info + button.btn.btn-warning(type='button') Warning + button.btn.btn-danger(type='button') Danger + button.btn.btn-link(type='button') Link + p + button.btn.btn-sm.btn-default(type='button') Default + button.btn.btn-sm.btn-primary(type='button') Primary + button.btn.btn-sm.btn-success(type='button') Success + button.btn.btn-sm.btn-info(type='button') Info + button.btn.btn-sm.btn-warning(type='button') Warning + button.btn.btn-sm.btn-danger(type='button') Danger + button.btn.btn-sm.btn-link(type='button') Link + p + button.btn.btn-xs.btn-default(type='button') Default + button.btn.btn-xs.btn-primary(type='button') Primary + button.btn.btn-xs.btn-success(type='button') Success + button.btn.btn-xs.btn-info(type='button') Info + button.btn.btn-xs.btn-warning(type='button') Warning + button.btn.btn-xs.btn-danger(type='button') Danger + button.btn.btn-xs.btn-link(type='button') Link + .page-header + h1 Thumbnails + img.img-thumbnail(data-src='holder.js/200x200', src='data:image/png;base64,', alt='A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera') + .page-header + h1 Dropdown menus + .dropdown.theme-dropdown.clearfix + a#dropdownMenu1.sr-only.dropdown-toggle(href='#', role='button', data-toggle='dropdown') + | Dropdown + b.caret + ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu1') + li(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Action + li(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Another action + li(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Something else here + li.divider(role='presentation') + li(role='presentation') + a(role='menuitem', tabindex='-1', href='#') Separated link + .page-header + h1 Navbars + .navbar.navbar-default + .container + .navbar-header + button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse') + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Project name + .navbar-collapse.collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + li.dropdown + a.dropdown-toggle(href='#', data-toggle='dropdown') + | Dropdown + b.caret + ul.dropdown-menu + li + a(href='#') Action + li + a(href='#') Another action + li + a(href='#') Something else here + li.divider + li.dropdown-header Nav header + li + a(href='#') Separated link + li + a(href='#') One more separated link + ul.nav.navbar-nav.navbar-right + li + a(href='/template/navbar') Default + li + a(href='/template/navbar-static-top') Static top + li.active + a(href='') Fixed top + // /.nav-collapse + .navbar.navbar-inverse + .container + .navbar-header + button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse') + span.icon-bar + span.icon-bar + span.icon-bar + a.navbar-brand(href='#') Project name + .navbar-collapse.collapse + ul.nav.navbar-nav + li.active + a(href='#') Home + li + a(href='#about') About + li + a(href='#contact') Contact + li.dropdown + a.dropdown-toggle(href='#', data-toggle='dropdown') + | Dropdown + b.caret + ul.dropdown-menu + li + a(href='#') Action + li + a(href='#') Another action + li + a(href='#') Something else here + li.divider + li.dropdown-header Nav header + li + a(href='#') Separated link + li + a(href='#') One more separated link + ul.nav.navbar-nav.navbar-right + li + a(href='/template/navbar') Default + li + a(href='/template/navbar-static-top') Static top + li.active + a(href='') Fixed top + // /.nav-collapse + .page-header + h1 Alerts + .alert.alert-success + strong Well done!  + | You successfully read this important alert message. + .alert.alert-info + strong Heads up!  + | This alert needs your attention, but it's not super important. + .alert.alert-warning + strong Warning!  + | Best check yo self, you're not looking too good. + .alert.alert-danger + strong Oh snap!  + | Change a few things up and try submitting again. + .page-header + h1 Progress bars + .progress + .progress-bar(role='progressbar', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100', style='width: 60%;') + span.sr-only 60% Complete + .progress + .progress-bar.progress-bar-success(role='progressbar', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100', style='width: 40%;') + span.sr-only 40% Complete (success) + .progress + .progress-bar.progress-bar-info(role='progressbar', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100', style='width: 20%;') + span.sr-only 20% Complete + .progress + .progress-bar.progress-bar-warning(role='progressbar', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100', style='width: 60%;') + span.sr-only 60% Complete (warning) + .progress + .progress-bar.progress-bar-danger(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100', style='width: 80%;') + span.sr-only 80% Complete (danger) + .progress + .progress-bar.progress-bar-success(style='width: 35%;') + span.sr-only 35% Complete (success) + .progress-bar.progress-bar-warning(style='width: 20%;') + span.sr-only 20% Complete (warning) + .progress-bar.progress-bar-danger(style='width: 10%;') + span.sr-only 10% Complete (danger) + .page-header + h1 List groups + .row + .col-sm-4 + ul.list-group + li.list-group-item Cras justo odio + li.list-group-item Dapibus ac facilisis in + li.list-group-item Morbi leo risus + li.list-group-item Porta ac consectetur ac + li.list-group-item Vestibulum at eros + // /.col-sm-4 + .col-sm-4 + .list-group + a.list-group-item.active(href='#') + | Cras justo odio + a.list-group-item(href='#') Dapibus ac facilisis in + a.list-group-item(href='#') Morbi leo risus + a.list-group-item(href='#') Porta ac consectetur ac + a.list-group-item(href='#') Vestibulum at eros + // /.col-sm-4 + .col-sm-4 + .list-group + a.list-group-item.active(href='#') + h4.list-group-item-heading List group item heading + p.list-group-item-text + | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + a.list-group-item(href='#') + h4.list-group-item-heading List group item heading + p.list-group-item-text + | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + a.list-group-item(href='#') + h4.list-group-item-heading List group item heading + p.list-group-item-text + | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. + // /.col-sm-4 + .page-header + h1 Panels + .row + .col-sm-4 + .panel.panel-default + .panel-heading + h3.panel-title Panel title + .panel-body + | Panel content + .panel.panel-primary + .panel-heading + h3.panel-title Panel title + .panel-body + | Panel content + // /.col-sm-4 + .col-sm-4 + .panel.panel-success + .panel-heading + h3.panel-title Panel title + .panel-body + | Panel content + .panel.panel-info + .panel-heading + h3.panel-title Panel title + .panel-body + | Panel content + // /.col-sm-4 + .col-sm-4 + .panel.panel-warning + .panel-heading + h3.panel-title Panel title + .panel-body + | Panel content + .panel.panel-danger + .panel-heading + h3.panel-title Panel title + .panel-body + | Panel content + // /.col-sm-4 + .page-header + h1 Wells + .well + p + | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. + // /container + // + Bootstrap core JavaScript + //================================================== + // Placed at the end of the document so the pages load faster + script(src='#{pathToAssets}/assets/js/jquery.js') + script(src='#{pathToAssets}/dist/js/bootstrap.min.js') + script(src='#{pathToAssets}/assets/js/holder.js') diff --git a/app/views/index.jade b/app/views/index.jade index 59f7703..f7ab0b4 100644 --- a/app/views/index.jade +++ b/app/views/index.jade @@ -3,35 +3,46 @@ extends layout mixin displayLink(templateName, isImplemented) + tr -if (isImplemented) { - li + th a(href='/template/#{templateName}')= templateName + th + a(href='http://twbs.github.io/bootstrap/examples/#{templateName}')= templateName -} - else { - li + th | #{templateName} b |  - not implemented yet + th + a(href='http://twbs.github.io/bootstrap/examples/#{templateName}')= templateName -} block body + p.lead - The list will grow as the templates will be implemented - ul - +displayLink('starter-template', true) - +displayLink('carousel', true) - +displayLink('grid', true) - +displayLink('jumbotron', true) - +displayLink('jumbotron-narrow', true) - +displayLink('justified-nav', true) - +displayLink('navbar', true) - +displayLink('navbar-fixed-top', true) - +displayLink('navbar-static-top', true) - +displayLink('non-responsive', true) + | All bootstrap 3 templates have been converted into Jade templates; enjoy ! - +displayLink('offcanvas', false) - +displayLink('signin', false) - +displayLink('sticky-footer', false) - +displayLink('sticky-footer-navbar', false) - +displayLink('theme', false) \ No newline at end of file + table.table.table-condensed + thead + tr + th Jade version + th HTML version + tbody + +displayLink('starter-template', true) + +displayLink('carousel', true) + +displayLink('grid', true) + +displayLink('jumbotron', true) + +displayLink('jumbotron-narrow', true) + +displayLink('justified-nav', true) + +displayLink('navbar', true) + +displayLink('navbar-fixed-top', true) + +displayLink('navbar-static-top', true) + +displayLink('non-responsive', true) + +displayLink('offcanvas', true) + +displayLink('signin', true) + +displayLink('sticky-footer', true) + +displayLink('sticky-footer-navbar', true) + +displayLink('theme', true) \ No newline at end of file diff --git a/app/views/layout.jade b/app/views/layout.jade index c672434..32e93b2 100644 --- a/app/views/layout.jade +++ b/app/views/layout.jade @@ -1,4 +1,4 @@ -!!! 5 +doctype 5 html(lang='en') head meta(charset='utf-8') @@ -8,18 +8,21 @@ head meta(name='copyright', content='Copyright (c) 2013 ALT-F1, We believe in the projects we work on™') link(rel='shortcut icon', href='/bootstrap-3.0.0/assets/ico/favicon.png') title Starter Template for Bootstrap -// + // Bootstrap core CSS link(href='/bootstrap-3.0.0/dist/css/bootstrap.css', rel='stylesheet') -// + // Custom styles for this template link(href='/bootstrap-3.0.0/examples/starter-template/starter-template.css', rel='stylesheet') -// + // HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -//if lt IE 9 - script(src='/bootstrap-3.0.0/assets/js/html5shiv.js') - script(src='/bootstrap-3.0.0/assets/js/respond.min.js') + //if lt IE 9 + script(src='/bootstrap-3.0.0/assets/js/html5shiv.js') + script(src='/bootstrap-3.0.0/assets/js/respond.min.js') body + a(href='https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt') + img(style='position: absolute; top: 20; right: 0; border: 0;', src='https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png', alt='Fork me on GitHub') + .navbar.navbar-inverse.navbar-fixed-top .container .navbar-header @@ -38,15 +41,15 @@ body a(href='/contact') Contact ALT-F1 // /.nav-collapse -.container - .starter-template - h1 Bootstrap 3 rendered by Jade, Node, Express and Grunt - p.lead - | test each of the  - a(href='http://bit.ly/181yG5r') Bootstrap 3 version of the sample templates  - | by clicking on the links below - .bs-example - block body + .container + .starter-template + h1 Bootstrap 3 rendered by Jade, Node, Express and Grunt + p.lead + | test each of the  + a(href='http://bit.ly/181yG5r') Bootstrap 3 version of the sample templates  + | by clicking on the links below + .bs-example + block body // /.container //