18 ms·

Bootstrap 4 drops IE9 support and goes full flexbox

381 points by luisrudge 10y ago

based2 10y ago
> http://flexboxfroggy.com/ http://flexboxfroggy.com/
- tchadwick 10y ago
  This is a cool way to learn about flexbox.
- cjcenizal 10y ago
  Also, http://www.flexboxpatterns.com http://www.flexboxpatterns.com
- stymaar 10y ago
  See also : http://www.flexboxdefense.com/ http://www.flexboxdefense.com/
- notdarkyet 10y ago
  Just completed it and it was a great quick little tutorial. Appreciate you linking it.
- baby 10y ago
  This is amazing. Do you have something similar to learn HTML or CSS?
  - olieidel 10y ago
    yes, CSS Diner: https://flukeout.github.io https://flukeout.github.io
astrodust 10y ago
It's so great that IE9 is essentially extinct.
- nightski 10y ago
  It must be nice. I work in commodities and there are many plants and facilities that still only have access to IE8/9. It was a large struggle to even drop IE6/7 with a huge amount of backlash.
  - godzillabrennus 10y ago
    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.
  - intrasight 10y ago
    I just tell them that anything below IE11 is a violation of corporate security standards and won't be supported.
    - nightski 10y ago
      I am not a direct employee. It's actually the IT departments that push back.
      - astrodust 10y ago
        It's their company on the line. IE6 is basically a giant security hole. Anyone using it on any system whatsoever is putting themselves at huge risk.
      - intrasight 10y ago
        What I did (last year) was to make sure they had at least read https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE.... 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.
    - gtk40 10y ago
buckbova 10y ago
Does anyone know when to expect a RC? Looks to be in alpha still.
- wcarron 10y ago
  At this rate, I expect Armageddon before Bootstrap 4 gets an RC.
  - xeromal 10y ago
    It's better than angular going to RC 5x and making huge changes inbetween. lol
ceejay 10y ago
I find it extremely powerful that major open source projects are calling the shots instead of the major browser vendors. 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.
- gramstrong 10y ago
  >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.
  - ceejay 10y ago
    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 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)".
- shard972 10y ago
  I don't think this shows the open source projects calling the shots, If anything my experience with jQuery since v2, was that we would use v1 instead of v2 in order to support IE. 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.
ourmandave 10y ago
Of course there's a flexbox JS shim. https://github.com/jonathantneal/flexibility https://github.com/jonathantneal/flexibility
- ng12 10y ago
  Does anyone have experience using this with an SPA (React/Angular/etc)? I'd love to try it out so I can avoid having two layout styles.
  - tracker1 10y ago
    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/ http://www.material-ui.com/
    - ng12 10y ago
      Flexibility is for browser compat, not sure how this helps.
- angry-hacker 10y ago
  But what about performance?
apaprocki 10y ago
What are peoples' opinions whether CSS Grid will replace Flexbox usage in a lot of simple layout cases?
- ahoy 10y ago
  The general thinking is * 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.
  - gsnedders 10y ago
    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.
  - konschubert 10y ago
    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.
    - WorldMaker 10y ago
      Most of the same tricks to flexbox reordering and reflowing for responsive layouts apply to CSS grid as well. You can use @media queries to switch grid layouts based on things like screen size. With more recent specs you get a further advantage in that where flexbox reordering is based on easy to mix up numbering (at this media layout this Div A is 1, Div B is 2, Div C is 3, but in this other layout Div A is 3, Div B is 1 and Div C is 2) for naming your grid sections (Div A is "sidebar" and Div B is "main-content" and Div C is "footer"); the names stay consistent and only your designation of which name goes where in the grid flow (which is managed at the parent container level) shifts with media query reflows.
wcarron 10y ago
Bootstrap is really so far behind now I don't know why anyone even considers it as a viable option anymore. How long have they been in alpha/beta stage without a solid RC? It's legitimately pathetic and abysmal at this point. 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.
- no1youknowz 10y ago
  Can you expand more on why it's not viable and can you outline the other CSS frameworks and why they are better? 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
  - charrondev 10y ago
    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.
    - allover 10y ago
      With Bootstrap you can just pick the parts you need (so there is no practical 'overhead'), and most sites will at the very least need a responsive grid, and Bootstrap's (3's at least) is excellent. I don't know why you wouldn't want to use it, or something very similar from another framework. 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.
    - SippinLean 10y ago
desireco42 10y ago
Right move. We need to push forward.
mgkimsal 10y ago
For everyone saying "Foundation" when people ask what else... let me explain why Bootstrap is used so much more frequently than all other options combined. http://foundation.zurb.com http://foundation.zurb.com vs http://getbootstrap.com 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.
- blowski 10y ago
  It also has a lot of inertia. Non-developer managers have heard of it. There are loads of plugins and themes for it. There are lots of tutorials. You are right about it being the PHP of front end development - great analogy.
  - mgkimsal 10y ago
    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.
    - blowski 10y ago
      I agree with you completely. It's good enough and its competitors don't show enough real world features to overcome that inertia.
dbond 10y ago
"Drop IE9 support for v4 beta?" "fuck it, why not" https://github.com/twbs/bootstrap/issues/21387 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 https://github.com/emberjs/rfcs/pull/45
- danielsamuels 10y ago
  It was closed because of all the "me too" comments. The PR is here: https://github.com/twbs/bootstrap/pull/21389 https://github.com/twbs/bootstrap/pull/21389
- Freak_NL 10y ago
  To be fair that discussion about dropping support for IE9 took place over 18 months ago — that is a long time in browser age. Bootstrap is following in the footsteps of a bunch of other JavaScript libraries and frameworks that dropped IE9 (so all the arguments are pretty much known), and by now IE9 is that much more of a marginal browser that supporting it is in no one's interest. 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.
  - mycall 10y ago
    Don't drop IE11 support until Microsoft Edge usage overtakes the old IEs. Its already on live support.
    - kevin_thibedeau 10y ago
      There's a ton of people on Win7 that will never have Edge.
      - kavok 10y ago
jlg23 10y ago
> "I don't need to" [lots of trivial things] And this is why I and most of my hacker friends consider growing roses or working as fishermen instead. I get the overall attitude - it makes things easier. But, IMHO, that attitude was adequate when I was 12. Then I started to grow up and accept that minor chores are part of life. "Download code" - how much do you charge for that? Is there a difference between you using the left or the right mouse button? Just curious, because I have not yet mastered the art of turning flies into elephants on my invoices... I am sorry, but for somone posting on HN, this is by far the worst line of reasoning I've ever encountered :(
- fnovd 10y ago
  >Then I started to grow up and accept that minor chores are part of life. The entire reason why I got into programming was to eliminate the need for "minor chores". I want to tell the computer how to do it and then never think about it again (mostly). Bootstrap isn't perfect, but it's convenient and easy enough to use that I haven't dug too deeply into alternatives.
  - sp4ke 10y ago
    This ! It seems the coming IT generation got so much sucked into the current state of programming, few actually try to look at the big picture for some perspective on "why" are we doing things the way we are in the first place. The way I think about it: any extra effort that has no direct impact in making my life "as a programmer" easier, is a bug that needs to be fixed. Same thing applies when designing for people (i.e non technical users) Here's an inspiring interview from Alan Key that illustrates the issue: http://www.drdobbs.com/architecture-and-design/interview-with-alan-kay/240003442 http://www.drdobbs.com/architecture-and-design/interview-wit...
    - jlg23 10y ago
      > The way I think about it: any extra effort that has no direct impact in making my life "as a programmer" easier, is a bug that needs to be fixed. And 20 years later I am able to differentiate between "minor chores" and real "real work savers". And downloading something is definitely a minor chore, one that can be "fixed" by a few lines of code in your build pipeline. After having read a few discussion here on HN I totally get that this is "too much" for some (just revisit the discussion about the npm left-pad disaster where the consensus on HN seems to be that it "is ok to download code for that because writing your own routine for left-padding a string might take an hour"). When I was learning, I'd spend that our in my spare time because I'd be ashamed to have somebody pay me for this. Now that I am older, I'd just fire whoever utters such crap on the spot. To be perfectly clear: "I don't have to download the libs!" is NOT a valid reasoning for a technical choice. Not at all. In the last 20 years of professional software development I've never ever encountered a situation where the time "downloading libraries" was worth more than a rounding error in a weekly budget. PS: man alias. trust me, just a single line of config in your shell will save you hours, well minutes, well, maybe just seconds over your lifetime. But you can spend twice as much time to make the non-problem go away - and you qualify for a free shirt "for every solution, I have the problem!". EDIT: sp4ke, I know this sounds harsh, but it is not, in any way, meant as a personal attack. Instead, please treat it as the ramblings of an old, misanthropic programmer ;)
cygned 10y ago
Ah the worst thing about Bootstrap is jQuery because it's a pain to integrate it into Single Page Applications properly. That's why I enjoy Bulma (bulma.io) so much - just CSS but still 90% of the stuff you get in Bootstrap.
- Ralfp 10y ago
  I don't really understand whats so hard about using Bootstrap with it's JS in SPA. I've adapted BS components for Ember.js, I've did same with Mithril.js and then React.js, and I've never had problems. My only pain points were lack of proper destructors for use in tests.
  - cygned 10y ago
    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.
    - tracker1 10y ago
      You can inject window.$ and window.jQuery via webpack directly, making the inclusion implicit... there's a minor amount of additional script added, and it makes it unavailable to attach to the actual window, but I find the DOM interfaces sufficient in the console anyway.
      - 10y ago
bluetwo 10y ago
My front-end framework is simply HTML, CSS, and JavaScript. 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.
- vmasto 10y ago
  I'm sorry I don't understand your point. Flexbox is part of CSS. How do you suggest laying out predefined elements in a framework?
  - extra88 10y ago
    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.
    - bluetwo 10y ago
      Yes, thank you extra88. Exactly.
- extra88 10y ago
  > Why complicate my life? 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.
  - exodust 10y ago
    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.
scotchio 10y ago
What percentage of users still use IE9?
- grandalf 10y ago
  It's mostly government offices and large firms. I believe IE9 support is still required by most government agencies.
  - EugeneOZ 10y ago
    Large firms pay large bills. So IE9 will not die without a fight.
    - grandalf 10y ago
      True. I think MS just gradually shifts the costs so that at a certain point the cost of upgrading everything to the latest OS version seems like a good deal compared with the support requirements of IE9.
  - deboboy 10y ago
    And public ed. institutions. In Seattle most of the school district workstations are Windows 7 based.
  - nommm-nommm 10y ago
    My government customers have dropped IE9 in favor of 11. Things are improving.
gtk40 10y ago
IE7-IE9 still receive security updates on some versions of Windows. https://support.microsoft.com/en-us/gp/microsoft-internet-explorer/en-us https://support.microsoft.com/en-us/gp/microsoft-internet-ex... IE9 is the newest version of IE available for Windows Vista SP2 for example.
- torgoguys 10y ago
  Vista extended support ends in April of 2017. It's the last holdout of Microsoft-supported mainstream versions of Windows (i.e., excluding fringe versions like Windows Embedded) that can't upgrade beyond IE9. Seems reasonable that the new version of Bootstrap (which you don't have to use--v3 still works fine) should not bother with support for a browser that will soon be no longer supported by the browser's own creator. 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.
sergiotapia 10y ago
That's great. I wonder how much traffic will be saved worldwide without .col-md-6 html being sent around. Just straight up content HTML with minimal "boxing". This is great news!
tmoreton 10y ago
Finally! Every other major framework needs to jump on this bandwagon and stop supporting IE9 and then the users will realize they are outdated...at least I would hope so. Every aspect of Frontend development adds a ton of extra hours when building around IE9's quirks. I had the same idea as Bootstrap building my own Flexbox based CSS framework Useful.ly
tribby 10y ago
traditionally the reason I've avoided flexbox for layout (fine for most items within that layout) is the wonky rendering on slower connections[0]. is bootstrap doing anything to get around this or did they really go "full flexbox"? since I use susy[1] I'll never need bootstrap for grids, but I'm curious about the flexbox adoption and tradeoffs. 0. https://www.youtube.com/watch?v=vPryjyFP5FM https://www.youtube.com/watch?v=vPryjyFP5FM 1. http://susy.oddbird.net/ http://susy.oddbird.net/
- angry-hacker 10y ago
  Uh, does connection speed really plays a role when it comes to browser painting the elements? I'm not sure of I understand.
  - truth_sentinell 10y ago
    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.
  - rspeer 10y ago
    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.
- hackerboos 10y ago
  Cory Simmons Lost grid is good for PostCss https://github.com/peterramsing/lost https://github.com/peterramsing/lost Also checkout his other stuff https://github.com/corysimmons https://github.com/corysimmons
dexterdog 10y ago
I thought you never go full flexbox
cwt137 10y ago
This is a pull request that hasn't been merged yet. Maybe the title should be "Proposal to drop IE9 support and go full flexbox in Bootstrap 4"
- tracker1 10y ago
  The PR is from MDO, and I'd be surprised if he didn't have commit access.
nateberkopec 10y ago
I've replaced Bootstrap with Milligram (https://milligram.github.io/ https://milligram.github.io/) on all of my projects. 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.
- thirdsun 10y ago
  This is actually kind of nice. I hate frameworks like Bootstrap that try to make any design / styling decisions. It's my experience that unless you're fine with that out of the box styling, you'll actually fight the framework while customizing it. 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/ http://jamiewilson.io/corpus/
jeffehobbs 10y ago
Excellent choice!
andy_ppp 10y ago
I'd love it if they had a things don't look broken promise for IE9. Seems like it should be relatively easy to sequentially layout the page in IE9 without flexbox? 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.
truth_sentinell 10y ago
Was about damn time a major player like this dropped IE, should have been IE10 though. Good move nonetheless.
ksec 10y ago
Since Google, is essentially what everybody in the western world uses to search, ( Russia, China, Japan, Korea all gets their own search from somewhere else. ) 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.
vayarajesh 10y ago
I feel I have gotten too used to Material design and I hardly ever use bootstrap. Do anyone of you feel the same? What are the advantages of Bootstrap over Material Design?
szastupov 10y ago
Migration from 3 to 4 will certainly be a pain but then you're gonna love it. I love new cards, utility classes, better out of the box support for mobile browsers. But beware of breaking changes between alphas, there are quite a few.
- chiefalchemist 10y ago
  I'm presuming it's not a migration as much as a complete makeover/refactoring. Which could be interesting. Does that open the door to Foundation? That is, if you're going to more or less start over is now the time to jump the Bootstrap ship and climb on board with Foundation?
  - szastupov 10y ago
    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.
    - chiefalchemist 10y ago
      Yes. I got what you meant by migration :) My arc was that the difference from 3 to 4 looks to be fairly vast, and that you're all but rebuilding (i.e., it's a new site/application). Or darn close. So if you've been considering Foundation this could be a window for Foundation to pick up some marketshare.
  - szastupov 10y ago
    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.
chiefalchemist 10y ago
Slightly off topic but ZURB Foundation for Email is a nice tool for generation markup that'll work in most email clients FWIW you don't really know a lot of Foundation to use it.
rado 10y ago
An unfortunate tipping point for accessibility. My personal project natUIve is full flexbox, supports IE8, doesn't require JS even for the slider. https://radogado.github.io/natuive/ https://radogado.github.io/natuive/
- pmontra 10y ago
  Nice project. 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.
  - rado 10y ago
    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.
  - nommm-nommm 10y ago
    Round corners were in vogue a half a decade (or more) before bootstrap. Bootstrap provided what people wanted
- SwellJoe 10y ago
  The page background image makes the text completely illegible in several places, for me, in Firefox. It's so awful that I'm not confident it's supposed to look like this: http://i.imgur.com/lDuO3NA.png http://i.imgur.com/lDuO3NA.png
  - rado 10y ago
    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.
jgalt212 10y ago
I'm a bit sad for the dropping of IE 9 support, if only because it was the first IE that had a "fast" JS engine and didn't take forever to render our JS heavy site.

381 points by luisrudge 10y ago

based2 10y ago

> http://flexboxfroggy.com/ http://flexboxfroggy.com/

tchadwick 10y ago
This is a cool way to learn about flexbox.
cjcenizal 10y ago
Also, http://www.flexboxpatterns.com http://www.flexboxpatterns.com
stymaar 10y ago
See also : http://www.flexboxdefense.com/ http://www.flexboxdefense.com/
notdarkyet 10y ago
Just completed it and it was a great quick little tutorial. Appreciate you linking it.
baby 10y ago
This is amazing. Do you have something similar to learn HTML or CSS?
- olieidel 10y ago
  yes, CSS Diner: https://flukeout.github.io https://flukeout.github.io

astrodust 10y ago

It's so great that IE9 is essentially extinct.

nightski 10y ago
It must be nice. I work in commodities and there are many plants and facilities that still only have access to IE8/9. It was a large struggle to even drop IE6/7 with a huge amount of backlash.
- godzillabrennus 10y ago
  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.
- intrasight 10y ago
  I just tell them that anything below IE11 is a violation of corporate security standards and won't be supported.
  - nightski 10y ago
    I am not a direct employee. It's actually the IT departments that push back.
    - astrodust 10y ago
      It's their company on the line. IE6 is basically a giant security hole. Anyone using it on any system whatsoever is putting themselves at huge risk.
    - intrasight 10y ago
      What I did (last year) was to make sure they had at least read https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE.... 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.
  - gtk40 10y ago

buckbova 10y ago

Does anyone know when to expect a RC? Looks to be in alpha still.

wcarron 10y ago
At this rate, I expect Armageddon before Bootstrap 4 gets an RC.
- xeromal 10y ago
  It's better than angular going to RC 5x and making huge changes inbetween. lol

ceejay 10y ago

I find it extremely powerful that major open source projects are calling the shots instead of the major browser vendors. 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.

gramstrong 10y ago
>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.
- ceejay 10y ago
  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 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)".
shard972 10y ago
I don't think this shows the open source projects calling the shots, If anything my experience with jQuery since v2, was that we would use v1 instead of v2 in order to support IE. 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.

ourmandave 10y ago

Of course there's a flexbox JS shim. https://github.com/jonathantneal/flexibility https://github.com/jonathantneal/flexibility

ng12 10y ago
Does anyone have experience using this with an SPA (React/Angular/etc)? I'd love to try it out so I can avoid having two layout styles.
- tracker1 10y ago
  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/ http://www.material-ui.com/
  - ng12 10y ago
    Flexibility is for browser compat, not sure how this helps.
angry-hacker 10y ago
But what about performance?

apaprocki 10y ago

What are peoples' opinions whether CSS Grid will replace Flexbox usage in a lot of simple layout cases?

ahoy 10y ago
The general thinking is * 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.
- gsnedders 10y ago
  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.
- konschubert 10y ago
  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.
  - WorldMaker 10y ago
    Most of the same tricks to flexbox reordering and reflowing for responsive layouts apply to CSS grid as well. You can use @media queries to switch grid layouts based on things like screen size. With more recent specs you get a further advantage in that where flexbox reordering is based on easy to mix up numbering (at this media layout this Div A is 1, Div B is 2, Div C is 3, but in this other layout Div A is 3, Div B is 1 and Div C is 2) for naming your grid sections (Div A is "sidebar" and Div B is "main-content" and Div C is "footer"); the names stay consistent and only your designation of which name goes where in the grid flow (which is managed at the parent container level) shifts with media query reflows.

wcarron 10y ago

Bootstrap is really so far behind now I don't know why anyone even considers it as a viable option anymore. How long have they been in alpha/beta stage without a solid RC? It's legitimately pathetic and abysmal at this point. 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.

no1youknowz 10y ago
Can you expand more on why it's not viable and can you outline the other CSS frameworks and why they are better? 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
- charrondev 10y ago
  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.
  - allover 10y ago
    With Bootstrap you can just pick the parts you need (so there is no practical 'overhead'), and most sites will at the very least need a responsive grid, and Bootstrap's (3's at least) is excellent. I don't know why you wouldn't want to use it, or something very similar from another framework. 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.
  - SippinLean 10y ago

desireco42 10y ago

Right move. We need to push forward.

mgkimsal 10y ago

For everyone saying "Foundation" when people ask what else... let me explain why Bootstrap is used so much more frequently than all other options combined. http://foundation.zurb.com http://foundation.zurb.com vs http://getbootstrap.com 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.

blowski 10y ago
It also has a lot of inertia. Non-developer managers have heard of it. There are loads of plugins and themes for it. There are lots of tutorials. You are right about it being the PHP of front end development - great analogy.
- mgkimsal 10y ago
  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.
  - blowski 10y ago
    I agree with you completely. It's good enough and its competitors don't show enough real world features to overcome that inertia.

dbond 10y ago

"Drop IE9 support for v4 beta?" "fuck it, why not" https://github.com/twbs/bootstrap/issues/21387 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 https://github.com/emberjs/rfcs/pull/45

danielsamuels 10y ago
It was closed because of all the "me too" comments. The PR is here: https://github.com/twbs/bootstrap/pull/21389 https://github.com/twbs/bootstrap/pull/21389
Freak_NL 10y ago
To be fair that discussion about dropping support for IE9 took place over 18 months ago — that is a long time in browser age. Bootstrap is following in the footsteps of a bunch of other JavaScript libraries and frameworks that dropped IE9 (so all the arguments are pretty much known), and by now IE9 is that much more of a marginal browser that supporting it is in no one's interest. 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.
- mycall 10y ago
  Don't drop IE11 support until Microsoft Edge usage overtakes the old IEs. Its already on live support.
  - kevin_thibedeau 10y ago
    There's a ton of people on Win7 that will never have Edge.
    - kavok 10y ago

jlg23 10y ago

> "I don't need to" [lots of trivial things] And this is why I and most of my hacker friends consider growing roses or working as fishermen instead. I get the overall attitude - it makes things easier. But, IMHO, that attitude was adequate when I was 12. Then I started to grow up and accept that minor chores are part of life. "Download code" - how much do you charge for that? Is there a difference between you using the left or the right mouse button? Just curious, because I have not yet mastered the art of turning flies into elephants on my invoices... I am sorry, but for somone posting on HN, this is by far the worst line of reasoning I've ever encountered :(

fnovd 10y ago
>Then I started to grow up and accept that minor chores are part of life. The entire reason why I got into programming was to eliminate the need for "minor chores". I want to tell the computer how to do it and then never think about it again (mostly). Bootstrap isn't perfect, but it's convenient and easy enough to use that I haven't dug too deeply into alternatives.
- sp4ke 10y ago
  This ! It seems the coming IT generation got so much sucked into the current state of programming, few actually try to look at the big picture for some perspective on "why" are we doing things the way we are in the first place. The way I think about it: any extra effort that has no direct impact in making my life "as a programmer" easier, is a bug that needs to be fixed. Same thing applies when designing for people (i.e non technical users) Here's an inspiring interview from Alan Key that illustrates the issue: http://www.drdobbs.com/architecture-and-design/interview-with-alan-kay/240003442 http://www.drdobbs.com/architecture-and-design/interview-wit...
  - jlg23 10y ago
    > The way I think about it: any extra effort that has no direct impact in making my life "as a programmer" easier, is a bug that needs to be fixed. And 20 years later I am able to differentiate between "minor chores" and real "real work savers". And downloading something is definitely a minor chore, one that can be "fixed" by a few lines of code in your build pipeline. After having read a few discussion here on HN I totally get that this is "too much" for some (just revisit the discussion about the npm left-pad disaster where the consensus on HN seems to be that it "is ok to download code for that because writing your own routine for left-padding a string might take an hour"). When I was learning, I'd spend that our in my spare time because I'd be ashamed to have somebody pay me for this. Now that I am older, I'd just fire whoever utters such crap on the spot. To be perfectly clear: "I don't have to download the libs!" is NOT a valid reasoning for a technical choice. Not at all. In the last 20 years of professional software development I've never ever encountered a situation where the time "downloading libraries" was worth more than a rounding error in a weekly budget. PS: man alias. trust me, just a single line of config in your shell will save you hours, well minutes, well, maybe just seconds over your lifetime. But you can spend twice as much time to make the non-problem go away - and you qualify for a free shirt "for every solution, I have the problem!". EDIT: sp4ke, I know this sounds harsh, but it is not, in any way, meant as a personal attack. Instead, please treat it as the ramblings of an old, misanthropic programmer ;)

cygned 10y ago

Ah the worst thing about Bootstrap is jQuery because it's a pain to integrate it into Single Page Applications properly. That's why I enjoy Bulma (bulma.io) so much - just CSS but still 90% of the stuff you get in Bootstrap.

Ralfp 10y ago
I don't really understand whats so hard about using Bootstrap with it's JS in SPA. I've adapted BS components for Ember.js, I've did same with Mithril.js and then React.js, and I've never had problems. My only pain points were lack of proper destructors for use in tests.
- cygned 10y ago
  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.
  - tracker1 10y ago
    You can inject window.$ and window.jQuery via webpack directly, making the inclusion implicit... there's a minor amount of additional script added, and it makes it unavailable to attach to the actual window, but I find the DOM interfaces sufficient in the console anyway.
    - 10y ago

bluetwo 10y ago

My front-end framework is simply HTML, CSS, and JavaScript. 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.

vmasto 10y ago
I'm sorry I don't understand your point. Flexbox is part of CSS. How do you suggest laying out predefined elements in a framework?
- extra88 10y ago
  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.
  - bluetwo 10y ago
    Yes, thank you extra88. Exactly.
extra88 10y ago
> Why complicate my life? 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.
- exodust 10y ago
  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.

scotchio 10y ago

What percentage of users still use IE9?

grandalf 10y ago
It's mostly government offices and large firms. I believe IE9 support is still required by most government agencies.
- EugeneOZ 10y ago
  Large firms pay large bills. So IE9 will not die without a fight.
  - grandalf 10y ago
    True. I think MS just gradually shifts the costs so that at a certain point the cost of upgrading everything to the latest OS version seems like a good deal compared with the support requirements of IE9.
- deboboy 10y ago
  And public ed. institutions. In Seattle most of the school district workstations are Windows 7 based.
- nommm-nommm 10y ago
  My government customers have dropped IE9 in favor of 11. Things are improving.

gtk40 10y ago

IE7-IE9 still receive security updates on some versions of Windows. https://support.microsoft.com/en-us/gp/microsoft-internet-explorer/en-us https://support.microsoft.com/en-us/gp/microsoft-internet-ex... IE9 is the newest version of IE available for Windows Vista SP2 for example.

torgoguys 10y ago
Vista extended support ends in April of 2017. It's the last holdout of Microsoft-supported mainstream versions of Windows (i.e., excluding fringe versions like Windows Embedded) that can't upgrade beyond IE9. Seems reasonable that the new version of Bootstrap (which you don't have to use--v3 still works fine) should not bother with support for a browser that will soon be no longer supported by the browser's own creator. 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.

sergiotapia 10y ago

That's great. I wonder how much traffic will be saved worldwide without .col-md-6 html being sent around. Just straight up content HTML with minimal "boxing". This is great news!

tmoreton 10y ago

Finally! Every other major framework needs to jump on this bandwagon and stop supporting IE9 and then the users will realize they are outdated...at least I would hope so. Every aspect of Frontend development adds a ton of extra hours when building around IE9's quirks. I had the same idea as Bootstrap building my own Flexbox based CSS framework Useful.ly

tribby 10y ago

traditionally the reason I've avoided flexbox for layout (fine for most items within that layout) is the wonky rendering on slower connections[0]. is bootstrap doing anything to get around this or did they really go "full flexbox"? since I use susy[1] I'll never need bootstrap for grids, but I'm curious about the flexbox adoption and tradeoffs. 0. https://www.youtube.com/watch?v=vPryjyFP5FM https://www.youtube.com/watch?v=vPryjyFP5FM 1. http://susy.oddbird.net/ http://susy.oddbird.net/

angry-hacker 10y ago
Uh, does connection speed really plays a role when it comes to browser painting the elements? I'm not sure of I understand.
- truth_sentinell 10y ago
  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.
- rspeer 10y ago
  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.
hackerboos 10y ago
Cory Simmons Lost grid is good for PostCss https://github.com/peterramsing/lost https://github.com/peterramsing/lost Also checkout his other stuff https://github.com/corysimmons https://github.com/corysimmons

dexterdog 10y ago

I thought you never go full flexbox

cwt137 10y ago

This is a pull request that hasn't been merged yet. Maybe the title should be "Proposal to drop IE9 support and go full flexbox in Bootstrap 4"

tracker1 10y ago
The PR is from MDO, and I'd be surprised if he didn't have commit access.

nateberkopec 10y ago

I've replaced Bootstrap with Milligram (https://milligram.github.io/ https://milligram.github.io/) on all of my projects. 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.

thirdsun 10y ago
This is actually kind of nice. I hate frameworks like Bootstrap that try to make any design / styling decisions. It's my experience that unless you're fine with that out of the box styling, you'll actually fight the framework while customizing it. 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/ http://jamiewilson.io/corpus/

jeffehobbs 10y ago

Excellent choice!

andy_ppp 10y ago

I'd love it if they had a things don't look broken promise for IE9. Seems like it should be relatively easy to sequentially layout the page in IE9 without flexbox? 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.

truth_sentinell 10y ago

Was about damn time a major player like this dropped IE, should have been IE10 though. Good move nonetheless.

ksec 10y ago

Since Google, is essentially what everybody in the western world uses to search, ( Russia, China, Japan, Korea all gets their own search from somewhere else. ) 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.

vayarajesh 10y ago

I feel I have gotten too used to Material design and I hardly ever use bootstrap. Do anyone of you feel the same? What are the advantages of Bootstrap over Material Design?

szastupov 10y ago

Migration from 3 to 4 will certainly be a pain but then you're gonna love it. I love new cards, utility classes, better out of the box support for mobile browsers. But beware of breaking changes between alphas, there are quite a few.

chiefalchemist 10y ago
I'm presuming it's not a migration as much as a complete makeover/refactoring. Which could be interesting. Does that open the door to Foundation? That is, if you're going to more or less start over is now the time to jump the Bootstrap ship and climb on board with Foundation?
- szastupov 10y ago
  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.
  - chiefalchemist 10y ago
    Yes. I got what you meant by migration :) My arc was that the difference from 3 to 4 looks to be fairly vast, and that you're all but rebuilding (i.e., it's a new site/application). Or darn close. So if you've been considering Foundation this could be a window for Foundation to pick up some marketshare.
- szastupov 10y ago
  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.

chiefalchemist 10y ago

Slightly off topic but ZURB Foundation for Email is a nice tool for generation markup that'll work in most email clients FWIW you don't really know a lot of Foundation to use it.

rado 10y ago

An unfortunate tipping point for accessibility. My personal project natUIve is full flexbox, supports IE8, doesn't require JS even for the slider. https://radogado.github.io/natuive/ https://radogado.github.io/natuive/

pmontra 10y ago
Nice project. 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.
- rado 10y ago
  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.
- nommm-nommm 10y ago
  Round corners were in vogue a half a decade (or more) before bootstrap. Bootstrap provided what people wanted
SwellJoe 10y ago
The page background image makes the text completely illegible in several places, for me, in Firefox. It's so awful that I'm not confident it's supposed to look like this: http://i.imgur.com/lDuO3NA.png http://i.imgur.com/lDuO3NA.png
- rado 10y ago
  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.

jgalt212 10y ago

I'm a bit sad for the dropping of IE 9 support, if only because it was the first IE that had a "fast" JS engine and didn't take forever to render our JS heavy site.