The versions I’m comparing are Bootstrap 3, and Foundation 5. Although I’m aware Foundation 6 has recently been released, which makes up for some of the shortcomings in this article – which is better late than never! But I’m still locked into Foundation 5 for many projects.
Bootstrap 3 has sliding animations out of the box
Both Foundation and Bootstrap have accordion components that expand and collapse. But only Bootstrap’s animate nicely out of the box. You can probably change this in Foundation but it’d involve rewriting the component – which is annoying when I’d rather have it working the best way possible right out of the box (that’s why we use frameworks right?!).
Same problem with the navbar. Bootstrap’s mobile nav slides down nicely, allowing you to see where it appears from. Foundation’s just appears and overlays the content, which is sometimes surprising.
I’m glad to see the new Foundation 6 does have an animated slidey accordion and navbar.
Foundation’s config variables
Foundation is very customisable, which is great! And in some ways it’s better than Bootstrap because you can change the look and feel of a component without having to override it’s basic styles.
The way it does this is by using config variables, and plenty of them! Each component has at least 10 variables, about sizing, fonts, colours, background colours etc, which when you compile all your SASS will style the component as you need. Without having to override any styles (and overriding some of Foundation’s styles is a horrible battle of specificity!).
Problem is – you’ve got to figure out what variables there are, what each do, and type them our (or copy & paste), which is more time consuming than writing CSS, because I’ve got CSS styles committed to memory, not Foundation’s arbitrary variable names.
It’s a good idea, but sometimes it’s faster to write normal css.
Bootstrap has glyphicons
I use Bootstrap’s glyphicons all the time. In my Foundation projects I’ve been using FontAwesome, which is great, but it’s nice to have decent icons built-in.
Foundation’s installation process
The tutorial for installing Foundation uses commandline functions to get it installed. Maybe if you’re used to using commandline all the time, you’ll see the advantage in this. But for a light user like me, I feel much more comfortable copying and pasting files into the correct directories.
The ability to @extend more stuff
I use @extend all the time, and find it useful to extend the styles of a class into another. But many places I’ve found in Foundation this errors, for example I was trying to @extend the .show-for-sr class into a new class that did the same thing and more, so that I didn’t have to type out all the styles (SASS will also smush these together in the css for optimisation), but this didn’t work in Foundation because of how these styles are written. Whereas extending .sr-only in Bootstrap is easy.
By default Foundation looks like ass
So out of the box, Foundation looks quite basic, and Bootstrap looks… well… like Bootstrap. This isn’t really a problem which is why I left it til last. There’s a very valid argument that a framework shouldn’t make your site look like anything – and you don’t have to look very far to see the impact Bootstrap has had on the web – many websites that all look the same!
Foundation is deliberately basic so you can apply your own styles, although I quite enjoy working on a site that looks nice right from the start.
All this being said…
…Foundation is decent, and I still think it’s much better to work with a framework than no framework. It does also have some cool things that Bootstrap doesn’t, like Joyride built in (although I’ve not used it yet), and Equalizer, a bit of JavaScript that makes all columns the same height – something that’s been an annoyance in CSS for so many years! (although has been finally fixed with Flexbox).