Flexbox all the time (Drop IE9 support and remove $enable-flex option)

[mdo]

With this PR, flexbox becomes the default layout option for Bootstrap 4. Our grid system and several components are now built with flexbox to start instead of having opt-in behavior via $enable-flex. That Sass variable has been removed, Sass files cleaned up, docs consolidated, and migration and browser support notes updated. Beyond the flexbox changes, there are no additional changes to the compiled CSS at this time.

Here's specifically what's changed:

• Removed the $enable-flex variable. Flexbox is now enabled by default and cannot be disabled via Sass variable.
• Removed the non-flexbox variants for our grid system, cards, media objects, list groups, and navigation components.
  • For the grid, there should be no breaking changes to your code. You can, however, take advantage of the flexbox auto layout and alignment options though!
  • For cards, this means you can now drop .card-deck-wrapper from your markup.
  • For media objects, this means you can be more flexible with the order of your markup (e.g., .media-left and .media-right don't need to come first in the DOM.)
  • For list groups, this simplifies the alignment of badges. No more required utilities just to vertically and horizontally align badges in list group items. (You might still need some for fine-tuning, though).
• Consolidated grid docs to a single grid.md file (no more flexbox-grid.md.) This still needs some finessing as the docs don't flow as seamlessly as I'd like. For now, at least all the flexbox alignment and sizing docs have been ported over to the main grid docs.
• Updated migration and browser support docs to clarify IE10+ support.
• Removed the compiled flexbox CSS bundles. The Gruntfile has had it's Sass tasks updated and the dist files have been removed from Git.
• Removed flexbox.md docs from the Getting started section.

Because of these changes, here's what's been modified in the compiled CSS:

• Clearfix has been removed from rows as it's no longer necessary with no floats being present.
• Columns use max-width instead of width. While this was the case for the flexbox grid before this change, it's different from the default grid's use of width.

It's also worth noting that some components are still not built with flexbox; this PR doesn't address that. We'll tackle that later across the following components:

• Carousel
• Navbar
• Button groups
• Cards

More on that in the coming days!

---

Fixes #21387.

[damianstasik]

That had to be a good feeling removing IE9 crap.

[nathanielks]

Both a question and some feedback: I used the flexbox grid as a grid for main content layout and it worked pretty well, as long as the content inside filled the space. If the content inside the element wasn't as wide or wider than the column spanned, the column only took up the space of the content inside. I'm not sure that's totally making sense, so here are some screenshots:

This one worked fine because the password text field spanned the whole width of the column and wrapped.

This one spanned the width of the widest element it contained, which was the select box.

Going back to the default grid worked 👌 . Forcing the use of the flexbox grid may not be 💯, unless of course I was doing something wrong, but I don't believe I was ¯_(ツ)_/¯

[mdo]

@nathanielks I can't help you with only screenshots I'm afraid :). If you have a specific problem with the flex grid, please open a new issue with a test case that I can peep. I think you should be okay with the flex grid based on how this example grid page renders this. Note that the sm classes are full-width here in the xs breakpoint without an additional class.

[nathanielks]

@mdo indeed, and no worries! I moved on and all was well. Just wanted to post as I imagine other users will encounter the same issue.

[bardiharborow]

I'm preparing commits (e57799c) to remove the rest of the IE9 cruft once this lands.

[mdo]

@bardiharborow About to merge this in; feel free to open a new PR whenever you're ready <3.

[constb]

could you please drop ie10 as well? 🙂

[Lemmmy]

IE10 support was dropped alongside IE9 and IE8 on Jan 12, so I think it should be dropped, but I'm not sure of the statistics involved.

[fernandobandeira]

https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0

IE10 0.95% (worth dropping but there's no need i think)
IE9 5.28% (let's hope this goes down)

It's time to start yelling at your friends and relatives that are using the old IE9 and tell them to switch to chrome so we get that down before the bootstrap 4 release 😄

[acdha]

@fernandobandiera I've never found netmarketshare.com's figures to be representative of real traffic — the reported IE share has consistently been 2-3 times greater than actual measured traffic for years. That's probably due to their weighting system but since the details of that are secret I would look for sources like https://analytics.wikimedia.org/dashboards/browsers/ or the community.

[fernandobandeira]

@acdha You can be right, I think that these shares are impacted geographically, in Brazil for example IE is pretty common, that's because some banks force you to access their internet banking using IE for example thus ppl just stick with it by default, so I guess that these share's will always differ depending on the region that they are being tested... I'm also 👍 for dropping it anyways 😄

[Lemmmy]

According to that site, from Jan 2016 to Dec 2016:

IE Version	Percentage of traffic (on wikimedia)
11	6.1%
10	0.6%
9	0.8%
8	0.6%
7	1.6%
6	0.5%

In order of traffic:

IE Version	Percentage of traffic (on wikimedia)
11	6.1%
7	1.6%
9	0.8%
10	0.6%
8	0.6%
6	0.5%

Supporting IE 11 should be fine, since it implements flexbox properly (apart from invalid flex: 1 defaults), but if we are dropping IE 9, then IE 10 should be dropped too.

[bardiharborow]

This isn't really the place to be discussing dropping IE10. Please open a new issue.

[patrickhlauke]

Indeed (though I'll add that the only stats that matter are the ones from your own site - anecdotally, on sites aimed at government that I maintain, we still see use of IE<11 reaching around 7%...so by all means, feel free to do whatever you want on your own projects, but don't assume that global traffic stats or even stats relating to your own project are an absolute indicator)

[pattonwebz]

I truly want everyone to use latest (or at least recent) versions of their browser but they don't. Hesitant to say dropping support entirely is definitely the right thing...

My personal sites and projects show 0.8% used IE9 or earlier in the last 6 months. That's a very small percentage but still amounts to thousands of people.

As others point out though my own stats are not representative of the internet as a whole. On my client sites I see very different results and far higher use of older browsers. On 1 client site I see 4% use IE<=9 over 6 months, I also see 4% over 12 months - that suggest to me that those users are not upgrading.

What I'm getting at is that me, personally, I say a big YUP to dropping support because I want people to upgrade. My issue is that I know most of those users on older browsers are either unable to upgrade our have no inclination to do so :(

[gnu-user]

@pattonwebz If you keep pandering to people that use outdated browsers they will never see the need to upgrade, there are a lot of online services when accessed that will inform you that you need to update your browser, there is really very little excuse for someone not to install a new browser nowadays.

For example with my sites there is a lot of mobile and Chrome traffic, I don't even get 0.01% of IE traffic, so it definitely varies based on the category. Also, it seems that a lot of people discussing the backwards support are forgetting that you can use graceful degradation and simply keep using Bootstrap 3 for those that are unsupported by Bootstrap 4.

[pattonwebz]

@gnu-user or course I want them to upgrade - even if some gentle nudging, or even forceful pushing, is needed lol

Gracefully degrading to BS3 seems way more cumbersome to do considering there are so many changes classes and new ones. I see no way to simply degrade to (would require more work than simply adding back in CSS support) it when users don't support BS4.

There are still some legitimate reasons why someone would be stuck with an older browser though and I feel those are very much worth discussing and considering so the best choice (which likely is dropping support from the sounds of it) can be made.

One reason may be that in a corporate situation XP might be needed as part of a legacy system and could be too costly to upgrade, either because of the cost of hardware/software or due to the need for retaining.

Another reason could be someone not able to install software due to administrative privileges.

I realise that I may be playing devil's advocate here but I'm just trying to be sure that all situations are considered. I don't feel that simply telling users to upgrade will make them do so. I also think that if I prominently told users that they NEED to upgrade to properly view/interact with my sites those users would decide that they don't need to use my site at all and just find what they need elsewhere :(

[xcambar]

As much as I'd like the world to stop using IE9/10, I'd like to offer a reality check from a "business software" perspective.
When you have to deal with big clients who will only grant access to your service in the boundaries of their network (30k+ Windows machines), the stats offered above are completely off: it can be as drastic as 100% IE9.
The only reason in these cases for an upgrade to a newer version is not by "telling your friends", it comes from the official end of support by MS itself. And these upgrades are costly... Much more costly than you can guess at first, unfortunately.

For these situations, thinking of dropping IE10 before the official end of support means forcing devs to drop Bootstrap from a rather large chunk of (big) projects and software.

[myplaneticket]

@xcambar I second this. I have many clients who still uses IE9; most government websites and big businesses are still on earlier versions of IE. Bootstrap may lose its popularity if this is done. I am all for technology and moving forward but kindly think about this a little more deeply.

[pattonwebz]

@xcambar +1 for that. Every large business I've worked for in the last year still used IE9/10, including government institutions in both the UK and US. Many of my current projects would not be suitable for BS4 is IE9 support is dropped entirely.

[nateless]

@pattonwebz, use V3, what's the problem? We see less than 1% of users on our websites with IE <= 9, we can afford to loose them by providing more progressive service. Tho I agree that some sites, like gov's should support even old browsers, but this isn't mainstream and can't slowdown all the rest.

[patrickhlauke]

...and on that, I think we've all aired the varying opinions on this. Please feel free to open new issues/tickets regarding browser support policy decisions :)