removed navbar. added sticky footer
authorOwen Smith <owen@omsmith.ca>
Sun, 18 Nov 2012 21:51:45 +0000 (16:51 -0500)
committerOwen Smith <owen@omsmith.ca>
Sun, 18 Nov 2012 21:51:45 +0000 (16:51 -0500)
sass/screen.sass
www/assets/css/screen.css
www/index.html

index d5ef09b..fdce137 100644 (file)
@@ -6,3 +6,6 @@
 
 @import compass_twitter_bootstrap_awesome
 @import compass_twitter_bootstrap_responsive
+
+@import compass/layout/sticky-footer
+@include sticky-footer(54px)
index b4badb9..3ca77ea 100644 (file)
@@ -6,4 +6,4 @@ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- */.hidden{display:none;visibility:hidden}.visible-phone{display:none !important}.visible-tablet{display:none !important}.hidden-desktop{display:none !important}@media (max-width: 767px){.visible-phone{display:inherit !important}.hidden-phone{display:none !important}.hidden-desktop{display:inherit !important}.visible-desktop{display:none !important}}@media (min-width: 768px) and (max-width: 979px){.visible-tablet{display:inherit !important}.hidden-tablet{display:none !important}.hidden-desktop{display:inherit !important}.visible-desktop{display:none !important}}@media (max-width: 480px){.nav-collapse{-webkit-transform:translate3d(0, 0, 0)}.page-header h1 small{display:block;line-height:18px}input[type="checkbox"],input[type="radio"]{border:1px solid #ccc}.form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-left:10px;padding-right:10px}.modal{position:absolute;top:10px;left:10px;right:10px;width:auto;margin:0}.modal.fade.in{top:auto}.modal-header .close{padding:10px;margin:-10px}.carousel-caption{position:static}}@media (max-width: 767px){body{padding-left:20px;padding-right:20px}.navbar-fixed-top,.navbar-fixed-bottom{margin-left:-20px;margin-right:-20px}.container-fluid{padding:0}.dl-horizontal dt{float:none;clear:none;width:auto;text-align:left}.dl-horizontal dd{margin-left:0}.container{width:auto}.row-fluid{width:100%}.row,.thumbnails{margin-left:0}[class*="span"],.row-fluid [class*="span"]{float:none;display:block;width:auto;margin-left:0}.input-large,.input-xlarge,.input-xxlarge,input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.input-prepend input,.input-append input,.input-prepend input[class*="span"],.input-append input[class*="span"]{display:inline-block;width:auto}}@media (min-width: 768px) and (max-width: 979px){.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;content:""}.row:after{clear:both}[class*="span"]{float:left;margin-left:20px}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px}.span1{width:42px}.offset1{margin-left:82px}.span2{width:104px}.offset2{margin-left:144px}.span3{width:166px}.offset3{margin-left:206px}.span4{width:228px}.offset4{margin-left:268px}.span5{width:290px}.offset5{margin-left:330px}.span6{width:352px}.offset6{margin-left:392px}.span7{width:414px}.offset7{margin-left:454px}.span8{width:476px}.offset8{margin-left:516px}.span9{width:538px}.offset9{margin-left:578px}.span10{width:600px}.offset10{margin-left:640px}.span11{width:662px}.offset11{margin-left:702px}.span12{width:724px}.offset12{margin-left:764px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.76243%;*margin-left:2.70924%}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span1{width:5.8011%;*width:5.74791%}.row-fluid .span2{width:14.36464%;*width:14.31145%}.row-fluid .span3{width:22.92818%;*width:22.87499%}.row-fluid .span4{width:31.49171%;*width:31.43852%}.row-fluid .span5{width:40.05525%;*width:40.00206%}.row-fluid .span6{width:48.61878%;*width:48.56559%}.row-fluid .span7{width:57.18232%;*width:57.12913%}.row-fluid .span8{width:65.74586%;*width:65.69266%}.row-fluid .span9{width:74.30939%;*width:74.2562%}.row-fluid .span10{width:82.87293%;*width:82.81974%}.row-fluid .span11{width:91.43646%;*width:91.38327%}.row-fluid .span12{width:100.0%;*width:99.94681%}input,textarea,.uneditable-input{margin-left:0}input.span1,textarea.span1,.uneditable-input.span1{width:32px}input.span2,textarea.span2,.uneditable-input.span2{width:94px}input.span3,textarea.span3,.uneditable-input.span3{width:156px}input.span4,textarea.span4,.uneditable-input.span4{width:218px}input.span5,textarea.span5,.uneditable-input.span5{width:280px}input.span6,textarea.span6,.uneditable-input.span6{width:342px}input.span7,textarea.span7,.uneditable-input.span7{width:404px}input.span8,textarea.span8,.uneditable-input.span8{width:466px}input.span9,textarea.span9,.uneditable-input.span9{width:528px}input.span10,textarea.span10,.uneditable-input.span10{width:590px}input.span11,textarea.span11,.uneditable-input.span11{width:652px}input.span12,textarea.span12,.uneditable-input.span12{width:714px}}@media (min-width: 1200px){.row{margin-left:-30px;*zoom:1}.row:before,.row:after{display:table;content:""}.row:after{clear:both}[class*="span"]{float:left;margin-left:30px}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}.span1{width:70px}.offset1{margin-left:130px}.span2{width:170px}.offset2{margin-left:230px}.span3{width:270px}.offset3{margin-left:330px}.span4{width:370px}.offset4{margin-left:430px}.span5{width:470px}.offset5{margin-left:530px}.span6{width:570px}.offset6{margin-left:630px}.span7{width:670px}.offset7{margin-left:730px}.span8{width:770px}.offset8{margin-left:830px}.span9{width:870px}.offset9{margin-left:930px}.span10{width:970px}.offset10{margin-left:1030px}.span11{width:1070px}.offset11{margin-left:1130px}.span12{width:1170px}.offset12{margin-left:1230px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.5641%;*margin-left:2.51091%}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span1{width:5.98291%;*width:5.92971%}.row-fluid .span2{width:14.52991%;*width:14.47672%}.row-fluid .span3{width:23.07692%;*width:23.02373%}.row-fluid .span4{width:31.62393%;*width:31.57074%}.row-fluid .span5{width:40.17094%;*width:40.11775%}.row-fluid .span6{width:48.71795%;*width:48.66476%}.row-fluid .span7{width:57.26496%;*width:57.21177%}.row-fluid .span8{width:65.81197%;*width:65.75877%}.row-fluid .span9{width:74.35897%;*width:74.30578%}.row-fluid .span10{width:82.90598%;*width:82.85279%}.row-fluid .span11{width:91.45299%;*width:91.3998%}.row-fluid .span12{width:100%;*width:99.94681%}input,textarea,.uneditable-input{margin-left:0}input.span1,textarea.span1,.uneditable-input.span1{width:60px}input.span2,textarea.span2,.uneditable-input.span2{width:160px}input.span3,textarea.span3,.uneditable-input.span3{width:260px}input.span4,textarea.span4,.uneditable-input.span4{width:360px}input.span5,textarea.span5,.uneditable-input.span5{width:460px}input.span6,textarea.span6,.uneditable-input.span6{width:560px}input.span7,textarea.span7,.uneditable-input.span7{width:660px}input.span8,textarea.span8,.uneditable-input.span8{width:760px}input.span9,textarea.span9,.uneditable-input.span9{width:860px}input.span10,textarea.span10,.uneditable-input.span10{width:960px}input.span11,textarea.span11,.uneditable-input.span11{width:1060px}input.span12,textarea.span12,.uneditable-input.span12{width:1160px}.thumbnails{margin-left:-30px}.thumbnails>li{margin-left:30px}.row-fluid .thumbnails{margin-left:0}}@media (max-width: 979px){body{padding-top:0}.navbar-fixed-top{position:static;margin-bottom:18px}.navbar-fixed-top .navbar-inner{padding:5px}.navbar .container{width:auto;padding:0}.navbar .brand{padding-left:10px;padding-right:10px;margin:0 0 0 -5px}.nav-collapse{clear:both}.nav-collapse .nav{float:none;margin:0 0 9px}.nav-collapse .nav>li{float:none}.nav-collapse .nav>li>a{margin-bottom:2px}.nav-collapse .nav>.divider-vertical{display:none}.nav-collapse .nav .nav-header{color:#999;text-shadow:none}.nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:6px 15px;font-weight:bold;color:#999;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.nav-collapse .dropdown-menu li+li a{margin-bottom:2px}.nav-collapse .nav>li>a:hover,.nav-collapse .dropdown-menu a:hover{background-color:#222}.nav-collapse.in .btn-group{margin-top:5px;padding:0}.nav-collapse .dropdown-menu{position:static;top:auto;left:auto;float:none;display:block;max-width:none;margin:0 15px;padding:0;background-color:transparent;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none}.nav-collapse .dropdown-menu .divider{display:none}.nav-collapse .navbar-form,.nav-collapse .navbar-search{float:none;padding:9px 15px;margin:9px 0;border-top:1px solid #222;border-bottom:1px solid #222;-webkit-box-shadow:"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)";-moz-box-shadow:"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)";box-shadow:"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"}.navbar .nav-collapse .nav.pull-right{float:none;margin-left:0}.nav-collapse,.nav-collapse.collapse{overflow:hidden;height:0}.navbar .btn-navbar{display:block}.navbar-static .navbar-inner{padding-left:10px;padding-right:10px}}@media (min-width: 980px){.nav-collapse.collapse{height:auto !important;overflow:visible !important}}
+ */.hidden{display:none;visibility:hidden}.visible-phone{display:none !important}.visible-tablet{display:none !important}.hidden-desktop{display:none !important}@media (max-width: 767px){.visible-phone{display:inherit !important}.hidden-phone{display:none !important}.hidden-desktop{display:inherit !important}.visible-desktop{display:none !important}}@media (min-width: 768px) and (max-width: 979px){.visible-tablet{display:inherit !important}.hidden-tablet{display:none !important}.hidden-desktop{display:inherit !important}.visible-desktop{display:none !important}}@media (max-width: 480px){.nav-collapse{-webkit-transform:translate3d(0, 0, 0)}.page-header h1 small{display:block;line-height:18px}input[type="checkbox"],input[type="radio"]{border:1px solid #ccc}.form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-left:10px;padding-right:10px}.modal{position:absolute;top:10px;left:10px;right:10px;width:auto;margin:0}.modal.fade.in{top:auto}.modal-header .close{padding:10px;margin:-10px}.carousel-caption{position:static}}@media (max-width: 767px){body{padding-left:20px;padding-right:20px}.navbar-fixed-top,.navbar-fixed-bottom{margin-left:-20px;margin-right:-20px}.container-fluid{padding:0}.dl-horizontal dt{float:none;clear:none;width:auto;text-align:left}.dl-horizontal dd{margin-left:0}.container{width:auto}.row-fluid{width:100%}.row,.thumbnails{margin-left:0}[class*="span"],.row-fluid [class*="span"]{float:none;display:block;width:auto;margin-left:0}.input-large,.input-xlarge,.input-xxlarge,input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.input-prepend input,.input-append input,.input-prepend input[class*="span"],.input-append input[class*="span"]{display:inline-block;width:auto}}@media (min-width: 768px) and (max-width: 979px){.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;content:""}.row:after{clear:both}[class*="span"]{float:left;margin-left:20px}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px}.span1{width:42px}.offset1{margin-left:82px}.span2{width:104px}.offset2{margin-left:144px}.span3{width:166px}.offset3{margin-left:206px}.span4{width:228px}.offset4{margin-left:268px}.span5{width:290px}.offset5{margin-left:330px}.span6{width:352px}.offset6{margin-left:392px}.span7{width:414px}.offset7{margin-left:454px}.span8{width:476px}.offset8{margin-left:516px}.span9{width:538px}.offset9{margin-left:578px}.span10{width:600px}.offset10{margin-left:640px}.span11{width:662px}.offset11{margin-left:702px}.span12{width:724px}.offset12{margin-left:764px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.76243%;*margin-left:2.70924%}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span1{width:5.8011%;*width:5.74791%}.row-fluid .span2{width:14.36464%;*width:14.31145%}.row-fluid .span3{width:22.92818%;*width:22.87499%}.row-fluid .span4{width:31.49171%;*width:31.43852%}.row-fluid .span5{width:40.05525%;*width:40.00206%}.row-fluid .span6{width:48.61878%;*width:48.56559%}.row-fluid .span7{width:57.18232%;*width:57.12913%}.row-fluid .span8{width:65.74586%;*width:65.69266%}.row-fluid .span9{width:74.30939%;*width:74.2562%}.row-fluid .span10{width:82.87293%;*width:82.81974%}.row-fluid .span11{width:91.43646%;*width:91.38327%}.row-fluid .span12{width:100.0%;*width:99.94681%}input,textarea,.uneditable-input{margin-left:0}input.span1,textarea.span1,.uneditable-input.span1{width:32px}input.span2,textarea.span2,.uneditable-input.span2{width:94px}input.span3,textarea.span3,.uneditable-input.span3{width:156px}input.span4,textarea.span4,.uneditable-input.span4{width:218px}input.span5,textarea.span5,.uneditable-input.span5{width:280px}input.span6,textarea.span6,.uneditable-input.span6{width:342px}input.span7,textarea.span7,.uneditable-input.span7{width:404px}input.span8,textarea.span8,.uneditable-input.span8{width:466px}input.span9,textarea.span9,.uneditable-input.span9{width:528px}input.span10,textarea.span10,.uneditable-input.span10{width:590px}input.span11,textarea.span11,.uneditable-input.span11{width:652px}input.span12,textarea.span12,.uneditable-input.span12{width:714px}}@media (min-width: 1200px){.row{margin-left:-30px;*zoom:1}.row:before,.row:after{display:table;content:""}.row:after{clear:both}[class*="span"]{float:left;margin-left:30px}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}.span1{width:70px}.offset1{margin-left:130px}.span2{width:170px}.offset2{margin-left:230px}.span3{width:270px}.offset3{margin-left:330px}.span4{width:370px}.offset4{margin-left:430px}.span5{width:470px}.offset5{margin-left:530px}.span6{width:570px}.offset6{margin-left:630px}.span7{width:670px}.offset7{margin-left:730px}.span8{width:770px}.offset8{margin-left:830px}.span9{width:870px}.offset9{margin-left:930px}.span10{width:970px}.offset10{margin-left:1030px}.span11{width:1070px}.offset11{margin-left:1130px}.span12{width:1170px}.offset12{margin-left:1230px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.5641%;*margin-left:2.51091%}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .span1{width:5.98291%;*width:5.92971%}.row-fluid .span2{width:14.52991%;*width:14.47672%}.row-fluid .span3{width:23.07692%;*width:23.02373%}.row-fluid .span4{width:31.62393%;*width:31.57074%}.row-fluid .span5{width:40.17094%;*width:40.11775%}.row-fluid .span6{width:48.71795%;*width:48.66476%}.row-fluid .span7{width:57.26496%;*width:57.21177%}.row-fluid .span8{width:65.81197%;*width:65.75877%}.row-fluid .span9{width:74.35897%;*width:74.30578%}.row-fluid .span10{width:82.90598%;*width:82.85279%}.row-fluid .span11{width:91.45299%;*width:91.3998%}.row-fluid .span12{width:100%;*width:99.94681%}input,textarea,.uneditable-input{margin-left:0}input.span1,textarea.span1,.uneditable-input.span1{width:60px}input.span2,textarea.span2,.uneditable-input.span2{width:160px}input.span3,textarea.span3,.uneditable-input.span3{width:260px}input.span4,textarea.span4,.uneditable-input.span4{width:360px}input.span5,textarea.span5,.uneditable-input.span5{width:460px}input.span6,textarea.span6,.uneditable-input.span6{width:560px}input.span7,textarea.span7,.uneditable-input.span7{width:660px}input.span8,textarea.span8,.uneditable-input.span8{width:760px}input.span9,textarea.span9,.uneditable-input.span9{width:860px}input.span10,textarea.span10,.uneditable-input.span10{width:960px}input.span11,textarea.span11,.uneditable-input.span11{width:1060px}input.span12,textarea.span12,.uneditable-input.span12{width:1160px}.thumbnails{margin-left:-30px}.thumbnails>li{margin-left:30px}.row-fluid .thumbnails{margin-left:0}}@media (max-width: 979px){body{padding-top:0}.navbar-fixed-top{position:static;margin-bottom:18px}.navbar-fixed-top .navbar-inner{padding:5px}.navbar .container{width:auto;padding:0}.navbar .brand{padding-left:10px;padding-right:10px;margin:0 0 0 -5px}.nav-collapse{clear:both}.nav-collapse .nav{float:none;margin:0 0 9px}.nav-collapse .nav>li{float:none}.nav-collapse .nav>li>a{margin-bottom:2px}.nav-collapse .nav>.divider-vertical{display:none}.nav-collapse .nav .nav-header{color:#999;text-shadow:none}.nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:6px 15px;font-weight:bold;color:#999;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.nav-collapse .dropdown-menu li+li a{margin-bottom:2px}.nav-collapse .nav>li>a:hover,.nav-collapse .dropdown-menu a:hover{background-color:#222}.nav-collapse.in .btn-group{margin-top:5px;padding:0}.nav-collapse .dropdown-menu{position:static;top:auto;left:auto;float:none;display:block;max-width:none;margin:0 15px;padding:0;background-color:transparent;border:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none}.nav-collapse .dropdown-menu .divider{display:none}.nav-collapse .navbar-form,.nav-collapse .navbar-search{float:none;padding:9px 15px;margin:9px 0;border-top:1px solid #222;border-bottom:1px solid #222;-webkit-box-shadow:"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)";-moz-box-shadow:"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)";box-shadow:"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"}.navbar .nav-collapse .nav.pull-right{float:none;margin-left:0}.nav-collapse,.nav-collapse.collapse{overflow:hidden;height:0}.navbar .btn-navbar{display:block}.navbar-static .navbar-inner{padding-left:10px;padding-right:10px}}@media (min-width: 980px){.nav-collapse.collapse{height:auto !important;overflow:visible !important}}html,body{height:100%}#root{clear:both;min-height:100%;height:auto !important;height:100%;margin-bottom:-54px}#root #root_footer{height:54px}#footer{clear:both;position:relative;height:54px}
index d836806..5b8e4a8 100644 (file)
@@ -9,41 +9,29 @@
 
                <!-- Le styles -->
                <link href="assets/css/screen.css" rel="stylesheet">
-               <style>
-                       body {
-                               padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
-                       }
-               </style>
        </head>
 
        <body>
 
-               <div class="navbar navbar-inverse navbar-fixed-top">
-                       <div class="navbar-inner">
-                               <div class="container">
-                                       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-                                               <span class="icon-bar"></span>
-                                               <span class="icon-bar"></span>
-                                               <span class="icon-bar"></span>
-                                       </a>
-                                       <a class="brand" href="#">Project name</a>
-                                       <div class="nav-collapse collapse">
-                                               <ul class="nav">
-                                                       <li class="active"><a href="#">Home</a></li>
-                                                       <li><a href="#about">About</a></li>
-                                                       <li><a href="#contact">Contact</a></li>
-                                               </ul>
-                                       </div><!--/.nav-collapse -->
-                               </div>
-                       </div>
-               </div>
-
-               <div class="container">
-
-                       <h1>Bootstrap starter template</h1>
-                       <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
-
-               </div> <!-- /container -->
+               <div id="root">
+
+                       <div class="container">
+
+                               <h1>Bootstrap starter template</h1>
+                               <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
+
+                       </div> <!-- /container -->
+
+                       <div id="root_footer"></div>
+               </div> <!-- /root -->
+
+               <footer id="footer">
+                       <div class="container">
+
+                               <p>Sticky footer</p>
+
+                       </div> <!-- /container -->
+               </footer>
 
                <!-- js included here -->
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>