Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added sticky footer

  • Loading branch information...
commit af7124baeef8740567292dd9df76990115a61b8a 1 parent fbbc7ac
@adamjgrant adamjgrant authored
View
47 css/bootstrap.css
@@ -1013,6 +1013,7 @@ select:focus:required:invalid:focus {
/* IE7 inline-block hack */
*zoom: 1;
+ stop: being-broken;
vertical-align: middle;
padding-left: 5px;
}
@@ -1161,6 +1162,7 @@ select:focus:required:invalid:focus {
/* IE7 inline-block hack */
*zoom: 1;
+ stop: being-broken;
margin-bottom: 0;
}
.form-search .hide,
@@ -2093,6 +2095,7 @@ button.close {
/* IE7 inline-block hack */
*zoom: 1;
+ stop: being-broken;
padding: 4px 10px 4px;
margin-bottom: 0;
font-size: 13px;
@@ -2463,6 +2466,7 @@ input[type="submit"].btn.btn-mini {
/* IE7 inline-block hack */
*zoom: 1;
+ stop: being-broken;
}
.btn-group > .btn {
position: relative;
@@ -3323,6 +3327,7 @@ input[type="submit"].btn.btn-mini {
/* IE7 inline-block hack */
*zoom: 1;
+ stop: being-broken;
text-shadow: 0 1px 0 #ffffff;
}
.breadcrumb .divider {
@@ -3342,6 +3347,7 @@ input[type="submit"].btn.btn-mini {
/* IE7 inline-block hack */
*zoom: 1;
+ stop: being-broken;
margin-left: 0;
margin-bottom: 0;
-webkit-border-radius: 3px;
@@ -4183,10 +4189,12 @@ a.badge:hover {
This should be @imported into /less/bootstrap.less at the end of the file.
This allows you to keep the Bootstrap core up-to-date without losing your modifications.
- However, only LESS writeup which effects the whole of Kickstrap should be directly written here.
+ However, only LESS writeup which effects the whole of Kickstrap--all themes--should be directly written here.
If instead you want to modify your current theme, I recommend going into the /extras/themes/ folder
and modifying it there.
+ If you want to change themes, head to /extras/settings/themes.less.
+
*/
div.jGrowl {
padding: 10px;
@@ -5078,6 +5086,43 @@ ol.linenums li {
line-height: 18px;
text-shadow: 0 1px 0 #fff;
}
+html,
+body {
+ height: 100%;
+}
+#sf-wrapper {
+ min-height: 100%;
+ height: auto !important;
+ height: 100%;
+}
+.container.main {
+ overflow: auto;
+ padding-bottom: 3em;
+}
+footer#footer {
+ position: relative;
+ margin-top: -3em;
+ height: 3em;
+ clear: both;
+}
+body:before {
+ content: "";
+ height: 100%;
+ float: left;
+ width: 0;
+ margin-top: -32767px;
+}
+/* IMPORTANT
+
+ You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
+
+ <!--[if !IE 7]>
+ <style type="text/css">
+ #wrap {display:table;height:100%}
+ </style>
+ <![endif]-->
+
+ */
[class*="span"] {
margin-top: 10px;
margin-bottom: 10px;
View
50 extras/settings/overrides.less
@@ -9,10 +9,12 @@
This should be @imported into /less/bootstrap.less at the end of the file.
This allows you to keep the Bootstrap core up-to-date without losing your modifications.
- However, only LESS writeup which effects the whole of Kickstrap should be directly written here.
+ However, only LESS writeup which effects the whole of Kickstrap--all themes--should be directly written here.
If instead you want to modify your current theme, I recommend going into the /extras/themes/ folder
and modifying it there.
+ If you want to change themes, head to /extras/settings/themes.less.
+
*/
// @import "../../extras/animate/animate.less"; // uncomment for CSS3 animations
@@ -270,6 +272,52 @@ ol.linenums li {
line-height: 18px;
text-shadow: 0 1px 0 #fff;
}
+
+// STICKY FOOTER
+// Based on work from http://ryanfait.com/sticky-footer and http://www.cssstickyfooter.com/
+
+@footerHeight: 3em; // Just set this and the rest is taken care of.
+
+html, body {
+ height: 100%;
+}
+#sf-wrapper {
+ min-height: 100%;
+ height: auto !important;
+ height: 100%; // For IE.
+}
+.container.main { // Should have only one of these per page.
+ overflow:auto;
+ padding-bottom: @footerHeight;
+}
+footer#footer {
+ position: relative;
+ margin-top: -@footerHeight;
+ height: @footerHeight;
+ clear:both;
+}
+
+ // Opera Fix
+ body:before { // Thanks to Maleika (Kohoutec)
+ content:"";
+ height:100%;
+ float:left;
+ width:0;
+ margin-top:-32767px; // Thank you Erik J - negate effect of float
+ }
+
+ /* IMPORTANT
+
+ You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
+
+ <!--[if !IE 7]>
+ <style type="text/css">
+ #wrap {display:table;height:100%}
+ </style>
+ <![endif]-->
+
+ */
+
@import "theme.less"; // Kickstrap themes
@import "../../extras/icomoon/icomoon.less"; // Turn this on if you want even more fonts from IcoMoon.
@import "../../extras/chosen/chosen.less"; // Chosen for select boxes
View
11 index.html
@@ -45,6 +45,7 @@
</style>
</head>
<body>
+
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
@@ -105,7 +106,9 @@ <h4 class="card-three">Moving on</h4>
</div>
</div>
</div>
- <div class="container">
+<div id="sf-wrapper">
+ <div class="container main">
+
<div class="row hero-unit">
<div class="span11 offset1">
<h1><img style="vertical-align:middle" src="apple-touch-icon-114x114-precomposed.png" /> Fast. Modern. Gluten-Free.</h1>
@@ -182,8 +185,10 @@ <h4 class="card-three">Moving on</h4>
</div>
<hr>
-
- <footer>
+ </div><!-- End .container.main -->
+</div><!-- End #sf-wrapper -->
+<div class="container">
+ <footer id="footer">
<p><i class="icon-github-sign"></i> Built with <a href="http://ajkochanowicz.github.com/Kickstrap/">Kickstrap</a>, Images licensed <a href="http://www.flickr.com/photos/fpmurphy">[1]</a> <a href="http://www.flickr.com/photos/30588268@N03">[2]</a> with <a href="http://creativecommons.org/licenses/by/2.0/">Creative Commons</a></p>
<p>* Edit: Judy died, but we still have her candy.</p>
<div class="row">
View
116 sample_index.html
@@ -19,10 +19,8 @@
<link rel="stylesheet" href="css/bootstrap.css">
<!-- More ideas for your head here: h5bp.com/d/head-Tips -->
- <!-- Want to try a different theme?
- If not using LESS compiler: Uncomment below
- and change to name of desired theme. (See docs) -->
- <!--link type="text/css" rel="stylesheet" href="extras/css/amelia.css" /-->
+ <!-- For the sticky footer -->
+ <!--[if !IE 7]><style type="text/css">#sf-wrapper {display:table;height:100%}</style><![endif]-->
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
@@ -36,61 +34,65 @@
<link href="css/bootstrap.ie6.css" rel="stylesheet">
<p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
-<div class="container">
- <header>
+<div id="sf-wrapper">
+ <div class="container main">
+ <header>
- </header>
+ </header>
- <div role="main">
- <a href="index.html">Sample</a>
- </div>
-
- <!-- JavaScript at the bottom for fast page loading -->
-
- <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script>window.jQuery || document.write('<script src="extras/h5bp/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
- <!-- scripts concatenated and minified via ant build script-->
- <script src="extras/prettify/prettify.js"></script>
- <script src="js/bootstrap.min.js"></script>
-
- <!-- end scripts-->
-
- <!-- If you'd rather pick and choose, comment the above and uncomment what you need below -->
- <!--script type="text/javascript" src="js/bootstrap-alert.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-button.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-carousel.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-collapse.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-dropdown.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-modal.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-modal.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-modal.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-popover.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-scrollspy.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-tab.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-tooltip.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-transition.min.js"></script-->
- <!--script type="text/javascript" src="js/bootstrap-typeahead.min.js"></script-->
- <!--script type="text/javascript" src=""></script-->
-
- <!-- end scripts -->
-
- <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
- mathiasbynens.be/notes/async-analytics-snippet -->
-
- <script type="text/javascript">
- // Use the modernizr.load() function to run polyfills for older browsers.
- Modernizr.load({
-
- });
- </script>
- <script>
- var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
- (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
- g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
- s.parentNode.insertBefore(g,s)}(document,'script'));
- </script>
- <footer>
+ <div role="main">
+ <a href="index.html">Sample</a>
+ </div>
+
+ <!-- JavaScript at the bottom for fast page loading -->
+
+ <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="extras/h5bp/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
+ <!-- scripts concatenated and minified via ant build script-->
+ <script src="extras/prettify/prettify.js"></script>
+ <script src="js/bootstrap.min.js"></script>
+
+ <!-- end scripts-->
+
+ <!-- If you'd rather pick and choose, comment the above and uncomment what you need below -->
+ <!--script type="text/javascript" src="js/bootstrap-alert.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-button.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-carousel.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-collapse.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-dropdown.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-modal.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-modal.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-modal.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-popover.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-scrollspy.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-tab.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-tooltip.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-transition.min.js"></script-->
+ <!--script type="text/javascript" src="js/bootstrap-typeahead.min.js"></script-->
+ <!--script type="text/javascript" src=""></script-->
+
+ <!-- end scripts -->
+
+ <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
+ mathiasbynens.be/notes/async-analytics-snippet -->
+
+ <script type="text/javascript">
+ // Use the modernizr.load() function to run polyfills for older browsers.
+ Modernizr.load({
+
+ });
+ </script>
+ <script>
+ var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
+ (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+ g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g,s)}(document,'script'));
+ </script>
+ </div><!-- End .container.main -->
+</div><!-- End #sf-wrapper -->
+<div class="container">
+ <footer id="footer">
<p><i class="icon-github-sign"></i> Built with <a href="http://ajkochanowicz.github.com/Kickstrap/">Kickstrap</a></p>
</footer>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.