Foundation 6 Vs Bootstrap 4

Foundation 6 Vs Bootstrap 4

Frameworks are great. They make a developer’s life easy. When prototyping a website, you don’t have to start from scratch. You either have all the components and style that you need, or you have a base that you can start working on. And then later you can customize them and give your own styles to them.

So, what do frameworks actually consists of? Front-end frameworks or CSS frameworks, are generally pre-written HTML, CSS, and JavaScript code that you can use in creating your website.

There are plenty of advantages of using a framework. The major one is, saving time. You can save a ton of productive time when using a framework that you can use for other important areas and get your work done in much less time.

Then you have the advantage of consistency. Since most of the styling and components are predefined, there will be less conflict on naming conventions, etc. Also making it easier to maintain the websites.

Then there is browser compatibility. You don’t have to worry about browser compatibility. The framework you are using is already been tested for most of the web browsers and they let you know which browsers it does not support.

You can add more components that you would not have otherwise or you don’t add them because it’s hard to implement otherwise. Imagine adding a carousel or a modal. But a downside is that if some component that you need is not in the framework you might need to add it yourself or use a third-party plugin.

What is Bootstrap and Foundation framework?

When it comes to front-end frameworks these are the two big names – Bootstrap and Foundation. So comes the questions. Which is better and which one should I choose for my website. The answer is – It depends. Both of the frameworks have their own characteristics. The solution is to choose the one that can do what you need to do.

Bootstrap

Bootstrap was developed at Twitter as an internal tool by two of their employees Mark Otto and Jacob Thornton in order to remove inconsistencies among developers. Later they decided to release it as open source on August 19, 2011. Then The name Twitter was dropped from the Twitter Bootstrap. The current version of the framework is V4.0.0 beta 1.

Foundation

[Tweet “Foundation is also an open source front-end development framework by ZURB design studio”]

Foundation is also an open source front-end development framework by ZURB design studio. Foundation was the first framework to go responsive and mobile first. Foundation is currently at version 6.4.3

What is similar between them?

  • They are both open source framework and released under MIT license.
  • They both have a 12 column grid system.
  • They are both responsive and mobile-first framework.
  • They both have pre-written components.
  • Sass as the CSS preprocessor

At first glance, both the frameworks look all the same. It’s when you dig a little deeper to know the key differences that make them what they are. Getting to know both the frameworks better and what are the differences will help decide which is better to do the job at hand.

So let’s compare both the frameworks based on certain criteria. We might not come to a consensus as to which one is better, but we can still determine which is better in these specific criteria. I have compared the two frameworks based on their popularity, pre-built components, CSS pre-processor, customization, grid system, browser support, performance, and community support,

Popularity

Bootstrap is undoubtedly the most popular among all the front-end frameworks. The latest version Bootstrap 4 is even better than the previous versions. Also, Bootstrap is the most popular project on GitHub.

When comparing Bootstrap and Foundation, Bootstrap’s numbers are far superior to the foundation’s. At the time of writing, Bootstrap has 115,193 stars on GitHub and Foundation has 22,227 stars.

The graphs in Google Trends also have to say a similar story. Compare how many times the terms Bootstrap 4 and Foundation 6 has been queried.

trends.embed.renderExploreWidget(“TIMESERIES”, {“comparisonItem”:[{“keyword”:”bootstrap 4″,”geo”:””,”time”:”today 12-m”},{“keyword”:”foundation 6″,”geo”:””,”time”:”today 12-m”}],”category”:0,”property”:””}, {“exploreQuery”:”q=bootstrap%204,foundation%206&date=today 12-m,today 12-m”,”guestPath”:”https://trends.google.com:443/trends/embed/”});

The below graph shows numbers of how many times Bootstrap and Foundation have been typed into Google. The clear winner is Bootstrap 4.

Components

Both Bootstrap and Foundation facilitate coding and help us save time using the pre-built components that we can build into our application. In the first look, both have similar components with different designs. But if we take a closer look, the differences surface.

In terms of design, Bootstrap components seem to be more ready-to-use. There are more examples for each component in Bootstrap than in foundation.

Both of the frameworks have certain components in common, like buttons, alerts, forms, tabs etc. but they differ in components like Jumbotron, carousel, scrollspy, popovers etc. Then there is inline lists, pricing tables and video in Foundation.

Documentation

The documentation for Bootstrap is very elaborate and explanatory. The documents have everything from installation, getting started and example templates to get your hands on. The Bootstrap documentation os much more clear and organized than that of Foundations.

Primary CSS Units

Both the frameworks use em‘s and rems as primary CSS units. em and rem are relative CSS units that help size the elements’ size relative to the font size which is quite helpful when creating a responsive design.

Foundation uses rems as primary CSS units but Bootstrap have filled the gap of CSS with the latest version.

Bootstrap used to have pixels as its primary CSS unit but changed to the relative CSS units with Bootstrap 4. But it still uses pixels in measuring responsive break-points since they can not measured relative to the font size.

Preprocessor

CSS preprocessor helps to work with CSS easier. CSS is nice when working with small web applications and websites, but can be a pain in the neck when working on large-scale applications. It can help keep the CSS files organized and reduces time with its features like mixins, functions, variables, nesting etc.

Foundation uses Sass as it CSS preprocessor and so does Bootstrap. Bootstrap used to have Less as its CSS preprocessor but then jumped tracks to Sass with the latest version Bootstrap 4.

Customization

Bootstrap, as the name indicates lets you build a website as quickly as possible. So the components in Bootstrap are already well-polished and ready to use. There’s is not much you need to do in terms of styling. However, using the components as it is can produce a result of getting the default Bootstrap look. Which is okay, but it will look far too common given its popularity and may indicate that you have not put much effort into what you have created. But you can customize the Bootstrap by overriding the Bootstrap styling.

Foundation stands true to its name as it gives a base for the developers to work on. So it gives you a lot scope of customization. But customization can prove to be time-consuming.

With the Sass CSS preprocessor, customization for either of the framework should not make customization much of a difficult task. But if you want your application up and running as quickly as possible, I would suggest using Bootstrap.

Grid System

The grid system is really important in creating a responsive layout. It is an integral part of a framework. The grid system is what determine what the layout should look like and what content goes where on each and every device.

But in this part Foundation has the upper hand. Out of the two frameworks, Foundation was the first to go responsive and mobile-first. Bootstrap, however, did catch up to be responsive in Bootstrap 2.0 and went mobile-first with Bootstrap 3.

Both frameworks have a 12 column grid system. Still, there are some noticeable differences other than the naming of the classes and the syntax. The Block Grid being a major highlight. This feature in Foundation allows you to align an unordered list into equally spaced grid no matter the viewport.

Bootstrap has gone flexbox by default to Bootstrap 4. So it is easier to create rows of equal height with Bootstrap, although the foundation has optional flexbox.

Browser and OS support

Both frameworks work well on all the major modern browsers. These include all the latest versions of Chrome, Firefox, Opera, Safari, and Interner Explorer. Microsoft edge is supported by Bootstrap for Windows.

Bootstrap since the alpha 6 release went flexbox by default. So that came at a price dropping the IE9 support. Foundation, however, supports IE9+. So if you want IE9 support for your work, then you should opt for Foundation or if you want to stick to Bootstrap, then you would have to use Bootstrap 3.

Bootstrap does not support proxy browsers such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, and Amazon Silk.

Both the frameworks support all the operating systems including Android, Windows 10, Mac, iOS, and Windows

Number of resources

There are a lot of resources available on the internet for Foundation and Bootstrap. But Bootstrap is the undisputed winner. A number of resources, third-party plugins, themes, templates, is available for both  Bootstrap and Foundation online. But the number of resources for Bootstrap is remarkable.

Performance and Stability

When it comes to performance, both frameworks are almost identical. any difference in performance is noticeable enough to make a distinction.

In terms of stability, Foundation 6 is a little bit more stable than Bootstrap 4. Foundation is a production-ready and any bugs are constantly being fixed. Bootstrap 4 is currently in beta after spending almost two years in alpha stage. There is one more beta expected before the release candidates. Though many bugs have been fixed and are still being fixed, there can still be minor changes that can be expected from the framework.

Community

This is where Bootstrap leaves every other framework behind, without any doubt. The Bootstrap community is huge. So in case you run into any issues, chances are you are not the first, or you are not alone. And you can find a solution to your problem easily.

The community for Foundation is not as huge as Bootstrap’s but is growing and is large enough to provide any technical support.

 Conclusion

There’s no doubt that frameworks are here to save the day, every day for developers. They make coding easy, organized and save a ton of time.

When it comes to Bootstrap and Foundation, it’s not about who wins in the battle or which framework is better than the other. Ultimately, it’s about which framework can work better for the requirement at hand. So the answer is to know the requirements beforehand and then opt for the one which is better suited to fulfill those requirements.

If you have a favorite between the two of them, or you think some other framework is better, let us start a conversation. Write your opinion in the comment section below.

 

Comments(1)

Leave a Reply

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