Merge branch 'v4-dev' into fix-travis-v4

author: Thomas McDonald <[email protected]> 2015-08-24 16:19:19 -0700
committer: Thomas McDonald <[email protected]> 2015-08-24 16:19:19 -0700
commit: 22717a12426af5567f65be1da3d4d968c22276a7 (patch)
tree: 491c47f72160c5b1133fa138c1fbacd00e253377 /docs/content
parent: ec523617a3eb6da5b3e14f878931c769999f89a7 (diff)
parent: 0da684ff8501768c0ecd4c60c0c7cf043bde1a1d (diff)
download: bootstrap-22717a12426af5567f65be1da3d4d968c22276a7.tar.xz
bootstrap-22717a12426af5567f65be1da3d4d968c22276a7.zip
4 files changed, 48 insertions, 11 deletions
diff --git a/docs/content/figures.md b/docs/content/figures.md
index 4e2b4dd6d..d8e2435fe 100644
--- a/docs/content/figures.md
+++ b/docs/content/figures.md
@@ -1,6 +1,6 @@
 ---
 layout: docs
-title: Images
+title: Figures
 group: content
 ---
 
@@ -15,7 +15,7 @@ Use the included `.figure` and `.figure-caption` classes to provide some baselin
 </figure>
 {% endexample %}
 
-Aligning the figure's caption is easy with our [text utilities]().
+Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl }}/components/utilities/#text-alignment).
 
 {% example html %}
 <figure class="figure">
diff --git a/docs/content/images.md b/docs/content/images.md
index 83cb9610b..a72f0041b 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -47,7 +47,7 @@ Add classes to an `<img>` element to easily style images in any project.
 
 ## Aligning images
 
-Align images with the [helper float classes](/components/helpers) or [text alignment classes](/components/helpers). A simple centering class can also be used for `block` level images.
+Align images with the [helper float classes]({{ site.baseurl }}/components/utilities/#floats) or [text alignment classes]({{ site.baseurl }}/components/utilities/#text-alignment). A simple centering class can also be used for `block` level images.
 
 <div class="bd-example bd-example-images">
   <img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners">
diff --git a/docs/content/reboot.md b/docs/content/reboot.md
index 7418c4116..076a3752f 100644
--- a/docs/content/reboot.md
+++ b/docs/content/reboot.md
@@ -21,13 +21,13 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
 - Update some browser default values to use `rem`s instead of `em`s for scalable component spacing.
 - Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
 - For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
-- Keep declarations of `font`-related properties to a minimal, using `inherit` whenever possible.
+- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.
 
 ## Page defaults
 
 The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
 
-- The `box-sizing` is globally set on every element—including `*:before` and `*after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
+- The `box-sizing` is globally set on every element—including `*:before` and `*:after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
 - A base `font-size: 16px` is declared on the `<html>` and `font-size: 1rem` on the `<body>` for easy responsive type-scaling via media queryies.
 - The `<body>` also sets a global `font-family` and `line-height`. This is inherited later by some form elements to prevent font inconsistencies.
 - For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
@@ -111,7 +111,7 @@ The `<pre>` element is reset to remove its `margin-top` and use `rem` units for
 <div class="bd-example">
 {% markdown %}
 <pre>
-.element {
+.example-element {
   margin-bottom: 1rem;
 }
 </pre>
@@ -120,7 +120,7 @@ The `<pre>` element is reset to remove its `margin-top` and use `rem` units for
 
 ## Tables
 
-Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class](/components/tables/).
+Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{ site.baseurl }}/content/tables/).
 
 <div class="bd-example">
   <table>
diff --git a/docs/content/typography.md b/docs/content/typography.md
index 69ead9b83..264686b05 100644
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -4,7 +4,7 @@ title: Typography
 group: content
 ---
 
-Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes](/components/utilities/).
+Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes]({{ site.baseurl }}/components/utilities/).
 
 ## Contents
 
@@ -16,10 +16,10 @@ Bootstrap includes simple and easily customized typography for headings, body te
 Bootstrap sets basic global display, typography, and link styles. Specifically, we:
 
 - Set `background-color: #fff;` on the `<body>`
-- Use the `@font-family-base`, `@font-size-base`, and `@line-height-base` attributes as our typographic base
-- Set the global link color via `@link-color` and apply link underlines only on `:hover`
+- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base
+- Set the global link color via `$link-color` and apply link underlines only on `:hover`
 
-These styles can be found within `scaffolding.less`.
+These styles can be found within `_reboot.scss`.
 
 
 ## Headings
@@ -100,6 +100,13 @@ Traditional heading elements are designed to work best in the meat of your page
   </table>
 </div>
 
+{% highlight html %}
+<h1 class="display-4">Display 4</h1>
+<h1 class="display-3">Display 3</h1>
+<h1 class="display-2">Display 2</h1>
+<h1 class="display-1">Display 1</h1>
+{% endhighlight %}
+
 ## Lead
 
 Make a paragraph stand out by adding `.lead`.
@@ -228,3 +235,33 @@ Align terms and descriptions horizontally by using our grid system's predefined
   <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
 </dl>
 {% endexample %}
+
+## Responsive typography
+
+*Responsive typography* refers to scaling text and components by simply adjusting the root element's `font-size` within a series of media queries. Bootstrap doesn't do this for you, but it's fairly easy to add if you need it.
+
+Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish.
+
+{% highlight scss %}
+html {
+  font-size: 14px;
+}
+
+@include media-breakpoint-up(sm) {
+  html {
+    font-size: 16px;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  html {
+    font-size: 20px;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  html {
+    font-size: 28px;
+  }
+}
+{% endhighlight %}
author	Thomas McDonald <[email protected]>	2015-08-24 16:19:19 -0700
committer	Thomas McDonald <[email protected]>	2015-08-24 16:19:19 -0700
commit	22717a12426af5567f65be1da3d4d968c22276a7 (patch)
tree	491c47f72160c5b1133fa138c1fbacd00e253377 /docs/content
parent	ec523617a3eb6da5b3e14f878931c769999f89a7 (diff)
parent	0da684ff8501768c0ecd4c60c0c7cf043bde1a1d (diff)
download	bootstrap-22717a12426af5567f65be1da3d4d968c22276a7.tar.xz bootstrap-22717a12426af5567f65be1da3d4d968c22276a7.zip