Add sticky footer

public/css/styles.less

@@ -3,10 +3,31 @@
 // Scaffolding
 // -------------------------
 
+html, body {
+  height: 100%;
+}
+
 body {
   padding-top: 70px;
 }
 
+#wrap {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  /* Negative indent footer by its height */
+  margin: 0 auto -150px;
+  /* Pad bottom by footer height */
+  padding: 0 0 150px;
+}
+
+#footer {
+  height: 150px;
+  padding-top: 35px;
+  background-color: @navbar-default-bg;
+  border-top: 1px solid @navbar-default-border;
+}
+
 // Brand Colors
 // -------------------------
 
@@ -17,7 +38,6 @@ body {
 @brand-info: #5bc0dd;
 
 
-
 // Navbar
 // -------------------------
 
@@ -132,6 +152,7 @@ body {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
 }
 
+// Misc
 .navbar-nav img {
   width: 30px;
   height: 30px;
@@ -150,3 +171,5 @@ body {
   margin-bottom: 12px;
   padding-top: 0;
 }
+
+

views/layout.jade

@@ -16,43 +16,60 @@ html
 
     script(src='/js/lib/jquery.js')
     script(src='/js/lib/bootstrap.js')
+    script(src='/js/lib/flatui-radio.js')
     script(src='/js/main.js')
   body
-    .navbar.navbar-default.navbar-fixed-top
+    #wrap
+      .navbar.navbar-default.navbar-fixed-top
+        .container
+          .navbar-header
+            button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
+              span.sr-only Toggle navigation
+              span.icon-bar
+              span.icon-bar
+              span.icon-bar
+            a.navbar-brand(href='/') Project name
+          .collapse.navbar-collapse
+            ul.nav.navbar-nav
+              li(class=title=='Home'?'active':undefined)
+                a(href='/') Home
+              li(class=title=='API Browser'?'active':undefined)
+                a(href='/api') API Browser
+              li(class=title=='Contact'?'active':undefined)
+                a(href='/contact') Contact
+            ul.nav.navbar-nav.navbar-right
+              if !user
+                li(class=title=='Login'?'active':undefined)
+                  a(href='/login') Login
+                li(class=title=='Create Account'?'active':undefined)
+                  a(href='/signup') Create Account
+              else
+                li.dropdown(class=title=='Account Management'?'active':undefined)
+                  a.dropdown-toggle(href='#', data-toggle='dropdown')
+                    if user.profile.picture
+                      img(src='#{user.profile.picture}')
+                    | #{user.profile.name || user.id} 
+                    i.caret
+                  ul.dropdown-menu
+                    li: a(href='/account') My Account
+                    li.divider
+                    li: a(href='/logout') Logout
       .container
-        .navbar-header
+        block content
-          button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
+    #footer
-            span.sr-only Toggle navigation
+      .container.text-center
-            span.icon-bar
+        div
-            span.icon-bar
+          | © 2014 Company, Inc.
-            span.icon-bar
+        div
-          a.navbar-brand(href='/') Project name
+          strong Hackathon Starter
-        .collapse.navbar-collapse
+          |  Project
-          ul.nav.navbar-nav
+          |  ·
-            li(class=title=='Home'?'active':undefined)
+          | Created by
-              a(href='/') Home
+          a(href='http://sahatyalkabov.com')  Sahat Yalkabov
-            li(class=title=='API Browser'?'active':undefined)
+        div
-              a(href='/api') API Browser
+          | Code licensed under
-            li(class=title=='Contact'?'active':undefined)
+          a(href='http://opensource.org/licenses/mit-license.html')  MIT License
-              a(href='/contact') Contact
+        div
-          ul.nav.navbar-nav.navbar-right
+          a(href='https://github.com/sahat/hackathon-starter') GitHub Project
-            if !user
+          |  ·
-              li(class=title=='Login'?'active':undefined)
+          a(href='https://github.com/sahat/hackathon-starter/issues')  Issues
-                a(href='/login') Login
-              li(class=title=='Create Account'?'active':undefined)
-                a(href='/signup') Create Account
-            else
-              li.dropdown(class=title=='Account Management'?'active':undefined)
-                a.dropdown-toggle(href='#', data-toggle='dropdown')
-                  if user.profile.picture
-                    img(src='#{user.profile.picture}')
-                  | #{user.profile.name || user.id} 
-                  i.caret
-                ul.dropdown-menu
-                  li
-                    a(href='/account') My Account
-                  li.divider
-                  li
-                    a(href='/logout') Logout
-  .container
-    block content