What are the key differences between Bootstrap 3 and Foundation 5?

1
What are the key differences between Bootstrap 3
and Foundation 5?
2
Outlining

• Front-end frameworks make life easier. Moreover,
  they also increase productivity and proved to be
  perfect for prototyping and building sites.
  Additions like cross-browser compatibility and
  ready-to-go CSS components work as cherries on
  top.
• Essentially, using a front-end framework means
  that you dont need to start from scratch every
  time you build a new website and web apps.
• Front-end frameworks, also defined as CSS
  frameworks are usually composed of a set of
  standard files like HTML, CSS, and JavaScript.

3

• Though there are dozens of useful frameworks, two
  of the most popular are Bootstrap 3 and
  Foundation 5. Although they are similar in many
  aspects, there are some fundamental differences
  as well. So, let's shed a little light on it.

4
Bootstrap 3 (2017)

• Bootstrap, originally developed for Twitter, was
  created by Mark Otto, and Thornton with the
  release on August 19, 2011.

5

• Mark Otto said that A small team of Twitter sets
  out to improve the platforms internal analytical
  and administrative tools. After some meetings
  around this one, we set out with a higher
  ambition to create another toolkit to use within
  Twitter, and beyond, and ended up with Bootstrap.
  
• The open-source front-end framework consists
  HTML, CSS and JavaScript. The modular and in
  version 3 contains fewer stylesheets. However,
  Bootstrap 4 has switched over to the Sass CSS
  pre-processor now. Bootstrap is based on an
  1170-pixel grid system which is a more responsive
  web design layout. The current version
  4.0.0-alpha.3 offers directories and files,
  grouping JS and CSS together with minified
  versions moreover.

6
Framework Wiring -

• bootstrap3/
• -- CSS/
• -- bootstrap3.css
• -- bootstrap3.css.map
• -- bootstrap3.min.css
• -- bootstrap3.min.css.map
• -- js/
• -- bootstrap3.js
• -- bootstrap3.min.js

• Bootstrap now supports the latest and stable
  releases of all major browsers and platforms. It
  has extended the support to Internet Explorer
  9-11 with Microsoft Edge as well.

7
Foundation 5 Framework (2017)

• Foundation is another responsive front-end
  framework developed ZURB, a product designing
  company. Foundation is open-source and has been
  registered in 2011 under the standard MIT
  license. It is pretty modular and consists mostly
  Sass stylesheets.

8

• The framework is based on the 940px grid system
  which is a responsive layout. Foundation offers
  its users with starter templates so that you can
  start your web projects even faster. Some major
  successful brands that use Foundation are Adobe,
  eBay, EA, Amazon, and Mozilla.
• Currently released version, Foundation 5, you
  will find the grouping JS and CSS together with
  minified versions also. With the version 6, ZURB
  has significantly cut the file size of the
  outputted CSS by implementing a code reduction by
  40-50.
• foundation5-sites/
• -- plugins/
• -- foundation5.abide.js
• -- foundation5.accordion.js

9

• -- foundation5.accordionMenu.js
• -- foundation5.orbit.js
• -- foundation5.responsiveMenu.js
• -- foundation5-flex.css
• -- foundation5-flex.min.css
• -- foundation5-rtl.css
• -- foundation5-rtl.min.css
• -- foundation5.css
• -- foundation5.js
• -- foundation5.min.css

Foundation also supports the stable releases of
all major browsers and platforms. For Windows,
Internet Explorer 9-11 and like Bootstrap 3,
Foundation also doesn't support IE8 because of
some of the grid properties it uses as well as
JavaScript.
10
Bootstrap or Foundation The Final Verdict

• All in All, I must mention two distinct areas
  that are the real differentiator browser design
  and the performance.

11
Performance

• Bootstrap 3 has taken stability and performance
  compatibility seriously. Upgrading to Saucelabs
  automated testing tools, the team has made sure
  that everything passes a test before committing
  their main branch respectively, making Bootstrap
  as my daily driver
• Alternatively, Foundation released as stable
  only a year ago. Some components and the
  structure in Foundation 5 were under development,
  while some were yet broken, affecting very much
  on the performance. The off-canvas is later
  revamped, and the settings are very flexible in
  the latest 6.3.

12
Grid System Design

• Foundation has a better grid system when it comes
  to cleanliness and the web design structure. The
  fact that Foundation has no containers and is
  primarily based on rows is a point stealer.
• Both Bootstrap and Foundation offer support for
  responsive grids and flexible breakpoints, but
  Foundation also supports responsive gutters,
  which are so easy to setup and seems like magic.
  The collapsed gutters are also a feature in
  Foundation.

13

• In respect to the backwards compatibility, both
  Foundation and Bootstrap use the similar class
  convention as their previous versions, making
  migration as painless as possible.
• Flexbox grids are also available in both
  Foundation and Bootstrap. However, Foundation 5
  clearly wins this comparison.
• Final Words
• So, this was my take on a little fight over
  Foundation 5 Vs. Bootstrap 3. I guess I should
  let you choose the winner. Do share your thoughts
  and let me know which one you prefer and why in
  the comment section below. Cheers!

14

• First published by www.ravisah.in
• About Me I am RaviSah, Delhi, India based
  Freelance web Designer/Developer. I passionately
  move pixels and lines of code to craft clean,
  responsive, and user-friendly websites.
• Call 919953435782 Email er.ravisah_at_gmail.com