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

1. What are the key differences between Bootstrap 3 and Foundation 5? 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 don’t 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. 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. Bootstrap 3 (2017) Bootstrap, originally developed for Twitter, was created by Mark Otto, and Thornton with the release on August 19, 2011.

2. Mark Otto said that “A small team of Twitter sets out to improve the platform’s 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. 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. Framework Wiring - bootstrap3/ ├── CSS/ │ ├── bootstrap3.css │ ├── bootstrap3.css.map │ ├── bootstrap3.min.css │ └── bootstrap3.min.css.map └── js/ ├── bootstrap3.js └── bootstrap3.min.js

3. 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. 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%.

4. foundation5-sites/ ├── plugins/ │ ├── foundation5.abide.js │ ├── foundation5.accordion.js │ ├── 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 └── foundation5.min.js 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. 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. Performance

5. 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. 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. 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!

6. 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@gmail.com