Bootstrap 4 drops IE9 support and goes full flexbox (opens in new tab)

You went further than I did with foundation.

Tutorials takes me to a bunch of videos (ugh - no text to search?)

http://foundation.zurb.com/learn/tutorials.html

The top 6 videos as I scroll down are all something to do with email/html/css ("unsubscribe" is the first title I see - WTF?)

"what the zurb stack does part 2" is promising, followed immediately by 'what the zurb stack does part 1'. Not confidence inspiring.

4-5 years is ancient in the web space

It was an early player, and there's inertia, but beyond that... why did it have so many plugins and themes for it early? because it was easy to get started.

and... forgot to mention - the entire thing looks decent out of the box. not great, but it's decent - every element is styled consistently, and looks far better than most people (especially devs) trying to roll their own UI/theme/colors.

Promoting CDN hosting directly on the page that 'getting started' links to is what I was getting at.

For experimenting and throwing an example together. So you have something in mind, maybe a wireframe or something one of your designers has made, or a customers existing site.

You go to bootstrap, hook into the CDN and start throwing some tags down. Boom. Bootstrap have you, you've invested time, effort and emotion into it. 90% of coders move on to the next profit making exercise. I know I did.... Sure, there are better CSS frameworks out there. But bootstrap is better than the crufty stuff we used to use, so it's win win win for me.

They both came out within a month of each other or so (bootstrap had a slight edge, I think). Having the Twitter name behind it gave it some PR, of course, but as I mentioned in another comment, having decent looking and consistent style out of the box from day one was yet another factor cementing their popularity.

Zurb answers "Why Doesn't Foundation Have as Much Styling as Bootstrap?" with "We purposely left our styles sparse. We didn't want to end up in a world where all the sites looked like Foundation." So... on purpose, I don't have a consistent and full 'out of the box' experience. I am required to do more work than I want to make it look decent (that's how I'm reading it, and my limited experience with zurb at that time).

It's been around pretty much the same amount of time. BS was Aug 2011, Foundation was Sep 2011. BS probably got more mindshare early on because of the Twitter name/association, and that probably cemented some mindshare, but it was simply easier and more complete for more basic use cases out of the box.

There are also a ton of Bootstrap layout design / code generator tools. I've yet to see similar for Foundation.

Why is anyone still doing a mock-up in PSD when you can "live prototype" with a Bootstrap generation tool?

FWIW, I don't think you had a dickish tone at all. I mentioned a couple of related criticisms in another comment - had I known the one above would have had so much activity I might have added it at the time.

"Tutorials" takes me to ... 20 videos? The first 6 of which have to do with email HTML/CSS, and "unsubscribe" is the first topic I see? Whether it's good or not, most projects I'm on I simply don't have time to dick around with so much ceremony up front in the hopes that this might save me time or give me a much better experience days/months in the future.

Again, Bootstrap is the "good enough" project. Even with more than a year of no real substantive activity, it's still more adopted and used and defaulted to than most other projects. It's the PHP of css/grid systems. It's the wordpress of css/grid/layout frameworks. There are many other platforms that are technically 'better', but none that are 'good enough' for a large number of use cases ('good enough' being, of course, in the eye of the beholder).

But no, you were not dickish. Your criticisms were pretty much just normal observations about why you can't get in to foundation.

> And I get an alphabetical list of elements, the first one being "Abide", which...I have no idea what the name has to do with the element, whatever the element does.

Obviously you’re not a golfer

"Sign Up & Download"

If you were looking for the fastest way to drive people away, you've found it.

The fact that it's somehow considered an insult to link to a CDN, rather than installing a gigabyte of tool chains that take years to learn, in order to achieve the exact same result... would be the reason nobody takes front end developers seriously.

Frankly, using Bootstrap from source is really easy, and tends to be my default path... I copy the bootstrap.less/scss as well as variables.scss to my project, update all the refs to the node_modules path(s), with the local variables... this way I can update said variables. I also create a local utils that includes the modules one... I'll add the local global styles to the lookup in webpack, and I'm off.

It's really nice, and allows me to comment out the bits I don't want/need and customize the few things I want changed (noto/consolas for fonts) and reuse the variables/fonts where needed.

Foundation, iirc originally required ruby, when I already was using node/npm for a lot of things... the better sass support via npm came later.

npm, bower, grunt, webpack and whatever is trendy right now, is the reason why some front development isn't take seriously.

Having the CDN link, or download with the js and css files is in my view a sign that you know what you're doing. Requiring me to use two package managers and a build tool that I didn't pick is uprofessionel.

I think it's also because early on it had Twitter as a prefix. Back when people still have envy for Twitter. That didn't hurt at all.

Ironic that Bootstrap might be the best thing to come out of Twitter.

I'm feeling rather pedantic right about now, so: https://www.merriam-webster.com/dictionary/literally

Definition 2.

In a more substantive tone, I personally see little value in 5 alpha versions. If none of them progressed to beta or an RC stage, they don't really provide much utility. Why would I try to ship a product unsuitable for production? I fail to see value in a product promised, but as of press-time, yet to be delivered.

Regardless, we can simply look at other frameworks to compare. Foundation 6 is out and is pretty solid. There are various material-design inspired frameworks, and more barebone grid systems that do everything bootstrap 4 can do with it's grid system. Did I mention many are lighter-weight and also production ready?

For one thing, they're stable, have consistent progress between releases, don't take eons between releases, and provide pretty much the exact same functionality.

Perhaps the implementation is no better (since it's all just relatively simple CSS), but having timely releases is a big plus in my opinion, something which TB4 has failed to deliver for what, over two years now?

Why not just use flexboxgrid and throw a few quick base classes for buttons and whatnot together? It's smaller in size and provides equal grid functionality, which is really the primary value of CSS frameworks anyway.

Personally I've never understood why people would need bootstrap on a new project. Especially if you're able to use flexbox. If you have a decent practical understanding of CSS, you can write could use plain CSS and a couple of classes for various components with significantly less overhead than bootstrap. Its pretty similar to how I see jquery nowadays honestly.

Seems like Foundation is moving fast toward the future, maybe this will help your decision: http://zurb.com/article/1460/foundation-for-sites-6-3-a-litt...

I'm really enjoying using Semantic UI. They have an official version of it specifically for React.

"No framework" has become a reasonable alternative. Bootstrap and others got started because (a) the 12-column grid layout was incredibly nice to work with compared to the disaster that page layout was before and (b) they provided abstraction over differences in browser implementations.

CSS has come a long way since then. Flexbox is possibly a bit more complicated and powerful than .col-xs-12, but not by much. CSS support has largely converged.

semantic-ui

Foundation 6, Flexboxgrid, MaterializeCSS, SemanticUI, Material Design Lite, etc, etc. Honestly, there are too many to count that are fully functional and similarly spec'd or more so.

Foundation 6?

I just tell them that anything below IE11 is a violation of corporate security standards and won't be supported.

We sell an enterprise web app to insurance companies and only this month fully dropped support for IE<11 after a year long campaign to reach out to our large IE 8 customers. The official MS drop of support at the beginning of the year was finally the ammunition we needed to make it a reality (by framing it purely as a security risk), but even then it took us a year to be comfortable pulling the trigger. But from someone who knows how difficult it can be: there is hope.

No wonder infrastructure gets hacked all the time. You'd think they'd at least go to embedded systems instead of using old PC's for these roles.

Send older clients unstyled no-JS HTML.

That's fine if you're B2C and selling direct to that 1%.

But if you're B2B then, you're not selling to that 1%, you're selling to a range of companies.

So 1% of end users having IE9 translates to 10% of your customers having (some) users with IE9.

Sometimes you're not even selling to companies, you're selling to partners or resellers selling to companies, so now that 10% of companies translates to 60% of your partners / resellers having (some) companies which themselves have (some) users with IE9.

So what was 1% of users can translate to much more than 1% of revenue lost just by dropping support.

And that's before I get started on how general those analytics are rather than breaking it down to office workers during work. Again, if your business is selling SaaS that targets workers then you'll likely come across a client with a need for older IE support sooner rather than later.

There's another reason why B2C is fine to drop support:

People are resourceful, if you have a website which breaks in IE9 then they'll probably just switch to chrome and it'll work fine if it's something they really want.

Companies however tend to be less flexible, if they know they have IE9 installed they'll insist on having "IE9 support" in the acceptance criteria, even if it's only installed on a few machines which likely will never be used with your software.

I'm actually happy to see bootstrap, jquery etc drop IE9 support because it makes it much easier during negotiation to drop support and push back against such proposals.

IE9 is still in extended support until April due to the fact it's the most recent IE that can run on Vista, and Vista is still in extended support until April 11.

You missed the 2% on IE 7.

If they're using XP to work with protected health information (PHI), and aren't on an extended service contract with Microsoft, they're accessing PHI on an insecure system and are, at least to how my team would interpret it, in direct violation of HIPAA.

In fact – and I too am not a lawyer, so don't consider this actionable advice – you might do well to throw up a warning, if not altogether disable access, to whatever product it is your users are accessing on XP, just to make sure you have all your HIPAA bases covered.

Don't drop IE11 support until Microsoft Edge usage overtakes the old IEs. Its already on live support.

Yeah, well, that's just your opinion man.

mdo is one of the creators of bootstrap. I also feel it's probably time to move on from IE < 11, and possibly even then depending on your real needs. Even MS has worked pretty hard to get people off of IE and into Win10+Edge

So all this banter is in response to fake news? Funny.

yes, CSS Diner: https://flukeout.github.io

I am really confused with CSS grid. How does it adjust to smaller screen sizes? My impression is that it is rigid like an html table, and we have mostly abandoned these for good reasons.

With flexbox I can make the sidebar float below the content at a certain screen size. Can I do this with grid?

So if anything, it seems to me that the global layout should be done with flexbox, and the grid is for smaller, more rigid elements that do not need to re-order on different screen sizes.

Essentially, with what I've done with Grid, my opinion is Flexbox makes the 1D case simpler than the equivalent thing with Grid. AFAICT, this is the prevailing view the reason for the above.

Just like Flexbox you can have different Grid layouts for different @media query breakpoints.

Hi, thanks for the test, yes it's not supposed to. What Firefox is that? It looks normal on latest FF on Mac and Windows. Regards.

Hi, thank you. That's one of the biggest problems with Bootstrap – a framework should not impose design on the creators.

The issue isn't just about old browsers. IE8 might not matter, but by supporting 10 years in the past you also make sure it will work 10 years in the future, following the standards. Simple, accessible HTML is under attack by the JS frameworks and most of the industry. When the framework du jour collapses under its complexity in 5 years, we'll be back to HTML.

Regards.

Round corners were in vogue a half a decade (or more) before bootstrap. Bootstrap provided what people wanted

I also use it with React, but it took me some time to set it up properly. The challenge is, that

    import jquery from 'jquery'
    window.$ = window.jQuery = jquery;

    import 'bootstrap';

doesn't really work because webpack (what we use) moves all import statements to the top. That can be solved by import bootstrap with

    require('bootstrap');

though.

However, the more challenging and annoying part are plugins because jQuery uses it's own plugin registry ($.fn). Most of the plugins are so nice to require it if require is available. But, the things you get from require are cached, thus, if you do

    const $ = require('jquery');
    $.fn.yada = ...

your registered function will not be available to other jQuery imports.

Long story short, what's so annoying about this technology is the fact that it does not fit the modularized setups very well but you are forced to find a way for it to work when you want to use bootstrap with the JavaScript additions.

I've found reactstrap to be pretty complete.

The observation in the linked video is that, when the browser is incrementally rendering the page, a traditional "grid" layout will put the content in its final location, while a flexbox will render a box of content that's bigger than usual and shrink it later -- because the items that cause the content area to shrink haven't been loaded yet.

Neither do I. Unless flexbox's CSS weights a lot more than classical CSS, I don't know how could that be a factor to render slower. Does not make any sense.

I'm pretty sure using bootstrap is re-inventing the wheel more than hand coding is. Using a framework which when installed and configured gives you the end result of a "wheel", as opposed to just coding up the wheel using HTML/CSS. Let's also make it clear that hand coding doesn't mean sitting there repeatedly typing out every character on every new job. There is always previous jobs and code to draw on to flesh out the needs of a page or site build efficiently and reliably. The benefit for developers is that you have very detailed control and knowledge of the frontend, rather than some broad "does Bootstrap do this thing I want" buffer between you and your own work. Each to their own. No right or wrong.

I think they're saying Bootstrap's wholehearted adoption of flexbox is not an enticement to use Bootstrap, they'll stick with hand-coding designs, using flexbox where appropriate.

Large firms pay large bills. So IE9 will not die without a fight.

And public ed. institutions. In Seattle most of the school district workstations are Windows 7 based.

My government customers have dropped IE9 in favor of 11. Things are improving.

I apologize for not being more clear. I was thinking about the flexbox more than the IE9 deprecation. The jQuery story was only to reinforce the idea that open source projects are "at the negotiating table".

http://caniuse.com/#feat=flexbox

There is a footnote on that page for IE11 (I believe still supported by Microsoft) that says:

"Partial support is due to large amount of bugs present (see known issues)".

For many of the components, it's easy enough to do the necessary styling via your own controls (tabs in particular) as opposed to trying to map the jquery + bootstrap.js... if you can avoid their JS, you can save some overhead. ymmv.

If you're going with React, you might want to look at material-ui[1] with a normalize css include and a basic (manual) flexbox layout to begin with. The components offered are really complete for a UI framework, and depending on your needs, working from dev branch may be a good option.

[1] http://www.material-ui.com/

By migration I meant migration for a project that already uses Bootstrap 3 and considers using 4.

Speaking of Foundation, I dunno, it depends on one's needs.

Some people say Bootstrap is too big but I appreciate its vast collection of components. Especially when you do CMS / control panel kind of apps and you need to make them quick, Bootstrap is a saviour.

Also, aesthetically I like those rounded form controls, buttons and cards. Plus it takes only a few lines of scss to make bootstrap look branded, add custom fonts and most people won't even guess it's Bootstrap.

I jumped Bootstrap 4 and I like it, but currently it takes some effort to adapt to breaking changes, which is fine, it's alpha after all.

It's better than angular going to RC 5x and making huge changes inbetween. lol