9 ms·
State of Bootstrap 4 vs. Foundation
- GaiusCoffee 11y agoLink is down for me: Error establishing a database connection. * http://www.isup.me/http://dannyherran.com/2016/03/state-of-affairs-bootstrap-4-vs-foundation-6/ http://www.isup.me/http://dannyherran.com/2016/03/state-of-a...
- McGlockenshire 11y agoGoogle cache: http://webcache.googleusercontent.com/search?q=cache%3Ahttp%3A%2F%2Fdannyherran.com%2F2016%2F03%2Fstate-of-affairs-bootstrap-4-vs-foundation-6%2F&oq=cache%3Ahttp%3A%2F%2Fdannyherran.com%2F2016%2F03%2Fstate-of-affairs-bootstrap-4-vs-foundation-6%2F&aqs=chrome..69i57j69i58.1119j0j7&sourceid=chrome&ie=UTF-8 http://webcache.googleusercontent.com/search?q=cache%3Ahttp%...
- cpbotha 11y agoThe link is indeed down. Here's the Google Cache version for your reading pleasure: http://webcache.googleusercontent.com/search?q=cache:http://dannyherran.com/2016/03/state-of-affairs-bootstrap-4-vs-foundation-6/ http://webcache.googleusercontent.com/search?q=cache:http://...
- jbrooksuk 11y agoSeems like the post could've done with a read through before publishing.
- deleted 11y ago[deleted]
- KayL 11y agoFoundation dropped IE8 and below supports at very early stage. I think it caused them losing the Community.
- arvinsim 11y agoI understand the need to support those browsers for some jobs but generally, we should be moving towards dropping them.
- owenwil 11y agoReally? Not even relevant anymore IMO.
- bildung 11y agoYou'd be amazed :) I write web applications for internal use at non-profits. If the office boxes still run IE8, IE8 has to be supported by the application.
- dexterdog 11y agoHave you tried talking them into the current century and all of its spoils?
- bildung 11y agoHeh, sure have :) Problem is most (European, e.g. less donation-financed) non-profits have a cash flow fundamentally different to that of a company: Most of the budget comes from a foundation, the government etc. and is tied to a specific use. So if the non-profit got funds for a specific project, they have e.g. full wages for 3 persons, much money for train tickets/renting of cars, food and accomodation, renting of kit, paying people like me for needed solutions, office rent and so on - but with fixed budgets for each! Stuff the non-profit could use after the funded project is finished (like modern computers, office inventory, cars) is much harder to get funded. This setup is meant to prevent corruption, not save the foundation money. The foundation usually has no qualms to grant 10k for renting cars, but will refute 5k for buying a car. In short, freely usable funds for upgrading IT equipment can be scarse even in well-financed non-profits.
- davorak 11y ago
- stevoski 11y agoBootstrap 4 seems to be the clear winner, according to the article. If you want to start designing with it already (which is not a great idea; it is still alpha), here's a Bootstrap 4 PSD template you can use: http://hackerthemes.com/blog/bootstrap-4-psd-template http://hackerthemes.com/blog/bootstrap-4-psd-template
- code_research 11y agoNobody should be using Photoshop nowadays to design a website. A competent web designer knows about html and css and - most importantly - has a good understanding for how a website behaves, especially regarding responsiveness and animations. It is a good reason to leave the room / team / project when "design a website" means "open photoshop".
- kiallmacinnes 11y agoSo, I'm not a web designer or developer (anymore). But.. This strikes me as being the same line of though as "Leave the team when your new coding project starts with a whiteboard rather than text editor". Sure, we can just start coding, but the result is rarely as clean.
- sophacles 11y agoI always have to remind my team that "a few weeks of coding will save us several hours of planning", when ever they just want to dive into code.
- mikewhy 11y agoIt's worse from a work perspective. Designers end up with multi-hundred MB PSD files where multiple people cannot work with the same document concurrently. It does nothing to help their consistency, since you cannot define common styles to be reused. And it has a trickle-down effect, where any developer working with the files now needs a license to open the document.
- ethanbond 11y ago
- hit8run 11y agoWow an alpha version is recommended for production. What world are we living in?! :D I tested BS4 but the alpha tag makes me too nervous to use it in production. Things will break and some things are still not there yet (talking about navigation in bs4).
- code_research 11y agoFoundation 6.1 was worse than Bootstrap 4 Alpha. They are still cleaning up and completely changing things with 6.2 totally breaking your setup. Boostrap alpha is more stable than Foundation "stable".
- dherran 11y agoTotally. When Foundation launched it was broken. Some JS components were unfinished and it didn't work as expected for a "stable" version.
- steveeq1 11y agoDo you know where I can find a compiled version of bootstrap 4? I am on boostrap 3, but am about to roll out a site in a few weeks, so I might as well put 4 on if it's that stable.
- dherran 11y agohttps://github.com/twbs/bootstrap/tree/v4-dev/dist https://github.com/twbs/bootstrap/tree/v4-dev/dist There is a CSS and JS compiled version of the files there.
- CM30 11y agoTo be fair, using an alpha version in production isn't always that rare. I mean, back when I used forum scripts like vBulletin, people ran alphas and betas and release candidates on live sites all the time. Were there sometimes issues? Sure, but a lot of the time, they worked fine. And that's not even getting into games and online services, where 'beta' never ends and you end up paying for alphas and early betas of things all the time.
- duxet 11y agoI would like to see a comparison of BS4 with Semantic UI, it has a few pretty interesting components
- afhammad 11y agoYes Semantic UI has come a long way and changed since I first used them 1-2 years ago. I have just tried it on a new project their annoying build process and lack of official SASS support the style and out of box components are really great.
- NKCSS 11y agoSemantic UI looks the best, but once you start to do your own things, you end up fighting it. I'd love to see some of the stuff Semantic UI does just as an add-in/theme for Bootstrap (Forms are beautifull). I created an app for a customer in it, and while it looks shiny, it would have been more cost-effective to just have used bootstrap.
- afloatboat 11y agoI've been helping out a developer that has been building sites with Semantic UI and it's making my skin crawl. It seems like a good start for prototyping and admin interfaces, but for anything else it just adds too much styling and classes that need to be overridden. The name seems poorly choosen, since you're constantly adding classes that reference styling decisions making it everything but semantic (ui very wide, ui very thin, ui three column doubling grid, …).
- jkchu 11y agoI am having trouble reading the last sentence, can you edit it to make your message more clear? I have had some experience with semantic UI components recently and I enjoyed using it.
- hsmallbone 11y agoHaving used both, I find that although Semantic UI has a lot more pluggable components, documentation on anything beyond simple examples and one sentence descriptions is severely lacking. Some components are just plain buggy, and the developer is not very fast at fixing them. It's got a lot of features but the lack of polish and development speed makes it hard to recommend for a larger team. I think only having a single developer has had mixed effects on the project, which is a shame because it's so close to being great. Meanwhile BS4 has solid built in components that are just documented enough to be usable despite not having as many. Issues get fixed quickly and it feels easier to follow its conventions. The JS APIs are simple enough as well, and the code behind it is much easier to follow than in Semantic UI.
- olouv 11y agoI've been a big fan of bootstrap, but I find that these CSS frameworks are becoming more and more irrelevant in the age of widespread flexbox support. CSS modules do put the last nail in the coffin.
- bbx 11y agoWhat about a CSS framework based on flexbox? http://bulma.io http://bulma.io
- andrewingram 11y agoI do like what I see, though Flexbox makes most of it so trivial that the benefits of adding it as a dependency seem limited. I've taken to using CSS frameworks as reference guides for solving certain problems, I tend to not use them directly.
- nilliams 11y agoUnless I'm missing something, its grid doesn't really match the capabilities of Bootstrap's. Only one breakpoint for a start?
- deleted 11y ago[deleted]
- leftnode 11y agoI believe Foundation has Flexbox support as well: http://foundation.zurb.com/sites/docs/flexbox.html http://foundation.zurb.com/sites/docs/flexbox.html
- k__ 11y agoIf you think about the grid-systems of those CSS frameworks, you're probably right. But Bootstrap has a nice "out-of-the-box" experience. I know much about usability engineering and user experience, but not so much about graphic design. And bootstrap fills this hole for me. Getting something out fast that doesn't look like 1999
- nilliams 11y ago
- colorcontrast 11y agoI was hoping for a comparison of out-of-box accessibility between the two frameworks.
- brickcap 11y agoHas anyone tried some of the newer css frameworks? Lots of them are listed on cssdb [1]. I especially like skeleton [2]. [1]http://cssdb.co/ http://cssdb.co/ [2]http://getskeleton.com/ http://getskeleton.com/
- danneu 11y agoSkeleton seems unmaintained. https://github.com/dhg/Skeleton https://github.com/dhg/Skeleton
- brickcap 11y agoYes it seems so. But there are forked repositories that are being maintained. They are 1. Skeleton framework (https://github.com/skeleton-framework/skeleton-framework https://github.com/skeleton-framework/skeleton-framework) and 2.Skeleton Plus (https://github.com/oltmannsdaniel/skeleton-plus https://github.com/oltmannsdaniel/skeleton-plus) I like skeleton plus because of the responsive menu. The colours are not so good :P
- CryoLogic 11y agoI've worked extensively with materialize, which has been a similar experience to bootstrap.
- ukyrgf 11y agoSkeleton isn't a framework. It was a set of opinionated CSS styles and a basic grid built by one guy. It's been unmaintained for years but it still works fine. This is my favorite fork of it- https://github.com/whatsnewsaes/Skeleton-Sass https://github.com/whatsnewsaes/Skeleton-Sass
- yoavm 11y agoIt's 2016 and Bootstrap still doesn't have native RTL support. Foundation had it (excellently) since 2013. When I'm building something for the local market, this has a major affect on my decision.
- ZeroGravitas 11y agoThere was an attempt to do so. They were using an RTL-flipping tool and it all looked pretty cool (I built something with it) but then one of the people who manually flipped Bootstrap basically accused them of being culturally insensitive by trying to automate this task and they abandoned it.
- reitanqild 11y agoIf true this could be added to a list of nasty side effects of rampant enforcement of political correctness.
- frogtog 11y agoIt's not true. The user didn't accuse them of being culturally insensitive. Rather, he argued that that automating the conversion was fool's errand, partly due to the differences between the various RTL languages. He suggested that the Bootstrap team point users to quality RTL themes instead of releasing a shoddy built-in RTL implementation. Perhaps this should be added to the list of instances of people dismissing valid arguments by labeling them polical correctness.
- reitanqild 11y agoOk, thanks for the clarification :-)
- etimberg 11y agoI think this [1] is the related thread. 1. https://github.com/twbs/bootstrap/issues/13564 https://github.com/twbs/bootstrap/issues/13564
- 11y ago
- dherran 11y agoThis is Danny here. I didn't expect this much traffic so I am sorting out the database connection issues. The server is overloaded. Sorry for the inconvenience!
- brightball 11y agoStatic page cache man. If you're using Wordpress check out the Supercache plugin.
- yodon 11y agoThanks for a great writeup, and fyi there's something up with your banner/header code on iOS - scrolling causes the header to drop down, slide up, drop down, again and again (typically 7-10 times)
- dherran 11y agoThis is Danny here. I didn't expect this much traffic so I am sorting out the database connection issues. The server is overloaded. Sorry for the inconvenience!
- joekrill 11y agoDo any modern CSS frameworks not rely on jQuery? I'm rather surprised that so many still do.
- rado 11y agoSeems not. No-dependencies alternative focused on size: https://github.com/radogado/natuive https://github.com/radogado/natuive
- bmh_ca 11y agoBulma is JS-agnostic. http://bulma.io http://bulma.io
- fmorel 11y agoSome have alternative implementations of their JavaScript components, like the multiple versions of Angular BootStrap modules.
- cmdkeen 11y agoThe key unanswered question, and for me the fundamental reason I switched from using Bootstrap to Foundation at work, is how designer friendly the two are. Bootstrap is fantastic when you want a site that looks like Bootstrap, these tend to be put together by developers. Foundation (at least was) much less opinionated and therefore when you're given a PSD by a designer much easier to implement. Have things improved on that front? Is it easy to override Bootstrap's defaults?
- andybak 11y agoIs it really that hard? The templates on http://wrapbootstrap.com/ http://wrapbootstrap.com/ are fairly varied and don't tend to be obviously bootstrappy.
- danvoell 11y agoI agree with Andy here. I am finding more and more instances of bootstrap in the wild where I need to double check the source code to figure out whether or not it is Bootstrap. Most instances are obviously bootstrap but mostly because the developer doesn't have a designer involved and doesn't need one which is the beauty of it.
- ethanbond 11y agoBut grabbing a template from a website isn't "working with a designer." Foundation still blows Bootstrap away in terms of building a truly bespoke site on top of their components.
- nilliams 11y agoCan you explain or give any examples where this is the case? At my work we build totally bespoke designs with Bootstrap and are having a good experience.
- ethanbond 11y agoI personally find that if I'm spending time overriding a framework's defaults for literally every single thing I do, that it's a badly designed framework. Maybe there's some sort of Bootstrap "reset.css" type of thing now, but I couldn't handle it back when I tried Bootstrap.
- code_research 11y agoA few things about Foundation 6: You do not need to include the whole javascript, you can include just the things you need. However, there have been problems with webpack and Foundation javascript developers seem to have no clue about what is going on in the JS frontend world, acting like isolated on a moon station, disconnected, what leads to problems with integrating other things. Very problematic is they still have FOUC problems - you have to look for various workarounds, but FOUC out of the box! The menu components and everything related to responsiveness suffer from it. I do not understand how this ever got released. Foundation 5 was ok, but this 6 release is disappointing. The modular handling of menus is a good idea, but overall execution is bad, lots of micro-problems everywhere, it feels not even pre-alpha. Also very monolithic and non-cooperative, ugly to integrate with anything else. I would recommend looking at semantic ui instead, which also has a good react integration, something Foundation designers do not have ever thought about. About the community: the people are great, but Zurb gives them only a totally annoying "forum" that is not able to filter for versions, so when you are searching for things you get all the stuff from previous versions, an information design nightmare, that would be easy to fix, but they do not even seem to have a problem with it - this says a lot about the agency behind it. Also be careful with installing foundation globally: it will overwrite your Foundation 5 binary, if you are using this, be careful. Not a serious problem, but when you still want to use F5 you have to prepare for it! Even with version 6 they still do not have a clue how to handle versioning, this tells a lot about the code quality you will be confronted with. But they have great marketing, the site and everything around F6 looks really great!
- robertwalsh0 11y agoI prefer Foundation because I think the grid system is superior as suggested by the author and I think it's much easier to style in such a way that the site looks like your own. As many have pointed out, many 'Bootstrap' sites look like 'Bootstrap' sites. My biggest gripe about Foundation is that beyond Mad Mimi's Foundation 5 port there aren't as many high quality tools to use Angular with Foundation compared to all the Bootstrap Angular tools.
- guylepage3 11y agoIMO, Bootstrap v4 is much stronger than Foundation for many reasons. Here's one... b4 has a much stronger "foundation." What do I mean by that? Well to be honest if you actually look at the HTML structure of both frameworks, you'll see that b4 is not only utilizing more modern techniques but that they have reduced and simplified their markup. ie, navigation items. b4 uses <div>'s for each nav element which allows for more control while foundation is using an older technique of unordered list items. This is just one example of how b4 takes a more wholistic approach to every aspect of their framework. I don't fault foundation at all and it probably has to due with the talent of the core b4 team as well as the massive community that they have, but I can't see a use case where I'd choose foundation over b4.
- neovive 11y agoI currently use Bootstrap, but have been looking at Bourbon recently along with it's suite of components (Neat, Bitters and Refills). It offers a nice set of mixins for semantic grids and common components. My only concern is working with other developers where Bootstrap is almost a common language.
- ukyrgf 11y agoI skipped Bootstrap in favor of Foundation in their earlier days, but like you I've settled in to using Bourbon mixins when I want to get my hands dirty, and Bootstrap when I just want to get up and running (and possibly hand off the project).
- oneweekwonder 11y agoSomething I'm missing on Foundation and Bourbon[0] website is the self explanatory documentation. It is something that is very useful for me as I play around with Bootstrap, because I can find the section of functionality I need and then almost copy and paste their example code or inspect the element to understand it better. Did I just miss something obvious or does it not exist? [0]: http://bourbon.io/ http://bourbon.io/
- mbesto 11y agoYup, check out Refills: http://refills.bourbon.io/ http://refills.bourbon.io/
- neovive 11y agoAs Bourbon is just a collection of Sass mixins, I think the intention for the source to be self-documenting. The docs for Bitters [0], Neat [1] and Refills [3] are a bit closer in style to Bootstrap, since they are more opinionated add-ons to the base Bourbon base. [0] http://bitters.bourbon.io/example.html http://bitters.bourbon.io/example.html [1] http://thoughtbot.github.io/neat-docs http://thoughtbot.github.io/neat-docs [2] http://refills.bourbon.io/ http://refills.bourbon.io/
- tortilla 11y agoThere's a nice intro/tutorial here: https://www.git-tower.com/learn/bourbon-neat-bitters/getting-ready/introduction https://www.git-tower.com/learn/bourbon-neat-bitters/getting...
- ukyrgf 11y agoOne thing Foundation is doing that I haven't seen done anywhere else is Foundation for Emails (http://foundation.zurb.com/emails.html http://foundation.zurb.com/emails.html). It's a build process that lets you design responsive HTML email templates that will work in most clients. There are so many quirks in Outlook, Gmail, etc that its nearly impossible to keep up, so it's great to have a team of people dedicated to abstracting it away for designers.
- Sir_Cmpwn 11y agoMy concern with both of these is that I'm slapping classes on all of my UI everywhere. Why can't a button just get all of the bootstrap btn styles automatically? Why not have forms look right just by selecting the elements that make them up? This is a problem for Foundation too. Does anyone know why they have chosen to do this?
- DougWebb 11y agoIt's a choice between opt-in and opt-out; sometimes you don't want the framework styles applied and you need a way to control that. The drawback to opt-out is that you may not control the markup where the styles shouldn't apply.
- ianleeclark 11y agoIt seems fairly over-opinionated for the framework to declare every button as exactly the same. What if a developer needs one orange square button and one normal, greyish-silver boostrap button. If every class is automatically applied to each button, you're going to need to override the styling for that specific orange, square button.
- lmm 11y agoWell yeah. The defaults should be defaults, and if you want to change them you override them. No?
- me_bx 11y agoAny opinions about uikit [0]? From the presentation it look pretty full-featured and modular, I'd be interested to know what people who tried it think... [0]: http://getuikit.com/ http://getuikit.com/
- johannsg 11y agoI've been using it for about a year now, and have come to prefer it over bootstrap and foundation (it's grid system in particular). It's also well-documented, and has a clean/well-organized codebase.
- TheOneTrueKyle 11y agoI am a big fan of creating my own framework, but I have used Foundation in the past due to their earlier adoption of SASS mixins. However, I am just now hearing of Foundation for Emails and that looks like could save a lot of headaches