mobile-first navs, navbar, grids, and type

docs/assets/css/docs.css

@@ -2,6 +2,7 @@
 
 
 /* Page =================================================== */
+/*
 html {
   background-color: #fff;
   font-size: 62.5%;
@@ -38,9 +39,10 @@ p {
 img {
   max-width: 100%;
 }
-
+*/
 
 /* Typography =================================================== */
+/*
 h1,
 h2,
 h3,
@@ -92,7 +94,7 @@ small {
 }
 ul,
 ol {
-  margin: 0 0 .5em;
+  margin: 0 0 1em;
   padding: 0 0 0 28px;
 }
 li ul,
@@ -124,10 +126,10 @@ a {
 a:hover {
   text-decoration: underline;
 }
+*/
 
 
-
-.collapse {
+/*.collapse {
   position: relative;
   height: 0;
   overflow: hidden;
@@ -135,13 +137,13 @@ a:hover {
 .collapse.in {
   height: auto;
 }
+*/
 
 
-
-.nav {
+/*.nav {
   margin-bottom: 0;
-  padding-left: 0; /* override default ul/ol */
-  overflow: hidden; /* clearfix */
+  padding-left: 0;
+  overflow: hidden;
 }
 .nav > li {
   display: block;
@@ -154,11 +156,11 @@ a:hover {
 .nav > li > a:hover {
   text-decoration: none;
   background-color: #f5f5f5;
-}
+}*/
 
 
-.nav-list > li > a {
-  margin-bottom: -1px; /* tuck up the following item to make 1px border */
+/*.nav-list > li > a {
+  margin-bottom: -1px; // tuck up the following item to make 1px border
   border: 1px solid #ddd;
 }
 .nav-list > li:first-child > a {
@@ -166,7 +168,7 @@ a:hover {
   border-top-right-radius: 5px;
 }
 .nav-list > li:last-child > a {
-  margin-bottom: 0; /* undo the tuck */
+  margin-bottom: 0;  undo the tuck
    border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
@@ -175,17 +177,17 @@ a:hover {
   color: #fff;
   background-color: #428bca;
   border-color: #428bca;
-  z-index: 2; /* Bring active item forward so border sits on top of next element */
-}
+  z-index: 2; // Bring active item forward so border sits on top of next element
+}*/
 
 
 
 
 
-.navbar {
+/*.navbar {
   padding: 15px;
   background-color: #eee;
-  overflow: hidden; /* clearfix */
+  overflow: hidden;
 }
 
 .navbar .brand {
@@ -199,10 +201,10 @@ a:hover {
 .navbar .brand:hover {
   text-decoration: none;
   background-color: #ddd;
-}
+}*/
 
-.navbar .nav {
-  margin-top: 15px; /* space out from .navbar .brand and .btn-navbar */
+/*.navbar .nav {
+  margin-top: 15px;
 }
 .navbar .nav > li > a {
   line-height: 20px;
@@ -213,8 +215,8 @@ a:hover {
 .navbar .nav > .active > a {
   background-color: #ddd;
 }
-
-.btn-navbar {
+*/
+/*.btn-navbar {
   float: right;
   padding: 10px 12px;
   background-color: #ddd;
@@ -230,10 +232,10 @@ a:hover {
 }
 .btn-navbar .icon-bar + .icon-bar {
   margin-top: 3px;
-}
+}*/
 
 
-.navbar-inverse {
+/*.navbar-inverse {
   background-color: #222;
 }
 .navbar-inverse .brand {
@@ -253,33 +255,33 @@ a:hover {
 }
 .navbar-inverse .btn-navbar {
   background-color: #444;
-}
+}*/
 
 
 
 
 
 
-.row {
+/*.row {
   margin-left: -10px;
   margin-right: -10px;
-  overflow: hidden; /* clearfix */
+  overflow: hidden;
 }
 [class^="span"] {
   padding-left: 10px;
   padding-right: 10px;
   -webkit-box-sizing: border-box;
-}
+}*/
 
 
 
 /* Disable iOS/WinMobile font size changes */
-@media screen and (max-device-width: 480px) {
+/*@media screen and (max-device-width: 480px) {
   html {
     -ms-text-size-adjust: none;
     -webkit-text-size-adjust: none;
   }
-}
+}*/
 
 
 @media screen and (min-width: 480px) {
@@ -399,6 +401,11 @@ body > .container {
   padding: 14px;
   margin-bottom: -1px;
 }
+.bs-docs-example p:last-child,
+.bs-docs-example ul:last-child,
+.bs-docs-example ol:last-child {
+  margin-bottom: 0;
+}
 .bs-docs-example + .prettyprint {
   margin-top: 0;
 }

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

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;
 }
 

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;
 }

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 {

less/mixins.less

@@ -425,7 +425,7 @@
 .container-fixed() {
   margin-right: auto;
   margin-left: auto;
-  .clearfix();
+  .clear_float();
 }
 
 // Make a Grid

less/navbar.less

 //
-// 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 @@
   }
 
 }
+
+*/

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;
 }
+*/

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;
 }
 

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;

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