Responsive template

Responsive template

by AaronLayton

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<!-- I would have contained all of the header in it's own block,
essentially making this a 'module' we can update later on.
Note: Also helps when you z-index .. you can make sure the 
menu is always over the content -->
<header class="main-header">
    <div class="container">
        <div class="row">
            <div class="span3">
				Logo
     		</div>
            <div class="span9">
                Links
            </div>
        </div>
    </div>
</header>

<!-- This is the main page content. I usually add in page-container just
incase want to add a background specifically to the page content, or
if I want to update it through AJAX -->
<div class="container page-container">
    <div class="row">
        <div class="span12">
            <h1>Normal page content</h1>
            <p>Lorem ipsum</p>
   		</div>
    </div>
    <div class="row">
        <div class="span12">
            <p>Normal 12 colum grid</p>
        </div>
    </div>
    <div class="row show-grid">
        <div class="span1">1</div>
        <div class="span1">1</div>
        <div class="span1">1</div>
        <div class="span1">1</div>
        <div class="span1">1</div>
        <div class="span1">1</div>
        <div class="span1">1</div>
        <div class="span1">1</div>
        <div class="span1">1</div>
        <div class="span1">1</div>
        <div class="span1">1</div>
        <div class="span1">1</div>
    </div>
    <div class="row">
        <div class="span12">
            <p>Example columns (listing page)</p>
        </div>
    </div>
    <div class="row show-grid">
        <div class="span2">2</div>
        <div class="span10">10</div>
    </div>
    <div class="row">
        <div class="span12">
            <p>Nesting 12 columns inside the span10</p>
        </div>
    </div>
    <div...

CSS

.main-header { background:#eee;margin:0 0 20px;padding:20px 0 40px; }
.main-footer { background:#eee;margin:20px 0 0;padding:20px 0 40px; }

/* Debug to show the grid */
.show-grid {
  margin-top: 10px;
  margin-bottom: 20px;
}
.show-grid [class*="span"] {
  background-color: #eee;
  text-align: center;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  min-height: 40px;
  line-height: 40px;
}
.show-grid:hover [class*="span"] {
  background: #ddd;
}
.show-grid .show-grid {
  margin-top: 0;
  margin-bottom: 0;
}
.show-grid .show-grid [class*="span"] {
  margin-top: 5px;
}
.show-grid [class*="span"] [class*="span"] {
  background-color: #ccc;
}
.show-grid [class*="span"] [class*="span"] [class*="span"] {
  background-color: #999;
}