Updated documentation; added stacked forms; cleaned up spacing; moved all ids to the section element instead of the page header to fix spacing with bookmarked links;

3 files changed, 35 insertions, 64 deletions

diff --git a/less/docs.less b/less/docs.less
index b4a93b881..d45f80356 100644
--- a/less/docs.less
+++ b/less/docs.less
@@ -13,22 +13,27 @@ article,
 aside {
   display: block;
 }
-#masthead {
-  margin-top: @baseline * -1;
+
+#masthead,
+#footer {
   #gradient > .vertical(darken(@blue-dark, 5%), darken(@blue, 7.5%));
   div.inner {
     background: transparent url(../img/grid-20px.png) 0 -1px;
     padding: 40px 0;
     .box-shadow(inset 0 10px 30px rgba(0,0,0,.25));
   }
+  h1, p, small {
+    color: #fff;
+    text-shadow: 0 2px 0 rgba(0,0,0,.25);
+  }
+}
+#masthead {
+  margin-top: @baseline * 2;
+  margin-bottom: @baseline * -2;
   h1 {
     margin-bottom: 0;
   }
-  h1, p {
-    color: #fff;
-    text-shadow: 0 1px 0 rgba(0,0,0,.25);
-  }
-  p {
+  p.lead {
     .font(300,20px,30px);
     margin: 5px 0;
   }
@@ -42,6 +47,7 @@ aside {
     border: 0;
     @shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.4);
     .box-shadow(@shadow);
+    .transition(all .2s linear);
   }
   small {
     display: block;
@@ -55,9 +61,9 @@ aside {
   }
 }
 
-// Body
-#body {
-  padding: 0 0 40px;
+// Page footer
+#footer {
+  margin-top: @baseline * 4;
 }
 
 // Show the grids
@@ -82,7 +88,8 @@ aside {
 
 // Break up sections
 section {
-  margin-bottom: 40px;
+  padding-top: @baseline * 4;
+  margin-bottom: @baseline * -2;
 }
 
 // Hashgrid.js grid
diff --git a/less/forms.less b/less/forms.less
index 4ebedc745..6447fd39f 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -4,11 +4,11 @@
 */
 
 
-
 /* Global form styles
 -------------------------------------------------- */
 
 form {
+  margin-bottom: @baseline;
   // Groups of fields with labels on top (legends)
   fieldset {
     margin-bottom: @baseline;
@@ -64,11 +64,13 @@ form {
     border: 1px solid #bbb;
     .border-radius(3px);
   }
-  select,
-  input[type=file] {
+  select {
     height: @baseline * 1.5;
     line-height: @baseline * 1.5;
   }
+  input[type=file] {
+    line-height: @baseline * 1.5;
+  }
   textarea {
     height: auto;
   }
@@ -300,42 +302,13 @@ ul.inputs-list {
   }
 }
 
-/* Disabled states for form elements, containing elements, and help text */
-div.disabled span {
-  color: #aaa;
-}
-div.disabled input[type=text],
-div.disabled input[type=passsword],
-div.disabled textarea {
-  background: #f5f5f5;
-}
-ul.options label.disabled,
-ul.options label.disabled span,
-ul.options label.disabled small,
-ul.options label.disabled strong {
-  color: #aaa !important;
-}
-
-
 // Stacked forms
-form.stacked-form {
-  h4, p {
-    margin: 0 0 2px;
-    color: rgba(0,0,0,.5);
-  }
+form.form-stacked {
   fieldset {
-    margin: 0;
-    padding: 19px 0 0;
-    border-top-color: rgba(0,0,0,.1);
-  }
-  div.actions {
-    margin-left: 0;
-    padding: 19px 0 30px 180px;
-    border-top: 1px solid rgba(0,0,0,.1);
-  }
+    padding-top: @baseline / 2;
+  }  
   legend {
-    margin: 0;
-    padding: 0;
+    margin-left: 0;
   }
   label {
     display: block;
@@ -346,16 +319,14 @@ form.stacked-form {
     line-height: 20px;
     padding-top: 1px;
   }
-  div.input {
-    margin: 0;
-  }
   div.clearfix {
-    margin-bottom: 10px;
-  }
-  div.six.columns input, div.six.columns textarea, div.six.columns select {
-    width: 320px;
+    margin-bottom: @baseline / 2;
+    div.input {
+      margin-left: 0;
+    }
   }
-  div.three.columns input, div.three.columns textarea, div.three.columns select {
-    width: 150px;
+  ul.inputs-list li label {
+    font-weight: normal;
+    padding-top: 0;
   }
 }
diff --git a/less/patterns.less b/less/patterns.less
index 490069027..1d597c401 100644
--- a/less/patterns.less
+++ b/less/patterns.less
@@ -7,10 +7,6 @@
 /* Top bar
 -------------------------------------------------- */
 
-body {
-  padding-top: 60px;
-  background-position: 0 40px;
-}
 div.topbar {
   #gradient > .vertical(#333, #222);
   position: fixed;
@@ -33,6 +29,7 @@ div.topbar {
     float: left;
     padding: 0 10px;
     line-height: 40px;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   }
   // Logo
   a#logo {
@@ -41,7 +38,6 @@ div.topbar {
     color: @gray-light;
     font-size: 20px;
     font-weight: 200;
-    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
     img {
       float: left;
       margin-top: 9px;
@@ -56,9 +52,6 @@ div.topbar {
     margin: 0;
     li {
       display: inline;
-      a {
-
-      }
       &.active a {
         color: #fff;
         background-color: rgba(0,0,0,.5);