From 287fdf83818da096559b7c56732e1bc41c25418e Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 6 Aug 2013 15:21:26 -0700
Subject: fixes #9162: add mention of Windows Phone 8 and IE10 bugs with
 responsive foo

---
 getting-started.html | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

(limited to 'getting-started.html')

diff --git a/getting-started.html b/getting-started.html
index ef0bdbf53..4f60acc7d 100644
--- a/getting-started.html
+++ b/getting-started.html
@@ -149,6 +149,29 @@ bootstrap/
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 {% endhighlight %}
     <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
+
+    <h3>Windows Phone 8 and Internet Explorer 10</h3>
+    <p>Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.</p>
+{% highlight css %}
+@-webkit-viewport   { width: device-width; }
+@-moz-viewport      { width: device-width; }
+@-ms-viewport       { width: device-width; }
+@-o-viewport        { width: device-width; }
+@viewport           { width: device-width; }
+{% endhighlight %}
+
+{% highlight js %}
+if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+  var msViewportStyle = document.createElement("style");
+  msViewportStyle.appendChild(
+    document.createTextNode(
+      "@-ms-viewport{width:auto!important}"
+    )
+  );
+  document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
+}
+{% endhighlight %}
+    <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a></p>
   </div>
 
 
-- 
cgit v1.2.3


From 726bc028857ad9e5a9e6255cd9a638b051ad8ba7 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 6 Aug 2013 15:52:06 -0700
Subject: For @cvrebert

---
 getting-started.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'getting-started.html')

diff --git a/getting-started.html b/getting-started.html
index 4f60acc7d..ee9da8629 100644
--- a/getting-started.html
+++ b/getting-started.html
@@ -171,7 +171,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
   document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
 }
 {% endhighlight %}
-    <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a></p>
+    <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
   </div>
 
 
-- 
cgit v1.2.3


From f3bf32ffc51c1bafd60f5704a638fc56cf464386 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 6 Aug 2013 16:30:28 -0700
Subject: add third party support section to the docs

---
 getting-started.html | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

(limited to 'getting-started.html')

diff --git a/getting-started.html b/getting-started.html
index ef0bdbf53..26787ab34 100644
--- a/getting-started.html
+++ b/getting-started.html
@@ -120,11 +120,11 @@ bootstrap/
 
 
 
-  <!-- Browser compatibility
+  <!-- Browser support
   ================================================== -->
   <div class="bs-docs-section">
     <div class="page-header">
-      <h1 id="browsers">Browser compatibility</h1>
+      <h1 id="browsers">Browser support</h1>
     </div>
     <p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.</p>
 
@@ -153,6 +153,37 @@ bootstrap/
 
 
 
+  <!-- Third party support
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="page-header">
+      <h1 id="third-parties">Third party support</h1>
+    </div>
+    <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid some potential issues in your projects.</p>
+
+    <h3>Google Maps</h3>
+    <p>If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of <code>* { box-sizing: border-box; }</code>. Previously, you may have also ran into issues with the use of <code>max-width</code> on images. The following snippet should avoid all those problems.</p>
+{% highlight css %}
+/* Fix Google Maps canvas
+ *
+ * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
+ * global `box-sizing` changes. You may optionally need to reset the `max-width`
+ * on images in case you've applied that anywhere else. (That shouldn't be as
+ * necessary with Bootstrap 3 though as that behavior is relegated to the
+ * `.img-responsive` class.)
+ */
+
+.google-map-canvas,
+.google-map-canvas * { .box-sizing(content-box); }
+
+/* Optional responsive image override */
+img { max-width: none; }
+{% endhighlight %}
+  </div>
+
+
+
+
   <!-- License FAQs
   ================================================== -->
   <div class="bs-docs-section">
-- 
cgit v1.2.3


From dbde90ec0dc28aea7d9bdb337fd8f621011f2054 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Tue, 6 Aug 2013 17:46:40 -0700
Subject: some copy editing

---
 getting-started.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'getting-started.html')

diff --git a/getting-started.html b/getting-started.html
index 480931f3b..38b6f4ed4 100644
--- a/getting-started.html
+++ b/getting-started.html
@@ -182,7 +182,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
     <div class="page-header">
       <h1 id="third-parties">Third party support</h1>
     </div>
-    <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid some potential issues in your projects.</p>
+    <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid potential issues in your projects.</p>
 
     <h3>Google Maps</h3>
     <p>If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of <code>* { box-sizing: border-box; }</code>. Previously, you may have also ran into issues with the use of <code>max-width</code> on images. The following snippet should avoid all those problems.</p>
-- 
cgit v1.2.3


From a8d95d4721e714a7e1d683e14e997faa5ccddaff Mon Sep 17 00:00:00 2001
From: adamjacobbecker <ad@mbecker.cc>
Date: Tue, 6 Aug 2013 21:25:36 -0700
Subject: Improve accessibility (Section 508, WCAG)

This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices.

What was done
- Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria)
- Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users.
- Advised users to always use label elements. For inline forms, they can hide them with `.sr-only`
- Added 'Skip navigation' link
- Added "Accessibility" section to getting-started.html.

What *wasn't* done
- Contrast issues (twbs#3572)
- Tooltips (twbs#8469)
- Documentation re: usage of icons, since they now live in a separate repo

Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out.
---
 getting-started.html | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

(limited to 'getting-started.html')

diff --git a/getting-started.html b/getting-started.html
index 38b6f4ed4..fc03a7ac4 100644
--- a/getting-started.html
+++ b/getting-started.html
@@ -206,6 +206,39 @@ img { max-width: none; }
 
 
 
+  <!-- Accessibility
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="page-header">
+      <h1 id="accessibility">Accessibility</h1>
+    </div>
+    <p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to users using assistive technology (AT). However, it's useful to take the following into consideration:</p>
+
+    <p>If your navigation contains many links and comes before your main content in the DOM, add a <code>Skip to content</code> link immediately after your opening <code>body</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
+
+{% highlight html %}
+<body>
+  <a href="#content" class="sr-only">Skip to content</a>
+  ...
+  <div class="container" id="content">
+    The main page content.
+  </div>
+  ...
+</body>
+{% endhighlight %}
+
+    <p>Another "gotcha" has to do with how you nest your <code>header</code> elements. <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">Section 508</a> states that your largest header must be an <code>h1</code>, and the next header must be an <code>h2</code>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.</p>
+
+    <h4>Resources</h4>
+    <ul>
+      <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
+      <li><a href="http://a11yproject.com/">The A11Y Project</a></li>
+      <li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
+    </ul>
+  </div>
+
+
+
 
   <!-- License FAQs
   ================================================== -->
-- 
cgit v1.2.3


From fef413f9970c6985d4f11c08056d991bd3ed3e31 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 7 Aug 2013 00:28:23 -0700
Subject: copy changes

---
 getting-started.html | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

(limited to 'getting-started.html')

diff --git a/getting-started.html b/getting-started.html
index fc03a7ac4..3bd6c0272 100644
--- a/getting-started.html
+++ b/getting-started.html
@@ -212,24 +212,23 @@ img { max-width: none; }
     <div class="page-header">
       <h1 id="accessibility">Accessibility</h1>
     </div>
-    <p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to users using assistive technology (AT). However, it's useful to take the following into consideration:</p>
-
-    <p>If your navigation contains many links and comes before your main content in the DOM, add a <code>Skip to content</code> link immediately after your opening <code>body</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
+    <p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
 
+    <h3>Skip navigation</h3>
+    <p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to content</code> link immediately after your opening <code>&lt;body&gt;</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
 {% highlight html %}
 <body>
   <a href="#content" class="sr-only">Skip to content</a>
-  ...
   <div class="container" id="content">
     The main page content.
   </div>
-  ...
 </body>
 {% endhighlight %}
 
-    <p>Another "gotcha" has to do with how you nest your <code>header</code> elements. <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">Section 508</a> states that your largest header must be an <code>h1</code>, and the next header must be an <code>h2</code>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.</p>
+    <h3>Nested headers</h3>
+    <p>Another "gotcha" has to do with how you nest your <code>&lt;header&gt;</code> elements. <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">Section 508</a> states that your largest header must be an <code>h1</code>, and the next header must be an <code>&lt;h2&gt;</code>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.</p>
 
-    <h4>Resources</h4>
+    <h3>Additional resources</h3>
     <ul>
       <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
       <li><a href="http://a11yproject.com/">The A11Y Project</a></li>
@@ -239,7 +238,6 @@ img { max-width: none; }
 
 
 
-
   <!-- License FAQs
   ================================================== -->
   <div class="bs-docs-section">
-- 
cgit v1.2.3