Bootstrap 4 drops IE9 support and goes full flexbox
github.com
github.com
http://foundation.zurb.com vs http://getbootstrap.com
Each has a link to 'download'.
Foundation's link takes me to a page where I have a bunch of options, and a bit "build a custom generated version".
Bootstrap's takes me to a screen with 3 options, but also - and this is key - CDN links. Right there. I can paste a few lines in my HTML template and start working.
I don't need to download/generate code.
I don't need to install node/npm/etc.
I don't need to install and learn sass stuff.
I don't need to make a lot of decisions or do a lot of extra unrelated stuff to get started.
Bootstrap is the PHP of the css/grid/framework world (for better and for worse).
I truly hope they keep the CDN hosted stuff for Bootstrap 4.
EDIT: didn't mean to pick on foundation specifically - this "take control of every aspect of all your layout/grid/css" that most other frameworks require works to their disadvantage when it comes to popularity and uptake.
You are right about it being the PHP of front end development - great analogy.
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.
Plenty of people whine about its bloat, but that's, as you've noted, not the point.
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).
Example: Bootstrap Nav Bar Link `.navbar-default .navbar-nav>.active>a` Foundation TopBar Link `.menu > li.active > a`
Foundation usually uses less selectors to override, lower specificity.
Bootstrap - Get something presentable, quickly.
Foundation - We'll help you start but anything above the foundation is up to you.
It's not hard to imagine why one had more mainstream appeal than the other.
In CSS space, if the customer has a designer, I use whatever the designer decides to do. It's his task to fill the gap from Foundation to Bootstrap or (more often) customize Bootstrap and make it look nice. If the designer is me (laughing) then I use plain Bootatrap and that's the end of it.
Also using angular-ui to spin up some internal tools quickly.
https://angular-ui.github.io/bootstrap/
If it were just me, I'd go with skeleton and style the rest myself, but with a larger team, a custom boostrap theme seemed to work really well.
Again, not ideal. But doable and certainly not fatal.
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.
Their navigation is fuck all. Bootstraps is easy.
Bootstrap:
- Here's how you get started
- Here's the components and how to use them
- If you want a custom build, go here
Foundation:
- Getting started? "Sites Docs" which is in a menu under their "Docs" menu
- Components? Included in the same menu under "Sites Docs" on the same page as getting started. The components are in the right hand menu.
- Custom build? Located in the "Resources" menu under "Develop"
Not at all intuitive. I still remember being frustrated at how I had to fumble around their site trying to find stuff.
> Bootstrap's takes me to a screen with 3 options, but also - and this is key - CDN links. Right there. I can paste a few lines in my HTML template and start working.
This has been available for Foundation for a few years already:
https://www.foundationcdn.com/
> I don't need to install node/npm/etc.
This is a biggie. I've been doing a lot more static site development and the JS frameworks now to create a decent website can been a huge PIA. There are a ton of them out there now - they're having the same issue JS frameworks are having, people are being fatigued by the amount of choices out there.
Compare that to MVC4 or 5 where I can get a Bootstrap template setup with views and controllers and create multiple templates in a matter of minutes, it's insane.
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.
Why is anyone still doing a mock-up in PSD when you can "live prototype" with a Bootstrap generation tool?
That said, I know what you mean, and that's the point of something like Bootstrap Studio. You don't markup, it does. So now the "web designer" (perhaps in conjunction with some who actually understands basic frontend) is building a live "pixel perfect" mock-up.
Photoshop is a proxy. A Photoshop pixel isn't a web pixel. It's like saying, "I'm going to give you a rubber doll. I want you to build an exact replica that's human." Really?
People who still say "pixel perfect" just sound silly. "Web designer" with no sense for the difference between a hammer and a shovel aren't real web designers. Especially when far better tools are available, if you're willing to move forward.
Like Bootstrap, Foundation has a nice big "Getting Started" link to click on. OK:
http://foundation.zurb.com/develop/getting-started.html
Neither Foundation's or Bootstrap's "Getting Started" page is particularly interesting to me. But Bootstrap also has a "CSS" nav button that my eye naturally gravitates to, right next to "Getting Started". I click on that, and I see right away what opinions and conventions Bootstrap has, starting from the HTML5 doctype. The sidebar on the right makes it easy to get to specific topics of design, such as "Tables" and "Grid system".
Where is the corresponding overview page for Foundation? They also have a "CSS" link but it's not in the nav bar, it's nearly below the fold on Getting Started. And clicking that brings me to this Download page. Is that intentional? There's already a prominent "Download" link in the nav bar. I expect CSS to take me to some kind of page that demonstrates the CSS conventions. Clicking on "Sass" takes me to an anchor on the "Installation" page for the "command-line tool"...what does that have to do with how Sass is used?
I guess the next best link is Kitchen Sink, which takes me here: http://foundation.zurb.com/sites/docs/kitchen-sink.html
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. The Kitchen Sink page has two sidebars, and I'm not sure which one I'm supposed to focus on.
Maybe I'm an edge-case user, in that I don't really care to read tutorials to figure out how to use a front-end CSS framework. But that's what was appealing to me about Bootstrap from the very beginning. The design looked nice, the writeup of Bootstrap's most prominent elements and conventions had me sold right away. I didn't even know what a CSS framework was before Bootstrap, and had up to that point been satisfied with hand-coding CSS for every site. So whoever designed and edited the initial landing page for Bootstrap was doing something right, to so quickly make me realize my ignorance :)
Edit: Like the parent commenter, I regret my dickish tone of criticism and realize I need to take a nap. Not knowing much else about Foundation other than high praise from devs I respect, I would love for it to be as ubiquitous as a solution. Just pointing out that whatever technical flaws Bootstrap has, its introduction and overview docs are highly accessible and appealing.
Obviously you’re not a golfer
"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.
Don't worry, even the alpha site has it on the front page: http://v4-alpha.getbootstrap.com/
Ironic that Bootstrap might be the best thing to come out of Twitter.
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 don't see the difference from Ubuntu forcing you to use APT or C++ applications forcing you to use Make.
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.
I don't use the CDN links though; something just doesn't sit right with me with that option. I'm glad it's there, and I'm sure it helps newer programmers or those that want to just toss it in a template to see how it works, but I'm not comfortable relying on a third-party server to house such a critical part of my site. I always self host those files in production.
just copy a template from http://foundation.zurb.com/templates.html
delete the stuff that i don't want & copy/adapt stuffs from kitchen sink http://foundation.zurb.com/sites/docs/kitchen-sink.html
If you were looking for the fastest way to drive people away, you've found it.
But I have to agree, bootstrap does what its name says :)
For some who may not recall, I think the most famous / historic move was when jQuery decided version 2 would deprecate support for IE 6/7/8.
Originally jQuery project would go out of their way to make sure all browsers were covered. Needless to say these days Microsoft is far more receptive to the needs of the open source community.
They are, but not for this reason. Microsoft doesn't even support IE9 anymore, so there's not really any reason for any open-sourced project to do so.
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)".
Also when you consider how many changes were synced back to v1, I think it shows that at the end of the day, the user calls the shots.
IT only pushes back because the business users who use old web apps push back. Gotta make sure that IT knows the MSFT no longer has their back and so they need to be more aggressive with the business users and their app vendors.
EDIT: I mean, I understand if you want to be able to keep using a JS/CSS framework, but it's not really reasonable to ask for upstreams to keep supporting such marginal systems.
I swear there are bank machines in the field still running Windows XP. It's truly astonishing.
The old browsers are presumably (according to that page) still getting security updates by Microsoft, so I'm not what you're arguing. (Either way, if the browsers are not getting security updates, that's on Microsoft, not on upstreams.)
Can you explain what you mean?
EDIT: Hopefully to clarify what I'm puzzled about: How is having to use an old Bootstrap a security issue?
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.
Everyone interprets HIPAA differently and based on a statement like: "Continuing to use Windows XP after 4/8/14 (or other unsupported operating systems) becomes a HIPAA violation if it’s not addressed in your security risk analysis[0]." You can run XP indefinitely as long as your IT says it's OK and they've "secured it properly." However, if they do get hacked or whatnot, they can get a fine if their security analysis wasn't good enough.
I don't recommend it. I actually despise it and try my hardest to get people to drop it. But in the end, I've had to deal with a lot of XP running IE8 systems that need connections to the software I'm in charge of. There's nothing I can do unless I get rid of those users and most of the time I can't because I have to "support modern browsers" as noted in the contract and the contract is with the state, not the individual users. Yes, the contracts will get updated to be more specific, but most of the contracts are on 5 year cycles.
State .gov contract work is amazing. /s
[0] https://pimsyehr.com/resources/compliance/hippa-compliance/2...
So it seems it's pretty safe to remove support for it.
Source: https://analytics.wikimedia.org/dashboards/browsers/#all-sit...
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.
https://github.com/twbs/bootstrap/issues/21387
This isn't how you should drop support, it might be a good choice but can we at least have some discussion, maybe even an RFC, not just declare it be so within the space of 3 hours and lock the issue...
Like this: https://github.com/emberjs/rfcs/pull/45
Ember certainly has a very pleasant way of discussing these matters, and for dropping support for IE10 or IE11 that would be a fair way to do it now at the end of 2016, but there's just not much to be gained from a discussion about dropping IE9 support at this point.
My only pain points were lack of proper destructors for use in tests.
import jquery from 'jquery'
window.$ = window.jQuery = jquery;
import 'bootstrap';
require('bootstrap');
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 = ...
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.
That's why there are often component libraries that duplicate the JS driven logic of Bootstrap compoents, like reactstrap and react-bootstrap.
Those often remain incomplete though.
Yes, it weighs far far less (which makes it suitable for inlining directly in the head tag), but mostly I just find the source far more readable.
A small, lightweight framework that focuses on the very basics, avoids styling and frees me from repeating boilerplate code in every project is most welcome.
Milligram looks promising in that regard. My other alternative was Corpus: http://jamiewilson.io/corpus/
Also checkout his other stuff https://github.com/corysimmons
* use CSS Grid for layout in 2 dimensions. Page level layout essentially
* use Flexbox for layout in 1 dimension. "module" level layout.
These are not hard and fast rules, like much in CSS.
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.
It's like trying to make a list of all possible screen formats and trying to define a layout for each.
In my opinion media queries are an antipattern because they create code bloat and need frequent maintainance.
It seems unsuitable for writing responsive pages where containers float below each other if there is not enough horizontal space.
I would love to stand corrected, but my impression is that for responsive page designs, you will need flexbox, not the grid.
It might have been nice if CSS had more standard media queries that stated more explicitly what is desired (@media tablet-screen {} or something similar), but the compromise that remains is a solid one that mostly works and is adaptable/evolvable to potential future shifts in device profiles (both in browsers choosing different "effective pixel" ratings over time on the one side and CSS writers shifting breakpoints on the other).
Yes, new CSS standards like Grid/Flexbox could try to invent new wheels to deal with responsive issues, but it's easier for those standards to get adopted if they just subsume existing standards such as media queries.
I'm curious how you manage to avoid media queries while building "truly responsive" websites.
The immediate visual difference with Bootstrap is square corners vs rounded corners. Buttons and other components look strange after years of Bootstrap and its impact on web design. There is probably a few rules to edit to fix that, still... why having to do the work?
Anyway, I'll try to remember natUIve if a customer asks me to support old (but not so old) browsers.
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.
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.
This is great news!
FWIW you don't really know a lot of Foundation to use it.
Is everyone else dropping IE9 support at this stage...
I'm a bit out of the frontend developer loop these days being full stack and learning things like docker or elixir is more fun, and useful, than the vagaries of the latest promise library/CSS Pre processor/awful class naming scheme/etc.
I wish they could release some stats on browser usage. Otherwise i dont know where to get concrete information without substantial bias. Also the time which browsers are used. Since people are likely using different browsers in School / Work compared to at Home.
IE9 is the newest version of IE available for Windows Vista SP2 for example.
They should probably even consider dropping IE10 support if it is any sort of burden to them. IE10's marketshare is so tiny (smaller than IE9, IIRC). Windows Vista (i.e., "Windows 6") users used IE9 since MS didn't support anything beyond that for Vista while Windows 7 users mostly auto-updated to IE11.
But beware of breaking changes between alphas, there are quite a few.
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.
So if you've been considering Foundation this could be a window for Foundation to pick up some marketshare.
Why complicate my life?
I do love flexbox, but I would rather simply code it by hand rather than have some tool/framework/precompiler do it for me.
Why reinvent the wheel? Unless you've already created your own pattern library to draw from, you're not going to save time writing it all yourself. How are users going to benefit from your hand-rolled code?
There may be plenty of good answers to these questions but they should be asked.
What are the advantages of Bootstrap over Material Design?
I'm honestly really confused. I'd love to ask one of the devs how they've managed to literally do nothing while other, better CSS frameworks have been created AND versioned in the same timeframe.
Bootstrap 4 is just a sad attempt at preventing obsolescence. Time to let it die.
I'm using Bootstrap 3 right now and could potentially switch, but don't know if it's worth it or better features are at the destination?
Thanks
Even with flexbox you'd still need to reimplement the 'different column behaviours at various breakpoints', which is non-trivial.
Also there's the whole other-devs-understanding-your-code scenario 'oh this is Bootstrap, I know this'. It gives you conventions BEYOND just what raw CSS gives you, e.g. the Sass variables it exposes.
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.
They've released 5 alpha versions of v4 and released updates for v3?
Do you understand what "literally" means? It's different than "kinda".
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?
Usage Discussion of literally
Since some people take sense 2 to be the opposite of sense 1, it has been frequently criticized as a misuse. Instead, the use is pure hyperbole intended to gain emphasis, but it often appears in contexts where no additional emphasis is necessary.
It's always looked worse IMO, and I grew used to Bootstrap's sensible (and modular I should say, w.r.t. your 'lighter' comment) ... Sass source structure and conventions, so never been tempted to try Foundation again.
I've seen a few of these 'light' flexbox-based CSS frameworks spring up, but they've always been inferior to Bootstrap 3's grid (e.g. Bulma, which has no support for multiple breakpoints in the grid out of the box).
(I know about zurb)
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.