0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-17 14:54:30 +01:00

Added in mini layout docs; cleaned up layout markup and added the css for it;

This commit is contained in:
Mark Otto 2011-04-28 11:46:32 -07:00
parent 8c2e128698
commit eb3389303d
4 changed files with 120 additions and 27 deletions

View File

@ -12,19 +12,6 @@
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="js/jquery/hashgrid.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Active state in top nav
$('div.topbar ul a').click(function() {
if ($(this).parents('li').hasClass('active')) {
$(this).parents('li').removeClass('active');
} else {
$(this).parents('li').siblings().removeClass('active');
$(this).parents('li').addClass('active');
}
});
});
</script>
<!-- Code Highlighting -->
<script type="text/javascript" src="js/jquery/chili/jquery.chili-2.2.js"></script>
@ -54,7 +41,7 @@
<img src="img/twitter-logo-no-bird.png" alt="Twitter" /> <span>baseline</span>
</a></h3>
<ul>
<li class="active"><a href="#">Getting Started</a></li>
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#bootstrap">Bootstrap</a></li>
<li><a href="#grid-system">Grid</a></li>
<li><a href="#layouts">Layouts</a></li>
@ -91,7 +78,7 @@
<section>
<section id="getting-started">
<div class="page-header">
<h1>Getting started</h1>
</div>
@ -338,10 +325,44 @@
</div>
<div class="row">
<div class="span4 columns">
<h2>Fixed layout</h2>
<p>A basic 940px wide, centered container layout for just about any site or page.</p>
</div>
<div class="span12 columns">
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
<pre class="html">
&lt;body&gt;
&lt;div class="container"&gt;
...
&lt;/div&gt;
&lt;/body&gt;
</pre>
</div>
</div>
<div class="row">
<div class="span4 columns">
<h2>Fluid layout</h2>
<p>A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar. Great for apps.</p>
</div>
<div class="span12 columns">
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
</div>
<pre class="html">
&lt;body&gt;
&lt;div class="container-fluid"&gt;
&lt;div class="sidebar"&gt;
...
&lt;/div&gt;
&lt;div class="content"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
</pre>
</div>
</div>
</section>

View File

@ -1,3 +1,13 @@
/*
Baseline's documentation styles
Special styles for presenting Baseline's documentation and examples
*/
/* Body and structure
-------------------------------------------------- */
// Give us a gradient background
body {
#gradient > .vertical-three-colors(#eee, #fff, 0.15, #fff);
background-attachment: fixed;
@ -5,7 +15,7 @@ body {
position: relative;
}
// Give us some love
// Give us some love on HTML5 elements (hardly use these in Basline thus far though)
header,
section,
footer,
@ -14,6 +24,13 @@ aside {
display: block;
}
// Break up sections
section {
padding-top: @baseline * 4;
margin-bottom: @baseline * -2;
}
// Blueprint-style header and footer
#masthead,
#footer {
#gradient > .vertical(darken(@blue-dark, 5%), darken(@blue, 7.5%));
@ -69,7 +86,10 @@ aside {
}
}
// Show the grids
/* Special grid styles
-------------------------------------------------- */
.show-grid {
margin-top: 20px;
margin-bottom: 20px;
@ -89,13 +109,10 @@ aside {
}
}
// Break up sections
section {
padding-top: @baseline * 4;
margin-bottom: @baseline * -2;
}
// Hashgrid.js grid
/* Hashgrid.js grid (press G & H to view)
-------------------------------------------------- */
#grid {
width: 980px;
position: absolute;
@ -121,3 +138,44 @@ section {
border-color: rgba(255,0,0,.25);
}
}
/* Render mini layout previews
-------------------------------------------------- */
div.mini-layout {
height: 340px;
margin-bottom: @baseline;
padding: 9px;
border: 1px solid rgba(0,0,0,.25);
.border-radius(6px);
.box-shadow(0 1px 3px rgba(0,0,0,.125));
// Default mini layout (fixed container)
div {
.border-radius(3px);
&.mini-layout-body {
background-color: rgba(141,192,219,.25);
margin: 0 auto;
width: 450px;
height: 340px;
}
}
// Fluid layout (sidebar)
&.fluid {
div.mini-layout-sidebar,
div.mini-layout-header,
div.mini-layout-body {
float: left;
}
div.mini-layout-sidebar {
background-color: rgba(141,192,219,.5);
width: 90px;
height: 340px;
}
div.mini-layout-body {
width: 400px;
margin-left: 10px;
}
}
}

View File

@ -41,12 +41,27 @@ body {
.box-shadow(inset 0 1px 0 #fff);
}
// Containers
// Container (centered, fixed-width layouts)
div.container {
width: 940px;
margin: 0 auto;
}
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
div.container-fluid {
padding: 20px;
.clearfix();
div.sidebar {
float: left;
width: 220px;
}
div.content {
min-width: 700px;
max-width: 1180px;
margin-left: 240px;
}
}
/* Base Styles
-------------------------------------------------- */

View File

@ -11,6 +11,5 @@ http://twitter.com/mdo
# Todos
* Add the empty layout section in
* Cross browser checks? Show this anywhere?
* Write up brief section on browser support