From 3e76d6565603fafa2c85ad81d7b6345c4e279c72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 28 May 2017 22:50:57 -0700 Subject: Rearrange all the docs to allow for a docs/major.minor/ setup --- docs/getting-started/accessibility.md | 53 --------- docs/getting-started/best-practices.md | 19 --- docs/getting-started/browsers-devices.md | 196 ------------------------------- docs/getting-started/build-tools.md | 55 --------- docs/getting-started/contents.md | 44 ------- docs/getting-started/download.md | 94 --------------- docs/getting-started/introduction.md | 118 ------------------- docs/getting-started/javascript.md | 122 ------------------- docs/getting-started/options.md | 42 ------- docs/getting-started/webpack.md | 99 ---------------- 10 files changed, 842 deletions(-) delete mode 100644 docs/getting-started/accessibility.md delete mode 100644 docs/getting-started/best-practices.md delete mode 100644 docs/getting-started/browsers-devices.md delete mode 100644 docs/getting-started/build-tools.md delete mode 100644 docs/getting-started/contents.md delete mode 100644 docs/getting-started/download.md delete mode 100644 docs/getting-started/introduction.md delete mode 100644 docs/getting-started/javascript.md delete mode 100644 docs/getting-started/options.md delete mode 100644 docs/getting-started/webpack.md (limited to 'docs/getting-started') diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md deleted file mode 100644 index f16686f98..000000000 --- a/docs/getting-started/accessibility.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -layout: docs -title: Accessibility -description: A brief overview of Bootstrap's features and limitations for the creation of accessible content. -group: getting-started -toc: true ---- - -Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create web sites and applications that are visually appealing, functionally rich, and accessible out of the box. - -## Overview and limitations - -The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create web sites and applications with Bootstrap that fulfill [WCAG 2.0](https://www.w3.org/TR/WCAG20/) (A/AA/AAA), [Section 508](https://www.section508.gov/) and similar accessibility standards and requirements. - -### Structural markup - -Bootstrap's styling and layout can be applied to a wide range of markup structures. This documentation aims to provide developers with best practice examples to demonstrate the use of Bootstrap itself and illustrate appropriate semantic markup, including ways in which potential accessibility concerns can be addressed. - -### Interactive components - -Bootstrap's interactive components—such as modal dialogs, dropdown menus and custom tooltips—are designed to work for touch, mouse and keyboard users. Through the use of relevant [WAI ARIA](https://www.w3.org/WAI/intro/aria) roles and attributes, these components should also be understandable and operable using assistive technologies (such as screen readers). - -Because Bootstrap's components are purposely designed to be fairly generic, authors may need to include further ARIA roles and attributes, as well as JavaScript behavior, to more accurately convey the precise nature and functionality of their component. This is usually noted in the documentation. - -### Color contrast - -Most colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—lead to *insufficient* color contrast (below the recommended [WCAG 2.0 color contrast ratio of 4.5:1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)) when used against a light background. Authors will need to manually modify/extend these default colors to ensure adequate color contrast ratios. - -### Visually hidden content - -Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.sr-only` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users. - -{% highlight html %} -

- Danger: - This action is not reversible -

-{% endhighlight %} - -For visually hidden interactive controls, such as traditional "skip" links, `.sr-only` can be combined with the `.sr-only-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). - -{% highlight html %} -Skip to main content -{% endhighlight %} - -## Additional resources - -- [Web Content Accessibility Guidelines (WCAG) 2.0](https://www.w3.org/TR/WCAG20/) -- [The A11Y Project](http://a11yproject.com/) -- [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility) -- [Tenon.io Accessibility Checker](https://tenon.io/) -- [Colour Contrast Analyser (CCA)](https://www.paciellogroup.com/resources/contrastanalyser/) -- ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer) diff --git a/docs/getting-started/best-practices.md b/docs/getting-started/best-practices.md deleted file mode 100644 index 0e4792513..000000000 --- a/docs/getting-started/best-practices.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: docs -title: Best practices -description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap. -group: getting-started ---- - -We've designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves. - -{% callout info %} -**Heads up!** This copy is a work in progress. -{% endcallout %} - -### General outline -- Working with CSS -- Working with Sass files -- Building new CSS components -- Working with flexbox -- Ask in [Slack](https://bootstrap-slack.herokuapp.com/) diff --git a/docs/getting-started/browsers-devices.md b/docs/getting-started/browsers-devices.md deleted file mode 100644 index 9fe08bbb6..000000000 --- a/docs/getting-started/browsers-devices.md +++ /dev/null @@ -1,196 +0,0 @@ ---- -layout: docs -title: Browsers and devices -description: Learn about the browsers and devices, from modern to told, that are supported by Bootstrap, including known quirks and bugs for each. -group: getting-started -toc: true ---- - -## Supported browsers - -Bootstrap supports the **latest, stable releases** of all major browsers and platforms. On Windows, **we support Internet Explorer 10-11 / Microsoft Edge**. - -Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform's web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below. - -### Mobile devices - -Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ChromeFirefoxSafariAndroid Browser & WebViewMicrosoft Edge
AndroidSupportedSupportedN/AAndroid v5.0+ supportedN/A
iOSSupportedSupportedSupportedN/AN/A
Windows 10 MobileN/AN/AN/AN/ASupported
- -### Desktop browsers - -Similarly, the latest versions of most desktop browsers are supported. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ChromeFirefoxInternet ExplorerMicrosoft EdgeOperaSafari
MacSupportedSupportedN/AN/ASupportedSupported
WindowsSupportedSupportedSupported, IE10+SupportedSupportedNot supported
- -For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/organizations/faq/) version of Firefox. - -Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 9, though they are not officially supported. - -For a list of some of the browser bugs that Bootstrap has to grapple with, see our [Wall of browser bugs]({{ site.baseurl }}/browser-bugs/). - -## Internet Explorer - -Internet Explorer 10+ is supported; IE9 and down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported in IE10, or require prefixed properties for full functionality. Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features. - -**If you require IE8-9 support, use Bootstrap 3.** It's the most stable version of our code and is still supported by our team for critical bugfixes and documentation changes. However, no new features will be added to it. - -## Internet Explorer 10 in Windows Phone 8 - -Internet Explorer 10 in Windows Phone 8 versions older than [Update 3 (a.k.a. GDR3)](https://blogs.windows.com/buildingapps/2013/10/14/introducing-windows-phone-preview-for-developers/) 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-2017 The Bootstrap Authors -// Copyright 2014-2017 Twitter, Inc. -// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) -if (navigator.userAgent.match(/IEMobile\/10\.0/)) { - var msViewportStyle = document.createElement('style') - msViewportStyle.appendChild( - document.createTextNode( - '@-ms-viewport{width:auto!important}' - ) - ) - document.head.appendChild(msViewportStyle) -} -{% endhighlight %} - -For more information and usage guidelines, read [Windows Phone 8 and Device-Width](https://timkadlec.com/2013/01/windows-phone-8-and-device-width/). - -As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration. - -## Modals and dropdowns on mobile - -### Overflow and scrolling - -Support for `overflow: hidden;` on the `` element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the `` content will begin to scroll. See [Chrome bug #175502](https://bugs.chromium.org/p/chromium/issues/detail?id=175502) (fixed in Chrome v40) and [WebKit bug #153852](https://bugs.webkit.org/show_bug.cgi?id=153852). - -### iOS text fields and scrolling - -As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual `` or a `