Bootstrap, brought to you buy the guys at Twitter, is a very cool CSS framework that gives you access to some sleek looking buttons, form items, navigation bars and many, many other things.
It’s designed around the grid-layout principle but very easily allows for liquid-layouts. I definitely recommend giving Bootstrap a try.
One thing it didn’t have, that I needed, is a nav bar that sticks to the bottom of a page. Fortunately it’s very easy to take the topbar and make it a bottombar. The CSS is included below.
/*!
* Bootstrap v1.2.0
*
* Copyright 2011 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Fri Sep 9 20:48:32 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.bottombar {
height: 40px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
overflow: visible;
}
.bottombar .fill {
background: #222;
background-color: #222222;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.bottombar a {
color: #bfbfbf;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bottombar a:hover, .bottombar ul li.active a {
background-color: #333;
background-color: rgba(255, 255, 255, 0.05);
color: #ffffff;
text-decoration: none;
}
.bottombar h3 {
position: relative;
}
.bottombar h3 a {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
color: #ffffff;
font-size: 20px;
font-weight: 200;
line-height: 1;
}
.bottombar form {
float: left;
margin: 5px 0 0 0;
position: relative;
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.bottombar form input {
background-color: #444;
background-color: rgba(255, 255, 255, 0.3);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: normal;
font-weight: 13px;
line-height: 1;
width: 220px;
padding: 4px 9px;
color: #fff;
color: rgba(255, 255, 255, 0.75);
border: 1px solid #111;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.25);
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.bottombar form input:-moz-placeholder {
color: #e6e6e6;
}
.bottombar form input::-webkit-input-placeholder {
color: #e6e6e6;
}
.bottombar form input:hover {
background-color: #bfbfbf;
background-color: rgba(255, 255, 255, 0.5);
color: #fff;
}
.bottombar form input:focus, .bottombar form input.focused {
outline: none;
background-color: #fff;
color: #404040;
text-shadow: 0 1px 0 #fff;
border: 0;
padding: 5px 10px;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.bottombar ul {
display: block;
float: left;
margin: 0 10px 0 0;
position: relative;
}
.bottombar ul.secondary-nav {
float: right;
margin-left: 10px;
margin-right: 0;
}
.bottombar ul li {
display: block;
float: left;
font-size: 13px;
}
.bottombar ul li a {
display: block;
float: none;
padding: 10px 10px 11px;
line-height: 19px;
text-decoration: none;
}
.bottombar ul li a:hover {
color: #fff;
text-decoration: none;
}
.bottombar ul li.active a {
background-color: #222;
background-color: rgba(0, 0, 0, 0.5);
}
.bottombar ul.primary-nav li ul {
left: 0;
}
.bottombar ul.secondary-nav li ul {
right: 0;
}
.bottombar ul li.menu {
position: relative;
}
.bottombar ul li.menu a.menu:after {
width: 0px;
height: 0px;
display: inline-block;
content: "↑";
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
margin-left: 4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
.bottombar ul li.menu.open a.menu, .bottombar ul li.menu.open a:hover {
background-color: #444;
background-color: rgba(255, 255, 255, 0.1);
*background-color: #444;
/* IE6-7 */
color: #fff;
}
.bottombar ul li.menu.open ul {
display: block;
}
.bottombar ul li.menu.open ul li a {
background-color: transparent;
font-weight: normal;
}
.bottombar ul li.menu.open ul li a:hover {
background-color: rgba(255, 255, 255, 0.1);
*background-color: #444;
/* IE6-7 */
color: #fff;
}
.bottombar ul li.menu.open ul li.active a {
background-color: rgba(255, 255, 255, 0.1);
font-weight: bold;
}
.bottombar ul li ul {
background-color: #333;
float: left;
display: none;
position: absolute;
bottom: 40px;
min-width: 160px;
max-width: 220px;
_width: 160px;
margin-left: 0;
margin-right: 0;
padding: 0;
text-align: left;
border: 0;
zoom: 1;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
-webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.6);
}
.bottombar ul li ul li {
float: none;
clear: both;
display: block;
background: none;
font-size: 12px;
}
.bottombar ul li ul li a {
display: block;
padding: 6px 15px;
clear: both;
font-weight: normal;
line-height: 19px;
color: #bbb;
}
.bottombar ul li ul li a:hover {
background-color: #333;
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
}
.bottombar ul li ul li.divider {
height: 1px;
overflow: hidden;
background: #222;
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin: 5px 0;
}
.bottombar ul li ul li span {
clear: both;
display: block;
background: rgba(0, 0, 0, 0.2);
padding: 6px 15px;
cursor: default;
color: #808080;
border-top: 1px solid rgba(0, 0, 0, 0.2);
}