aboutsummaryrefslogtreecommitdiff
path: root/docs/getting-started
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2016-07-23 21:05:18 -0700
committerMark Otto <[email protected]>2016-07-23 21:05:18 -0700
commit7fd00263e35f891bfc792f9dd12c17a5025cd93c (patch)
tree28d07418fb7abfacccb317b501937e02ffccf096 /docs/getting-started
parentd4457b33032d2540a4a3b7fa600f22055ce2000d (diff)
parent38312640df9c4b84a47e62d7dfeb16b25049aafb (diff)
downloadbootstrap-7fd00263e35f891bfc792f9dd12c17a5025cd93c.tar.xz
bootstrap-7fd00263e35f891bfc792f9dd12c17a5025cd93c.zip
Merge branch 'v4-dev' into v4-navbars
Diffstat (limited to 'docs/getting-started')
-rw-r--r--docs/getting-started/accessibility.md4
-rw-r--r--docs/getting-started/browsers-devices.md9
-rw-r--r--docs/getting-started/build-tools.md2
-rw-r--r--docs/getting-started/download.md6
-rw-r--r--docs/getting-started/flexbox.md2
5 files changed, 9 insertions, 14 deletions
diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md
index 147d9305e..43dee3569 100644
--- a/docs/getting-started/accessibility.md
+++ b/docs/getting-started/accessibility.md
@@ -22,10 +22,10 @@ In addition, groups and toolbars should be given an explicit label, as most assi
## Skip navigation
-If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links/)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
+If your navigation contains many links and comes before the main content in the DOM, add a `Skip to main content` link before the navigation (for a simple explanation, see this [A11Y Project article on skip navigation links](http://a11yproject.com/posts/skip-nav-links)). Using the `.sr-only` class will visually hide the skip link, and the <code>.sr-only-focusable</code> class will ensure that the link becomes visible once focused (for sighted keyboard users).
{% callout danger %}
-Due to long-standing shortcomings/bugs in Chrome (see [issue 454172 in the Chromium bug tracker](https://code.google.com/p/chromium/issues/detail?id=454172 "Chromium bug tracker - Issue 454172: Focus Link Target (sequential focus navigation starting point)")) and Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
+Due to long-standing shortcomings/bugs in Internet Explorer (see this article on [in-page links and focus order](http://accessibleculture.org/articles/2010/05/in-page-links/)), you will need to make sure that the target of your skip link is at least programmatically focusable by adding `tabindex="-1"`.
In addition, you may want to explicitly suppress a visible focus indication on the target (particularly as Chrome currently also sets focus on elements with `tabindex="-1"` when they are clicked with the mouse) with `#content:focus { outline: none; }`.
diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md
index 497553610..a73ec8982 100644
--- a/docs/getting-started/browsers-devices.md
+++ b/docs/getting-started/browsers-devices.md
@@ -174,6 +174,7 @@ See [this StackOverflow question](https://stackoverflow.com/questions/6771258/wh
Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx) doesn't differentiate **device width** from **viewport width** in `@-ms-viewport` at-rules, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you'll need to **include the following JavaScript to work around the bug**.
{% highlight js %}
+// Copyright 2014-2015 The Bootstrap Authors
// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
@@ -218,13 +219,7 @@ Bootstrap includes a workaround for this, although it is disabled by default. By
Even in some modern browsers, printing can be quirky.
-In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See [issue #12078](https://github.com/twbs/bootstrap/issues/12078) and [Chrome bug #273306](https://bugs.chromium.org/p/chromium/issues/detail?id=273306) for some details. Suggested workarounds:
-
-* Embrace the extra-small grid and make sure your page looks acceptable under it.
-* Customize the value of the `$grid-breakpoints` Sass variable so that your printer paper is considered larger than extra-small.
-* Add custom media queries to change the grid size breakpoints for print media only.
-
-Also, as of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS:
+As of Safari v8.0, use of the fixed-width `.container` class can cause Safari to use an unusually small font size when printing. See [issue #14868](https://github.com/twbs/bootstrap/issues/14868) and [WebKit bug #138192](https://bugs.webkit.org/show_bug.cgi?id=138192) for more details. One potential workaround is the following CSS:
{% highlight css %}
@media print {
diff --git a/docs/getting-started/build-tools.md b/docs/getting-started/build-tools.md
index c086c036b..2fe10088b 100644
--- a/docs/getting-started/build-tools.md
+++ b/docs/getting-started/build-tools.md
@@ -46,7 +46,7 @@ For example, run `TWBS_SASS=sass grunt` to test and build Bootstrap with Ruby Sa
Bootstrap uses [Autoprefixer][autoprefixer] (included in our Gruntfile and build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
-We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/grunt/autoprefixer-settings.json`](https://github.com/twbs/bootstrap/blob/master/grunt/autoprefixer-settings.js) for details.
+We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [`/grunt/postcss.js`](https://github.com/twbs/bootstrap/blob/master/grunt/postcss.js) for details.
## Local documentation
diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md
index 1fa524eb5..37fbbaa59 100644
--- a/docs/getting-started/download.md
+++ b/docs/getting-started/download.md
@@ -21,7 +21,7 @@ Download just the compiled and minified CSS and JavaScript. Doesn't include any
<div class="col-sm-6">
{% markdown %}
### Source files
-Download everything: source Sass, JavaScript, and documentation files. **Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup).**
+Download everything: source Sass, JavaScript, and documentation files. **Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup).**
<a href="{{ site.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
{% endmarkdown %}
@@ -30,7 +30,7 @@ Download everything: source Sass, JavaScript, and documentation files. **Require
## Package managers
-Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
+Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes)** for a setup that matches our official compiled versions.
{% callout warning %}
**Heads up!** Not all package managers have the v4 alpha published yet, but we should have them up shortly!
@@ -78,7 +78,7 @@ $ meteor add twbs:bootstrap@={{ site.current_version }}
You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org):
{% highlight bash %}
-$ composer require twbs/bootstrap
+$ composer require twbs/bootstrap:{{ site.current_version }}
{% endhighlight %}
### Bower
diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md
index f8ab4e8ae..9c0f1a876 100644
--- a/docs/getting-started/flexbox.md
+++ b/docs/getting-started/flexbox.md
@@ -19,7 +19,7 @@ Flexbox support is available for a number of Bootstrap's components:
- Input groups, which move from `display: table;` to `display: flex;`.
- The media component moves from `display: table;` and a number of hacky styles to a simple `display: flex;`.
-Vendor prefixes are provided in our compiled CSS with Autoprefixer via Grunt.
+Vendor prefixes are provided in our compiled CSS with [Autoprefixer](https://github.com/postcss/autoprefixer) via Grunt. Some bugs in IE10-11's Flexbox implementation are worked around via [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes).
## Why flexbox?