diff --git a/index.html b/index.html
index 6274b8c314..b1e13d7937 100644
--- a/index.html
+++ b/index.html
@@ -12,19 +12,6 @@
-
@@ -54,7 +41,7 @@
baseline
- - Getting Started
+ - Getting Started
- Bootstrap
- Grid
- Layouts
@@ -91,7 +78,7 @@
-
+
@@ -338,10 +325,44 @@
-
+
Fixed layout
+
A basic 940px wide, centered container layout for just about any site or page.
-
+
+
+<body>
+ <div class="container">
+ ...
+ </div>
+</body>
+
+
+
+
+
+
Fluid layout
+
A flexible fluid or liquid page structure with min- and max-widths and a left-hand sidebar. Great for apps.
+
+
+
+
+<body>
+ <div class="container-fluid">
+ <div class="sidebar">
+ ...
+ </div>
+ <div class="content">
+ ...
+ </div>
+ </div>
+</body>
+
diff --git a/less/docs.less b/less/docs.less
index 8ce89e2769..b21c39aa86 100644
--- a/less/docs.less
+++ b/less/docs.less
@@ -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;
+ }
+ }
+}
diff --git a/less/scaffolding.less b/less/scaffolding.less
index 88bcf714a9..fc920ab3a4 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -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
-------------------------------------------------- */
diff --git a/readme.markdown b/readme.markdown
index 5c149d2f31..a2064aa4d0 100644
--- a/readme.markdown
+++ b/readme.markdown
@@ -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
\ No newline at end of file