From eb2e1102be0f4641ee3e5c4e7853360d5a04e3d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 21 Dec 2016 20:26:17 -0800 Subject: Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389) * remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom --- docs/getting-started/best-practices.md | 1 + docs/getting-started/browsers-devices.md | 12 ++++---- docs/getting-started/download.md | 2 +- docs/getting-started/flexbox.md | 52 -------------------------------- docs/getting-started/options.md | 1 - 5 files changed, 8 insertions(+), 60 deletions(-) delete mode 100644 docs/getting-started/flexbox.md (limited to 'docs/getting-started') diff --git a/docs/getting-started/best-practices.md b/docs/getting-started/best-practices.md index 0bb53b709..0e4792513 100644 --- a/docs/getting-started/best-practices.md +++ b/docs/getting-started/best-practices.md @@ -15,4 +15,5 @@ We've designed and developed Bootstrap to work in a number of environments. Here - 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 index d21024594..6273a0f31 100644 --- a/docs/getting-started/browsers-devices.md +++ b/docs/getting-started/browsers-devices.md @@ -94,7 +94,7 @@ Similarly, the latest versions of most desktop browsers are supported. Windows Supported Supported - Supported + Supported, IE10+ Supported Supported Not supported @@ -109,9 +109,9 @@ Unofficially, Bootstrap should look and behave well enough in Chromium and Chrom 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 9 & 10 +## Internet Explorer -Internet Explorer 9 & 10 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported. +Internet Explorer 10+ is supported, however, IE9 down is not. Please be aware that some CSS3 properties and HTML5 elements are not fully supported.
@@ -144,11 +144,11 @@ Internet Explorer 9 & 10 are also supported, however, please be aware that some Visit [Can I use...](http://caniuse.com/) for details on browser support of CSS3 and HTML5 features. -## Supporting Internet Explorer 8 +## Supporting Internet Explorer 8-9 -As of v4, Bootstrap no longer supports IE8. **If you require IE8 support, we recommend you use Bootstrap 3.** It's still supported by our team for bugfixes and documentation changes, but no new features will be added to it. +As of v4, Bootstrap no longer supports IE8 or IE9. **If you require IE8-9 support, we recommend you use Bootstrap 3.** It's still supported by our team for bugfixes and documentation changes, but no new features will be added to it. -Alternatively, you may add some third party JavaScript to backfill support for IE8 to Bootstrap 4. You'll need the following: +Alternatively, you may add some third party JavaScript to backfill support for IE8-9 to Bootstrap 4. You'll need the following: * [The HTML5 shiv](https://en.wikipedia.org/wiki/HTML5_Shiv) * [Respond.js](https://github.com/scottjehl/Respond) diff --git a/docs/getting-started/download.md b/docs/getting-started/download.md index 31e90adf0..b85e26fe6 100644 --- a/docs/getting-started/download.md +++ b/docs/getting-started/download.md @@ -14,7 +14,7 @@ group: getting-started ## Bootstrap CSS and JS -**Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, flexbox-enabled, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files. +**Download Bootstrap's ready-to-use code to easily drop into your project.** Includes compiled and minified versions of all our CSS bundles (default, grid only, or Reboot only) and JavaScript plugins. Doesn't include documentation or source files. Download Bootstrap diff --git a/docs/getting-started/flexbox.md b/docs/getting-started/flexbox.md deleted file mode 100644 index f0acc3dcb..000000000 --- a/docs/getting-started/flexbox.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -layout: docs -title: Flexbox -description: Learn how to enable flexbox support in Bootstrap 4 with the flick of a variable or the swap of a stylesheet. -group: getting-started ---- - -Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## What's included - -Flexbox support is available for a number of Bootstrap's components: - -- The entire grid system (mixins and predefined classes), which switch from `float`s to `display: flex;`. -- 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](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? - -In a nutshell, flexbox provides simpler and more flexible layout options in CSS. More specifically, it provides: - -- Easy vertical alignment of content within a parent element. -- Easy reordering of content across devices and screen resolutions with the help of media queries. -- Easy CSS-only equal height columns for your grid-based layouts. - -All these things are possible outside flexbox, but typically require extra hacks and workarounds to do right. - -## How it works - -If you're familiar with modifying variables in Sass—or any other CSS preprocessor—you'll be right at home to move into flexbox mode. - -1. Open the `_variables.scss` file and find the `$enable-flex` variable. -2. Change it from `false` to `true`. -3. Recompile, and done! - -Alternatively, if you don't need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. [Head to the download page]({{ site.baseurl }}/getting-started/download/) for more information. - -## Browser support - -Enabling flexbox means **reduced browser and device support:** - -- Internet Explorer 9 and below do not support flexbox. -- Internet Explorer 10 has a few known quirks (see the "Known issues" tab in [Can I use...](http://caniuse.com/#feat=flexbox)), requires using a prefix, and only supports the syntax from the old 2012 version of the spec. - -Please be extra conscious of your user base when enabling flexbox in your project. Visit [Can I use...](http://caniuse.com/#feat=flexbox) for details on browser support of flexbox. diff --git a/docs/getting-started/options.md b/docs/getting-started/options.md index 7fddc9c09..b8dc3b583 100644 --- a/docs/getting-started/options.md +++ b/docs/getting-started/options.md @@ -32,7 +32,6 @@ You can find and customize these variables for key global options in our `_varia | Variable | Values | Description | | --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | | `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value for our spacer utilities. | -| `$enable-flex` | `true` or `false` (default) | Swaps `float` and `display: table` styles for `display: flex`. | | `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | | `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | | `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | -- cgit v1.2.3