Accueil > About wyziwyg > Bootstrap 4 OR Foundation 6

Bootstrap 4 OR Foundation 6

Choose your favorite framework between those hot last releases

Zurb Foundation vs. Twitter Bootstrap

In the vast world of rapid prototyping CSS frameworks and toolkits, there are a ton of different options to choose from, but ever since Twitter’s Bootstrap hit the scene it seems like it has largely gobbled up this market. Is there room or reason for anything else ?

The folks at Zurb think so and aren’t about to abandon their widely successful Foundation project.
So what is Foundation ? Zurb describes it as “an easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.”

Right from that description you can tell that Zurb is putting a lot of emphasis on the cross-device aspect of its layout grid. Interestingly enough, the word “responsive” doesn’t appear anywhere on the Foundation site (that I can find), but the benefits are definitely similar : design one project that works everywhere.
Is It Like Bootstrap ?

Both Bootstrap and Foundation seek to give you all of the tools that you need to quickly perform CSS-based layout and prototyping work with some JavaScript goodies thrown in. They’re also both marketed with a heavy emphasis on clean, minimal design, which is a result of the extensive default styling on things like typography.

The grid

With Foundation, you start with a flexible twelve column grid, which responds well to browser resizes and uses media queries to handle the shift to smaller devices. In Bootstrap, you also have a twelve column grid that makes heavy use of media queries. Here you have the option to choose between fluid and static columns, which is nice.

Implementing the Foundation grid should be a snap if you’ve used other grid systems before. Yes, it does involve the use of non-semantic class names so if you hate frameworks for that reason, this won’t be the one that changes your mind.

Both grid systems have all of the advanced features that you need : nesting, offsets, pushing/pulling, etc. As with the code above, you’ll find that with these features, Foundation’s syntax is a little more straightforward and easy to read while Bootstrap’s is more succinct.

Basic UI Elements

Both of these frameworks contain pre-styled but customizable UI elements so that you can quickly mockup your app or web page without giving too much thought to how you’re going to structure different pieces.

Forms, Tabs, and Labels

It’s simply not worth going through every UI element and comparing the syntax, you should get the picture by now. Both frameworks stock you up on the most common UI items so that you can implement them with virtually no heavy lifting whatsoever.

Tabs, navigation, breadcrumbs, forms, labels, tables ; if you want ‘em, you got ‘em no matter which of these you’re using. That being said, if you’re looking for quantity, Bootstrap really takes the lead here and seems to just pack in a ton of interesting UI elements. Each framework has some unique pieces not in the other, but Bootstrap wins the numbers game.

Which Do You Think Is Better ?

You should give both frameworks a test drive to see which you gel with better.
Finaly, when you don’t have any opinion, it could be interesting to ally the majority. Than we’ll see with the two branches of the wyziwyg plugin which one have the more succes !