There are many differences and similarities between Bootstrap and Foundation. The biggest similarity is that they are both great front-end frameworks that can be used to build out awesome applications. They come with lots of great features, are mobile first, responsive, and customizable, and extensible.Scotch.io is a big user of Bootstrap and love the great features it provides. Recently, we took a look at Foundation 5's features and how to use it. It's a great framework that has a few cool things to offer that default Bootstrap does not. Here's a look through some of the cool features you can find in Foundation that aren't in Bootstrap.
EM BasedEverything about Foundation works to be "the most advanced responsive front-end framework". In this spirit, they have used ems for everything from font-sizes to media query breakpoints.
Base ClassesBootstrap prefixes its classes with the type of class that it is (ie
.img-circle). Foundation comes with a set of universal classes to specify colors and shape. These apply to a variety of things including buttons, alerts, panels, and more. The classes are:
round. Here's a few examples applied to buttons.
Visibility ClassesBootstrap has classes for showing and hiding elements based on screen size. Foundation also has classes to show and hide elements, but they provide a few cool classes for showing and hiding based on portrait vs landscape and touch vs nontouch devices. The classes are:
<!-- show or hide for portrait vs landscape --> <p class="panel"> <strong class="show-for-landscape">You are in landscape orientation.</strong> <strong class="show-for-portrait">You are in portrait orientation.</strong> </p> <!-- show or hide based on touch vs nontouch --> <p class="panel"> <strong class="show-for-touch">You are on a touch-enabled device.</strong> <strong class="hide-for-touch">You are not on a touch-enabled device.</strong> </p>
Pricing TablesHaving prebuilt pricing tables is good to have since those can be a complicated thing to style up and get looking good.
InterchangeInterchange is a feature that uses media queries to dynamically load responsive content. What this means is that you can specify what HTML you want to show for mobile, tablet, and desktop sites. I know that we have this ability using the visibility classes, but using those classes just applies
display:none;. This doesn't stop the content from being loaded so this could mean that you have desktop components loading and slowing down your mobile users. Take a look at the Interchange docs and see how you can dynamically load a Google map for desktop users and a photo for mobile users.