New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 25 commits into from Dec 22, 2016

Conversation

Projects
None yet
@mdo
Member

mdo commented Dec 21, 2016

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 mdo added css v4 labels Dec 21, 2016

@mdo mdo added this to the v4.0.0-alpha.6 milestone Dec 21, 2016

@visualfanatic

This comment has been minimized.

Show comment
Hide comment
@visualfanatic

visualfanatic Dec 21, 2016

That had to be a good feeling removing IE9 crap.

visualfanatic commented Dec 21, 2016

That had to be a good feeling removing IE9 crap.

@nathanielks

This comment has been minimized.

Show comment
Hide comment
@nathanielks

nathanielks Dec 21, 2016

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 ¯_(ツ)_/¯

nathanielks commented Dec 21, 2016

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Dec 21, 2016

Member

@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

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

This comment has been minimized.

Show comment
Hide comment
@nathanielks

nathanielks Dec 21, 2016

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

nathanielks commented Dec 21, 2016

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

@oliviertassinari oliviertassinari referenced this pull request Dec 21, 2016

Merged

[Layout] Add a new component #5808

6 of 6 tasks complete

@mdo mdo referenced this pull request Dec 21, 2016

Merged

v4: Flexbox navbar #21390

4 of 4 tasks complete
@jamieorc

This comment has been minimized.

Show comment
Hide comment
@jamieorc

jamieorc Dec 21, 2016

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

jamieorc commented Dec 21, 2016

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Dec 21, 2016

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@bardiharborow

bardiharborow Dec 22, 2016

Member

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

Member

bardiharborow commented Dec 22, 2016

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

@gnu-user

This comment has been minimized.

Show comment
Hide comment
@gnu-user

gnu-user Dec 22, 2016

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

gnu-user commented Dec 22, 2016

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

phew, redo hella grid docs
- rearrange all the things
- consolidate some bits
@bardiharborow

This comment has been minimized.

Show comment
Hide comment
@bardiharborow

bardiharborow Dec 22, 2016

Member

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

Member

bardiharborow commented Dec 22, 2016

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

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Dec 22, 2016

Member

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

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 added a commit that referenced this pull request Dec 22, 2016

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

@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

This comment has been minimized.

Show comment
Hide comment
@constb

constb Dec 22, 2016

could you please drop ie10 as well? 🙂

constb commented Dec 22, 2016

could you please drop ie10 as well? 🙂

@Lemmmy

This comment has been minimized.

Show comment
Hide comment
@Lemmmy

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

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

This comment has been minimized.

Show comment
Hide comment
@fernandobandeira

fernandobandeira Dec 22, 2016

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 😄

fernandobandeira commented Dec 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@acdha

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

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

This comment has been minimized.

Show comment
Hide comment
@fernandobandeira

fernandobandeira Dec 22, 2016

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

fernandobandeira commented Dec 22, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@Lemmmy

Lemmmy Dec 22, 2016

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.

Lemmmy commented Dec 22, 2016

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 comment has been minimized.

Show comment
Hide comment
@bardiharborow

bardiharborow Dec 22, 2016

Member

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

Member

bardiharborow commented Dec 22, 2016

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

@patrickhlauke

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Dec 22, 2016

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)

Member

patrickhlauke commented Dec 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@pattonwebz

pattonwebz Dec 22, 2016

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 :(

pattonwebz commented Dec 22, 2016

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

This comment has been minimized.

Show comment
Hide comment
@gnu-user

gnu-user Dec 22, 2016

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

gnu-user commented Dec 22, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@pattonwebz

pattonwebz Dec 22, 2016

@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 :(

pattonwebz commented Dec 22, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@xcambar

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

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

This comment has been minimized.

Show comment
Hide comment
@myorangeca

myorangeca Dec 23, 2016

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

myorangeca commented Dec 23, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@pattonwebz

pattonwebz Dec 23, 2016

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

pattonwebz commented Dec 23, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@nateless

nateless Dec 23, 2016

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

nateless commented Dec 23, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@patrickhlauke

patrickhlauke Dec 23, 2016

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

Member

patrickhlauke commented Dec 23, 2016

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

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