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

Merged
merged 25 commits into from Dec 22, 2016

Projects

None yet
@mdo
Member
mdo commented Dec 21, 2016 edited

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.

mdo added some commits Dec 21, 2016
@mdo mdo remove the $enable-flex variable option a5c9ab4
@mdo mdo remove bootstrap-flex.css dist file and it's grunt task 1fcde3f
@mdo mdo remove the separate flex css file for docs; it's all the same now b388f24
@mdo mdo remove flexbox docs (porting some to the main grid docs in next commit) f53744a
@mdo mdo clean up few grid docs bits to simplify copy, start to mention flexbox ceb50e0
@mdo mdo port relevant flexbox-grid.md content to grid.md
- clean up mixins
- update how it works section
- bring over sizing and alignment sections
293b943
@mdo mdo remove the $enable-flex from the options.md page 0cba59b
@mdo mdo update lead paragraph to mention flexbox 96768f1
@mdo mdo update migration to mention loss of ie9 support cd3c0a2
@mdo mdo remove mention of flexbox dist file b8a8138
@mdo mdo clarify IE support 0cd1207
@mdo mdo making a note 0e32111
@mdo mdo 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
ca0f176
@mdo mdo remove $enable-flex if/else from sass files 1a50ffd
@mdo mdo remove flex dist files
66c1fc4
@mdo mdo added css v4 labels Dec 21, 2016
@mdo mdo added this to the v4.0.0-alpha.6 milestone Dec 21, 2016
@mdo mdo update scss lint property order to account for flex properties
5dcaf93
@visualfanatic

That had to be a good feeling removing IE9 crap.

@mdo mdo linting
298f54f
@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.
screen shot 2016-12-08 at 11 20 45 am

This one spanned the width of the widest element it contained, which was the select box.
screen shot 2016-12-08 at 11 20 41 am

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
Member
mdo commented Dec 21, 2016

@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.

screen shot 2016-12-21 at 11 42 40 am

@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.

mdo added some commits Dec 21, 2016
@mdo mdo change to numberless classes for autosizing, wrap in highlighting div
92643e0
@mdo mdo bump gruntfile and postcss to ie10
a23dacd
@jamieorc

By making Flexbox the only option, where does that leave V4 Alpha WRT IE 10 and 11 users?

@mdo
Member
mdo commented Dec 21, 2016

@jamieorc IE10 and IE11 (as well as Microsoft Edge) support flexbox, though there are some known and addressable quirks.

@bardiharborow
Member

Woot! I didn't realise we were pushing flexbox this aggressively, but always happy when we kill off more IE versions.

docs/layout/grid.md
@@ -287,6 +282,241 @@ See it in action in <a href="https://jsbin.com/ruxona/edit?html,output">this ren
</div>
{% endhighlight %}
+## Auto-layout columns
+
+When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and every column will be the same width.
@seanparsons
seanparsons Dec 22, 2016

Isn't it always enabled now?

@gnu-user

Bring an end to IE support, I stand firmly with the angry mob of other web developers that want to see technology evolve, viva la flexbox!

image

mdo added some commits Dec 22, 2016
@mdo mdo redo intro sections 13f2dd9
@mdo mdo rearrange cb9b267
@mdo mdo phew, redo hella grid docs
- rearrange all the things
- consolidate some bits
eb6b6f6
@mdo mdo remove reference to flexbox mode
39c6f70
@mdo mdo more border action for demo
e755679
@bardiharborow
Member

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

@mdo mdo Make some changes to the .card's in .card-deck's to ensure footers al…
…ign to the bottom
40c982e
@mdo
Member
mdo commented Dec 22, 2016

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

@mdo mdo added a commit that referenced this pull request Dec 22, 2016
@mdo mdo 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
eb2e110
@mdo mdo merged commit eb2e110 into v4-dev Dec 22, 2016

3 of 4 checks passed

savage Savage has initiated its special separate Travis CI build
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
hound No violations found. Woof!
@mdo mdo deleted the flex branch Dec 22, 2016
@mdo mdo referenced this pull request Dec 22, 2016
Closed

v4 Alpha 6 ship list #20939

@constb
constb commented Dec 22, 2016

could you please drop ie10 as well? 🙂

@Lemmmy
Lemmmy commented Dec 22, 2016

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
fernandobandeira commented Dec 22, 2016 edited

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
acdha commented Dec 22, 2016

@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
fernandobandeira commented Dec 22, 2016 edited

@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
Lemmmy commented Dec 22, 2016 edited

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
Member

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

@patrickhlauke
Member

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
pattonwebz commented Dec 22, 2016 edited

@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
xcambar commented Dec 23, 2016

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.

@myorangeca

@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
Member

...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 :)

@patrickhlauke patrickhlauke locked and limited conversation to collaborators Dec 23, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.