mobile-first navs, navbar, grids, and type

10 files changed, 194 insertions, 18 deletions

diff --git a/less/bootstrap.less b/less/bootstrap.less
index c30be82cf..8e60e41c0 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -15,12 +15,22 @@
 // Reset
 @import "normalize.less";
 
+// Core CSS
+@import "scaffolding.less";
+@import "type.less";
+@import "code.less";
+@import "grid.less";
 
+// Components: common
+@import "component-animations.less";
 
-/*
+// Components: Nav
+@import "navs.less";
+@import "navbar.less";
 
+
+/*
 // Grid system and page structure
-@import "scaffolding.less";
 @import "grid.less";
 
 // Base CSS
diff --git a/less/code.less b/less/code.less
index cf884cb83..1adb3efd4 100644
--- a/less/code.less
+++ b/less/code.less
@@ -16,9 +16,9 @@ pre {
 // Inline code
 code {
   padding: 2px 4px;
-  color: #d14;
-  background-color: #f7f7f9;
-  border: 1px solid #e1e1e8;
+  font-size: 90%;
+  color: #c7254e;
+  background-color: #f9f2f4;
   white-space: nowrap;
 }
 
diff --git a/less/component-animations.less b/less/component-animations.less
index d614263a7..b25adc932 100644
--- a/less/component-animations.less
+++ b/less/component-animations.less
@@ -11,7 +11,7 @@
   }
 }
 
-.collapse {
+/*.collapse {
   position: relative;
   height: 0;
   overflow: hidden;
@@ -19,4 +19,14 @@
   &.in {
     height: auto;
   }
+}*/
+
+.collapse {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  .transition(height .35s ease);
+}
+.collapse.in {
+  height: auto;
 }
diff --git a/less/grid.less b/less/grid.less
index 2e7a61d91..2638ee068 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -9,8 +9,23 @@
   max-width: 940px;
 }
 
+// Mobile-first defaults
+.row {
+  margin-left: -10px;
+  margin-right: -10px;
+  .clear_float();
+}
+[class^="span"] {
+  padding-left: 10px;
+  padding-right: 10px;
+  // Proper box-model (padding doesn't add to width)
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
 // Fixed (940px)
-#grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
+// #grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width);
 
 // Reset utility classes due to specificity
 [class*="span"].pull-right {
diff --git a/less/mixins.less b/less/mixins.less
index eeab4bbb0..b53049554 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -425,7 +425,7 @@
 .container-fixed() {
   margin-right: auto;
   margin-left: auto;
-  .clearfix();
+  .clear_float();
 }
 
 // Make a Grid
diff --git a/less/navbar.less b/less/navbar.less
index 70f501acc..82abf0795 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -1,7 +1,92 @@
 //
-// Navbars (Redux)
+// Navbars
 // --------------------------------------------------
 
+// Wrapper and base class
+.navbar {
+  padding: 15px;
+  background-color: #eee;
+  .clear_float();
+}
+
+// Brand/project name
+.navbar .brand {
+  display: inline-block;
+  padding: 7px 15px;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 1;
+  &:hover {
+    text-decoration: none;
+    background-color: #ddd;
+  }
+}
+
+// Responsive navbar button
+.btn-navbar {
+  float: right;
+  padding: 10px 12px;
+  background-color: #ddd;
+  border: 0;
+  border-radius: 4px;
+
+  // Bars
+  .icon-bar {
+    display: block;
+    width: 20px;
+    height: 2px;
+    background-color: #fff;
+    border-radius: 1px;
+  }
+  .icon-bar + .icon-bar {
+    margin-top: 3px;
+  }
+}
+
+// Nav links
+.navbar {
+  .nav {
+    margin-top: 15px; // space out from .navbar .brand and .btn-navbar
+  }
+  .nav > li > a {
+    line-height: 20px;
+  }
+  .nav > li > a:hover {
+    background-color: #ddd;
+  }
+  .nav > .active > a {
+    background-color: #ddd;
+  }
+}
+
+// Inverse navbar
+.navbar-inverse {
+  background-color: #222;
+
+  .brand {
+    color: #fff;
+    &:hover {
+      background-color: #333;
+    }
+  }
+  .nav > li > a {
+    color: #fff;
+  }
+  .nav > li > a:hover {
+    background-color: #333;
+  }
+  .nav > .active > a {
+    background-color: #333;
+  }
+  .btn-navbar {
+    background-color: #444;
+  }
+}
+
+
+
+
+/*
 
 // COMMON STYLES
 // -------------
@@ -446,3 +531,5 @@
   }
 
 }
+
+*/
diff --git a/less/navs.less b/less/navs.less
index ff7fe51fa..c8fb40d86 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -8,22 +8,52 @@
 
 .nav {
   margin-left: 0;
-  margin-bottom: @line-height-base;
+  margin-bottom: 0;
+  padding-left: 0; // Override default ul/ol
   list-style: none;
-  .clearfix();
+  .clear_float();
 }
 .nav > li {
-  float: left;
+  display: block;
 }
 .nav > li > a {
+  position: relative;
   display: block;
-  padding: 8px 12px;
+  padding: 10px 15px;
 }
 .nav > li > a:hover {
   text-decoration: none;
   background-color: @grayLighter;
 }
 
+// Lists
+// -------------------------
+
+.nav-list > li > a {
+  margin-bottom: -1px; // pull up the following link for a 1px border between
+  border: 1px solid #e5e5e5;
+}
+.nav-list > li:first-child > a {
+   border-top-left-radius: @border-radius-base;
+  border-top-right-radius: @border-radius-base;
+}
+.nav-list > li:last-child > a {
+  border-radius: 0 0 6px 6px;
+   border-bottom-left-radius: @border-radius-base;
+  border-bottom-right-radius: @border-radius-base;
+}
+.nav-list > .active > a,
+.nav-list > .active > a:hover {
+  z-index: 2; // Bring active item forward so border sits on top of next element
+  color: #fff;
+  background-color: @link-color;
+  border-color: @link-color;
+}
+
+
+
+
+/*
 // Prevent IE8 from misplacing imgs
 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
 .nav > li > a > img {
@@ -55,9 +85,10 @@
 .nav .divider {
   .nav-divider();
 }
+*/
 
 
-
+/*
 // Tabs
 // -------------------------
 
@@ -269,3 +300,4 @@
   background-color: transparent;
   cursor: default;
 }
+*/
diff --git a/less/scaffolding.less b/less/scaffolding.less
index e596f26d0..2f0189dd6 100644
--- a/less/scaffolding.less
+++ b/less/scaffolding.less
@@ -6,9 +6,30 @@
 // Body reset
 // -------------------------
 
+html {
+  font-size: 62.5%;
+  // Touch the Mobile Magic™
+  -webkit-overflow-scrolling: touch;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
+
+// Disable iOS/WinMobile font size changes
+@media screen and (max-device-width: 480px) {
+  html {
+    -ms-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+  }
+}
+
 body {
   margin: 0;
   color: @text-color;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-size: 1.4rem;
+  line-height: 1.5;
   background-color: @body-background;
 }
 
diff --git a/less/type.less b/less/type.less
index 89e65fff8..39358e4e3 100644
--- a/less/type.less
+++ b/less/type.less
@@ -93,9 +93,10 @@ h4 small { font-size: @font-size-base; }
 // --------------------------------------------------
 
 // Unordered and Ordered lists
-ul, ol {
+ul,
+ol {
   padding: 0;
-  margin: 0 0 @line-height-base / 2 25px;
+  margin: 0 0 (@line-height-base / 2) 25px;
 }
 ul ul,
 ul ol,
@@ -138,7 +139,7 @@ dd {
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
-  .clearfix(); // Ensure dl clears floats if empty dd elements present
+  .clear_float(); // Ensure dl clears floats if empty dd elements present
   dt {
     float: left;
     width: @component-offset-horizontal - 20;
diff --git a/less/variables.less b/less/variables.less
index 47009525c..db99e4075 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -46,7 +46,7 @@
 @line-height-base:        20px;
 
 @headings-font-family:    inherit; // empty to use BS default, @font-family-base
-@headings-font-weight:    bold;    // instead of browser default, bold
+@headings-font-weight:    500;
 
 
 // Component sizing