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.
Everything 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.
Bootstrap 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.
Bootstrap 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>
Having prebuilt pricing tables is good to have since those can be a complicated thing to style up and get looking good.
Interchange 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.
Joyride helps to create those site tours (some people call them wizards I believe) that we see when signing up for our favorite websites or applications.
An often seen feature that is also included in the framework.
Clearing Lightbox offers a great looking lightbox with gallery and caption features.
Range Sliders are nice sliders that let you build out draggable sliders.
Remember, this is not to say that Foundation is better than Bootstrap. Bootstrap also has features that you won’t find in Foundation. This is just a look at some cool features that you can find in Foundation and we recommend trying out multiple front-end frameworks (like you would programming language or server-side frameworks) to find out what works best for your tastes or current project.
Want More Foundation?
Here are some more articles to get you going with Foundation: