Home » Moving From Bootstrap to Foundation

Moving From Bootstrap to Foundation


Hi everyone,

I have always been a proponent for building things from scratch. From the UI to the responsive nature of websites. But with new tools developed a daily basis to make building from scratch just that much easier.

About a year ago, I decided to start incorporating bootstrap into client projects. At first, as with all things, I was very awkward with using it, asking for help from others every 10 minutes. But soon, I started to get the hang of things and figured out how to customize things the way I liked. And it was not the vast, growing market of themes available for Bootstrap that attracted me to use it, it was the under the hood things such as the grids that enticed me to use it. I mean, I would spend 3 times as long trying to get a set of elements equally sized and spaced in 1 row when I did things from scratch. Bootstrap made me realize that frontend frameworks were not all that bad. I mean they had many utility based things that made building from scratch so much easier.

But a few weeks ago, I started to hear from a lot of my friends that Foundation was another great frontend framework and that Foundation was packed with great stuff. So I decided to take a look and try it out. And boy was that a right move. Here are a few reasons I made the move.

  • Grid Systems. Foundation grid systems seem to be more robustly built. It is better especially when you compare Bootstrap’s and Foundation’s grid systems across platforms.
  • Philosophy. There is a shift in philosophy when it comes to Foundation. In bootstrap the general idea rapid prototypes; being able to just drop the bootstrap library and having it just work. In Foundation, however, it has shifted to the idea of designing things yourself and customizing things from the framework’s barebones.
  • Lighter Weight. In many instances through out Foundation, it is lighter weight as compared to Bootstrap. For example, Foundation implements Zepto which is lighter weight compared to the full fledged jQuery library used by Bootstrap.
  • SASS over LESS. Although a whole other debate can be had on SASS vs. LESS, it is important to understand why Foundation uses SASS over LESS, which is used by Bootstrap. SASS is useful as it contains many CSS helpers that takes the work out of creating all those custom styles. Also, Foundation utilizes Compass for compiling, which is great because Compass has cleaner markup and gets automatic mixin updates.

So this post also has the dual purpose of providing information to people who are making the move from Bootstrap to Foundation and notice some aesthetics that they can not seem to be able to replicate in Foundation.

Font Weight. One thing that I noticed when I moved from Bootstrap to Foundation was that the font weights were different in Bootstrap and Foundation despite using the same font and font-weight (Seems to apply to only webkit based browsers). Below is an example of what I mean. Luckily there is a fix to make the Foundation font weight the same as the Bootstrap font weight.

 

Font weights between bootstrap and foundation vary in webkit browsers. Bootstrap tends to render a thinner font where as Foundation adds what looks like a stroke to their fonts.

An example of default Bootstrap (‘Home Sweet Hall’ text) vs default Foundation (‘One Font, Tons of Icons’ text) font weights for Helvetica Light

I plan to constantly update this post with new information and fixes that I have found, so check back later. And as always, if there is something you have a question about or want to suggest a fix that you have found, leave a comment.

Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *