Foundation vs Bootstrap (Part 2)

A while ago I posted an article stating my initial impressions of Foundation and comparing it to Bootstrap (Foundation vs Bootstrap). Since then I have used Foundation a lot more and have changed my opinions slightly, so thought I would post another article to highlight my change of opinion and what caused it.

In my first article I stated that I had a personal preference for Foundation. However in future I would in the majority of cases pick Bootstrap, for one simple reason. Bootstrap provides better JavaScript features. Foundation provides some very nice JavaScript features, including tabs, sticky navigation, carousels. However the biggest issue I have come across, and the reason I would pick Bootstrap, is the lack of extensibility with these JavaScript plugins. They do what they do and that is it.

What do I mean by this. In my scenario, I was using Foundation’s tabs. I wanted to perform an action every time a new tab was selected. In Bootstrap this is simple, there is an event raised when the tab changes. However although this would be simple to achieve, Foundation does not provide this, or any other way to tap into the tab changed function. The only way to do this is to actually overwrite the Foundation JavaScript with your own, to perform your action, then perform the original logic for changing the tab. It’s ugly, and not very user friendly.

I feel it’s quite a shame that this is the case, because Foundation just feels simpler than Bootstrap in most other ways, but it is certainly a deal breaker for me in most scenarios if I can’t change the way the JavaScript based features behave. I hope Foundation look to address this in future versions because providing better options for the JavaScript features would make Foundation a very attractive deal, as the rest of my experience certainly made me like it for it’s ease of use, it’s simple and clear notation, and in my opinion, nicer styles than Bootstrap.

Leave a Reply