Bootstrap 3 and Foundation 5 are the most popular front end development frameworks currently used for desktop and mobile development web applications . We compared both the frameworks in terms of performance, flexibility, usage, community and features.
1 . UI ELEMENTS :-
- Foundation has limited number of UI elements.
- ZURB's intention with foundation was not to make all the web look the same with pre-designed UI elements.
- Bootstrap has almost everything we can imagine.
- Bootstrap will give almost every UI elements we can think of.
2 . REMs Vs PIXELS :-
- Foundation uses REMs. Using REMs means we can just state font-size 80% and have the whole component shrink by 20%.
- Bootstrap uses pixels . Using pixels means we have to explicit declare a height, width, padding margin of a component on every target device and screen size we want to give it a different look using media queries.
3 . FLEXIBLE GRID Vs PRE-DEFINED GRIDS
- Foundation grid shrinks and stretches according to the current browser width.
- Layout will morph like a transformers while re-sizing the browser width.
- Bootstrap has a pre defined set of grid sizes for main devices and screens.
- It will change its grid like a transformer while we resize browser width.
4 . MOBILE FIRST Vs MOBILE ALSO :-
- Foundation was designed for any four corners screens.
- Building sites for mobile first means it will always be usable on bigger screens. Foundation encourages to start this way.
- Bootstrap was designed for mobile, tablet, desktop and large desktops.
- Responsiveness was added as s feature in latter versions. Here we can get some special media queries for different screen sizes but main target is the desktop.
5 . COMMUNITY :-
- Foundation has very smaller community support.
- Bootstrap has the larger community support. It is huge and everywhere we look around we will find a gem or component built for bootstrap.
6 . BROWSER SUPPORT :-
- Desktop : Chrome, Firefox, Safari, IE 9+
- Mobile : IOS (iphone,ipad) , Android 2, 4 (Phone, Tablet ), Windows phone 7+, Surface
- Chrome ( Mac, Windows, IOS, Android )
- Safari ( Mac, IOS )
- Firefox (Mac, Windows )
- Opera (Mac, Windows)
- IE 8+
7 . VERSION:-
Foundation : v5 (latest)
Bootstrap : 3.1.0 (latest)
8 . CREATOR :
Foundation : Zurb
Bootstrap : Twitter
9 . License :
Foundation : MIT License
Bootstrap : Apache License v2.0
10 . LATEST RELEASED :
Foundation : November 21, 2013
Bootstrap : December 5, 2013
- Bootstrap was a great to bootstrap a site quickly with lots of accessible defaults. It was a quick to get started but took some work to alter.
- Foundation seems to provide a great foundation on which to create more customized sites. It's more flexible but needs more upfront thought.
1 . Do you Plan your CSS carefully and have the least you need to use as the base to your project ?
Ans : Choose Foundation
2 . Do you need something easy to use and ready to make your web app ?
Ans : Choose Bootstrap