Friday, February 7, 2014

COMPARISON OF BOOTSTRAP 3 Vs FOUNDATION 5

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 :
  •  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 :
  • Bootstrap has almost everything we can imagine.
  • Bootstrap will give almost every UI elements we can think of.

2 . REMs Vs PIXELS :-

Foundation :
  • Foundation uses REMs. Using REMs means we can just state font-size 80% and have the whole component shrink by 20%. 
Bootstrap :
  • 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 :
  • Foundation grid shrinks and stretches according to the current browser width.
  • Layout will morph like a transformers while re-sizing the browser width.
Bootstrap :
  • 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 :
  • 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 :
  • 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 :
  • Foundation has very smaller community support.
Bootstrap :
  • 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 :-

Foundation :
  • Desktop : Chrome, Firefox, Safari, IE 9+ 
  • Mobile : IOS (iphone,ipad) , Android 2, 4 (Phone, Tablet ), Windows phone 7+, Surface 
Bootstrap :
  • 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 


CONCLUSION :

  • 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. 
We can choose the framework depends on two situations,

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 

4 comments:

  1. Thanks for the comparison Gagan. I'm about to create a set of small landing pages which I'd like to have a max width of 750px but also scale down nicely to work on mobile devices. I've used both, but I think I'm leaning towards Foundation, as most of my CSS will be custom.

    ReplyDelete
  2. Please don't copy articles on your name without even giving a reference/credit to the original poster (or from where you copied). very down market this!! hope you take my advise in good spirit :) https://medium.com/frontend-and-beyond/8b3812c7007c

    ReplyDelete
  3. Video Converter for Mac-Total Video Converter for Mac is your best video converter for Mac to convert all videos to iPad, iPhone... Best all-in-one Video Converter for Mac.

    ReplyDelete