updates to type scale

3c07eaa2 · Mark Otto · c6ee96c0 · 3c07eaa2 · 3c07eaa2 · 3c07eaa2
Commit 3c07eaa2 authored Jul 05, 2012 by Mark Otto
19 changed files
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -830,7 +830,7 @@
  }
  .page-header h1 small {
    display: block;
-    line-height: 18px;
+    line-height: 20px;
  }
  input[type="checkbox"],
  input[type="radio"] {
@@ -882,10 +882,10 @@
    position: static;
  }
  .navbar-fixed-top {
-    margin-bottom: 18px;
+    margin-bottom: 20px;
  }
  .navbar-fixed-bottom {
-    margin-top: 18px;
+    margin-top: 20px;
  }
  .navbar-fixed-top .navbar-inner,
  .navbar-fixed-bottom .navbar-inner {
@@ -905,7 +905,7 @@
  }
  .nav-collapse .nav {
    float: none;
-    margin: 0 0 9px;
+    margin: 0 0 10px;
  }
  .nav-collapse .nav > li {
    float: none;
@@ -975,8 +975,8 @@
  .nav-collapse .navbar-form,
  .nav-collapse .navbar-search {
    float: none;
-    padding: 9px 15px;
+    padding: 10px 15px;
-    margin: 9px 0;
+    margin: 10px 0;
    border-top: 1px solid #111111;
    border-bottom: 1px solid #111111;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);

--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -26,17 +26,6 @@ body {
  margin: 0 auto;
 }
-/* Increase docs base type size and line-heights */
-body {
-  line-height: 20px;
-}
-p {
-  margin-bottom: 15px;
-}
-/*li {
-  line-height: 25px;
-}
-*/
 /* Code in headings */
 h3 code {
  font-size: 14px;
@@ -49,7 +38,6 @@ h3 code {
 -------------------------------------------------- */
 .navbar {
-  font-size: 13px;
 }
 /* Change the docs' brand */
@@ -197,8 +185,7 @@ hr.soften {
 }
 .marketing h2 {
  font-weight: 400;
-  letter-spacing: -1px;
+`}
-}
 .marketing p {
  color: #555;
 }

--- a/docs/assets/img/grid-baseline-20px.png
+++ b/docs/assets/img/grid-baseline-20px.png
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -57,13 +57,6 @@
              <li class="">
                <a href="./javascript.html">Javascript</a>
              </li>
-              <li class="divider-vertical"></li>
-              <li class="">
-                <a href="./download.html">Customize</a>
-              </li>
-              <li class="">
-                <a href="./examples.html">Examples</a>
-              </li>
              <li class="">
                <a href="./extend.html">Extend</a>
              </li>

--- a/docs/components.html
+++ b/docs/components.html
@@ -57,13 +57,6 @@
              <li class="">
                <a href="./javascript.html">Javascript</a>
              </li>
-              <li class="divider-vertical"></li>
-              <li class="">
-                <a href="./download.html">Customize</a>
-              </li>
-              <li class="">
-                <a href="./examples.html">Examples</a>
-              </li>
              <li class="">
                <a href="./extend.html">Extend</a>
              </li>

--- a/docs/download.html
+++ b/docs/download.html
@@ -57,13 +57,6 @@
              <li class="">
                <a href="./javascript.html">Javascript</a>
              </li>
-              <li class="divider-vertical"></li>
-              <li class="active">
-                <a href="./download.html">Customize</a>
-              </li>
-              <li class="">
-                <a href="./examples.html">Examples</a>
-              </li>
              <li class="">
                <a href="./extend.html">Extend</a>
              </li>

--- a/docs/examples.html
+++ b/docs/examples.html
@@ -57,13 +57,6 @@
              <li class="">
                <a href="./javascript.html">Javascript</a>
              </li>
-              <li class="divider-vertical"></li>
-              <li class="">
-                <a href="./download.html">Customize</a>
-              </li>
-              <li class="active">
-                <a href="./examples.html">Examples</a>
-              </li>
              <li class="">
                <a href="./extend.html">Extend</a>
              </li>

--- a/docs/extend.html
+++ b/docs/extend.html
@@ -57,13 +57,6 @@
              <li class="">
                <a href="./javascript.html">Javascript</a>
              </li>
-              <li class="divider-vertical"></li>
-              <li class="">
-                <a href="./download.html">Customize</a>
-              </li>
-              <li class="">
-                <a href="./examples.html">Examples</a>
-              </li>
              <li class="">
                <a href="./extend.html">Extend</a>
              </li>

--- a/docs/index.html
+++ b/docs/index.html
@@ -57,13 +57,6 @@
              <li class="">
                <a href="./javascript.html">Javascript</a>
              </li>
-              <li class="divider-vertical"></li>
-              <li class="">
-                <a href="./download.html">Customize</a>
-              </li>
-              <li class="">
-                <a href="./examples.html">Examples</a>
-              </li>
              <li class="">
                <a href="./extend.html">Extend</a>
              </li>

--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -57,13 +57,6 @@
              <li class="active">
                <a href="./javascript.html">Javascript</a>
              </li>
-              <li class="divider-vertical"></li>
-              <li class="">
-                <a href="./download.html">Customize</a>
-              </li>
-              <li class="">
-                <a href="./examples.html">Examples</a>
-              </li>
              <li class="">
                <a href="./extend.html">Extend</a>
              </li>

--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -57,13 +57,6 @@
              <li class="">
                <a href="./javascript.html">Javascript</a>
              </li>
-              <li class="divider-vertical"></li>
-              <li class="">
-                <a href="./download.html">Customize</a>
-              </li>
-              <li class="">
-                <a href="./examples.html">Examples</a>
-              </li>
              <li class="">
                <a href="./extend.html">Extend</a>
              </li>

--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -69,13 +69,6 @@
              <li class="{{javascript}}">
                <a href="./javascript.html">{{_i}}Javascript{{/i}}</a>
              </li>
-              <li class="divider-vertical"></li>
-              <li class="{{download}}">
-                <a href="./download.html">{{_i}}Customize{{/i}}</a>
-              </li>
-              <li class="{{examples}}">
-                <a href="./examples.html">{{_i}}Examples{{/i}}</a>
-              </li>
              <li class="{{less}}">
                <a href="./extend.html">{{_i}}Extend{{/i}}</a>
              </li>

--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -57,13 +57,6 @@
              <li class="">
                <a href="./javascript.html">Javascript</a>
              </li>
-              <li class="divider-vertical"></li>
-              <li class="">
-                <a href="./download.html">Customize</a>
-              </li>
-              <li class="">
-                <a href="./examples.html">Examples</a>
-              </li>
              <li class="">
                <a href="./extend.html">Extend</a>
              </li>

--- a/less/navbar.less
+++ b/less/navbar.less
@@ -206,7 +206,7 @@
  float: none;
  // Vertically center the text given @navbarHeight
  @elementHeight: 20px;
-  padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1);
+  padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
  line-height: 19px;
  color: @navbarLinkColor;
  text-decoration: none;

--- a/less/tests/css-tests.css
+++ b/less/tests/css-tests.css
@@ -12,9 +12,24 @@ body {
 .subhead {
  margin-bottom: 36px;
 }
-h4 {
+/*h4 {
  margin-bottom: 5px;
 }
+*/
+.type-test {
+  margin-bottom: 20px;
+  padding: 0 20px 20px;
+  background: url(../../docs/assets/img/grid-baseline-20px.png);
+}
+.type-test h1,
+.type-test h2,
+.type-test h3,
+.type-test h4,
+.type-test h5,
+.type-test h6 {
+  xbackground-color: rgba(255,0,0,.2);
+}
 /* colgroup tests */

--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -55,6 +55,45 @@
+<!-- Typography
+================================================== -->
+<div class="page-header">
+  <h1>Typography</h1>
+</div>
+<div class="row">
+  <div class="span6">
+    <div class="type-test">
+      <h1>h1. Heading 1</h1>
+      <h2>h2. Heading 2</h2>
+      <h3>h3. Heading 3</h3>
+      <h4>h4. Heading 4</h4>
+      <h5>h5. Heading 5</h5>
+      <h6>h6. Heading 6</h6>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    </div>
+  </div>
+  <div class="span6">
+    <div class="type-test">
+      <h1>h1. Heading 1</h1>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      <h2>h2. Heading 2</h2>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      <h3>h3. Heading 3</h3>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      <h4>h4. Heading 4</h4>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      <h5>h5. Heading 5</h5>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      <h6>h6. Heading 6</h6>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    </div>
+  </div>
+</div>
 <!-- Fluid grid
 ================================================== -->

--- a/less/type.less
+++ b/less/type.less
@@ -3,8 +3,8 @@
 // --------------------------------------------------
-// BODY TEXT
+// Body text
-// ---------
+// -------------------------
 p {
  margin: 0 0 @baseLineHeight / 2;
@@ -20,13 +20,15 @@ p {
  line-height: @baseLineHeight * 1.5;
 }
-// HEADINGS
-// --------
+// Headings
+// -------------------------
 h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+  margin: (@baseLineHeight / 2) 0;
  font-family: @headingsFontFamily;
  font-weight: @headingsFontWeight;
+  line-height: 1;
  color: @headingsColor;
  text-rendering: optimizelegibility; // Fix the character spacing for headings
  small {
@@ -34,59 +36,31 @@ h1, h2, h3, h4, h5, h6 {
    color: @grayLight;
  }
 }
-h1 {
+h1 { font-size: 36px; line-height: 40px; }
-  font-size: 30px;
+h2 { font-size: 30px; line-height: 40px; }
-  line-height: @baseLineHeight * 2;
+h3 { font-size: 24px; line-height: 40px; }
-  small {
+h4 { font-size: 18px; line-height: 20px; }
-    font-size: 18px;
+h5 { font-size: 14px; line-height: 20px; }
-  }
+h6 { font-size: 12px; line-height: 20px; }
-}
-h2 {
+h1 small { font-size: 24px; }
-  font-size: 24px;
+h2 small { font-size: 18px; }
-  line-height: @baseLineHeight * 2;
+h3 small { font-size: 14px; }
-  small {
+h4 small { font-size: 14px; }
-    font-size: 18px;
-  }
-}
-h3 {
-  font-size: 18px;
-  line-height: @baseLineHeight * 1.5;
-  small {
-    font-size: 14px;
-  }
-}
-h4, h5, h6 {
-  line-height: @baseLineHeight;
-}
-h4 {
-  font-size: 14px;
-  small {
-    font-size: 12px;
-  }
-}
-h5 {
-  font-size: 12px;
-}
-h6 {
-  font-size: 11px;
-  color: @grayLight;
-  text-transform: uppercase;
-}
 // Page header
+// -------------------------
 .page-header {
-  padding-bottom: @baseLineHeight - 1;
+  margin: @baseLineHeight 0 (@baseLineHeight - 1);
-  margin: @baseLineHeight 0;
  border-bottom: 1px solid @grayLighter;
 }
-.page-header h1 {
-  line-height: 1;
-}
-// LISTS
+// Lists
-// -----
+// --------------------------------------------------
 // Unordered and Ordered lists
 ul, ol {

--- a/less/variables.less
+++ b/less/variables.less
@@ -48,9 +48,9 @@
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
-@baseFontSize:          13px;
+@baseFontSize:          14px;
 @baseFontFamily:        @sansFontFamily;
-@baseLineHeight:        18px;
+@baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily