Currently Bootstrap is still the preferred choice for prototyping web applications and rapidly getting a MVP out the door. As great and undeniably helpful it is, Bootstrap is far too opinionated to be a viable front-end CSS solution for a lot of people. It throws the kitchen sink at you and its default style.
There are numerous themes for Bootstrap and means of creating your own styles, but as someone who’s now worked with Bootstrap quite extensively, it feels like you’re constantly overriding base styles (even using Bootstrap Sass won’t help you).
The way Bootstrap handles styling elements is also annoying, it isn’t uncommon to find long style declarations in Bootstrap like this: .navbar-default .navbar-nav > .active > a (that’s an actual line of code from Bootstrap) what if I want to style up that element, I don’t mean change its colour, I mean change its size, shape and add other things to it? While Bootstrap is pretty configurable, if you’re not using the LESS or Sass version of Bootstrap which allows SOME configuration, you’ll be overriding long computed lines like this.
Opinions.
When it comes to Zurb Foundation, it is completely unopinionated. It gives you just enough basic style to not make your site look like it’s from 1999, but it doesn’t add in anything like gradients or really any style at all which leaves it begging to be styled. If you work with real designers, chances are they won’t be content just styling Bootstrap elements, they’ll want to style and control everything. Bootstrap is of course the complete opposite assuming the role of a communist dictator in your web application opposed to a supporting team member.
Sometimes you will want to control every aspect and sometimes you won’t. As a developer who has had the privilege of working with actual designers who aren’t merely reskinning Bootstrap, most use-cases I encounter would never fit Bootstrap.
Grids.
The grid system in Bootstrap is often lauded as being the holy grail of grid systems, that is until you use Foundation’s grid system. Don’t get me wrong, the Bootstrap grid system works really well and is insanely clever in how it works, but Foundation takes it to a whole new level.
Both grids take the approach of being mobile first, but Foundation offers a considerably better grid system which allows you to either use classes or semantic elements and apply grids via your stylesheets using the in-built Sass grid helper functions.
You can center your grid items, push and pull, and specify how an element should react on different screen sizes. In regards to how Bootstrap and Foundation grids work, the non-semantic markup approach is basically the same. You use rows and column elements which allow for unlimited grid nesting.
Another point-of-difference is the fact Foundation uses relative em’s (REMS) and Bootstrap uses pixel values for gutter padding.
I encourage you to read the Foundation grid docs as they go into considerably more detail about what the grid system is capable of and how to use it.
Components
Out-of-the-box Foundation offers a nice selection of components to use within your page each abiding by the mantra of not being opinionated thus making them easier to style, which means less important declarations and lower stress levels.
Everything you will most likely ever need is included; accordions, tabbed dropdowns, offcanvas navigation, sticky navigation, form validation (Abide), modals, alerts, tooltips, guide tour plugin (Joyride), carousel slider (Orbit Slider) and my favourite component for responsive content: Interchange.
Interchange Component: A game-changer
The Interchange plugin alone in my opinion is a game-changer. It allows you to specify different sources for image elements and content partials for different screen sizes using an expressive form of media queries on the elements themselves.
My favourite aspect of this component is the ability to pull in HTML partials for displaying different pieces of content inside of a DIV. I’ve found this to be helpful when it comes to embedding HTML5 video elements into a page especially, I can specify a static image for mobile/handheld devices and a video for larger screens I know can play videos.
You can read more about the Interchange component here, it seriously is an invaluable tool to have at your disposal for mobile-first responsive web development.
Conclusion
I have barely scratched the surface of what Foundation can do. The grid system and nice array of components is only the beginning, with more planned improvements and a growing community, one thing is certain: Foundation is slowly but surely in it for the long-haul.
Try it out for yourself and see if it fits your needs. If you’re a developer being supplied colour schemes from your designers, choose Bootstrap or if you’re a developer being handed designs that aren’t mere reskins, consider using Foundation for your next project.
