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.
Table of Contents
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.