Bootstrap 3 and Foundation 5

Development engineer, using Bootstrap. Front-end developers, using Foundation. Let's talk about why.

There are a number of key differences between Bootstrap and Foundation, but I think you just have to remember one thing:

The two design concepts of zurb and Twitter are clear, from the naming of their own frameworks: Bootstrap has a boot, boot-up meaning, in other words, it tries to deal with everything you need in your project. And Foundation has the meaning of creating, creating, in other words, it only gives you strong creativity in the project.

To maintain that view, let me now list the more critical differences between the two:

1. UI Elements

The Foundation arranges only a limited number of elements, and Bootstrap gives you all the elements you can imagine.

Zurb's design goal for Foundation is that even if you use pre-defined UI elements, you should not be as much of a Web site as you are.

On the other side, Bootstrap is trying to provide you with all the UI elements that are well defined.

2. REMs VS Pixels

Foundation uses REMs, while Bootstrap uses Pixels.

Using Pixels means that you have to accurately define a component's high, wide, padding, margin, and on every device and screen size, because different devices tend to show a great difference in performance.

Now Foundation 5 uses REMs instead of EM. This avoids the EM cascade problem: http://css-tricks.com/font-sizing-with-rem/

Using REMs means you can use font-size:80% directly; You can make the entire component and its subcomponents shrink by 20%.

It is worth noting that through REMs, you can leave the details of Pixels, so it is worthwhile to use the REMs to handle it.

The Foundation also provides a sass Mixin method to convert Pixels to REMs, so you can continue to define the page using Pixels thinking:

. element {
Width:rem-calc (10px); would be converted to REMs
}
3. Flexible grids VS pre-defined grids

The grid of the Foundation can be automatically adapted to the width of the current browser. Boostrap is a pre-defined grid size to fit the mainstream devices and screens.

Bootstrap will suddenly change its grid when you change the width of the browser.

Foundation will be flexible to match the current browser width, this is a new technical means, automatically adapt to the same time, can show the same effect as Transformer.

The Foundation has two main points when the grid changes: small, medium and large. All operations are only scaled down and enlarged, and are adapted to the width of the current browser. There is no need for a predefined screen size, and the more important reason is to encourage you to define different styles based on the size of the screen.

Using Bootstrap, you get a fixed or manifold grid, which means you need to set or say for the grid container is not a predefined width.

Using Foundation and Sass, you can freely adjust the maximum size of the mesh (medium and small automatically computed), the number of columns on the large screen, and the number of columns in the small screen.

4. Mobile device priority VS also mobile device support

The Foundation was designed with any four-corner screens in mind. The Bootstrap design is pre-divided into: mobile phones, tablets, desktops, and oversized desktops.

Building a site with a priority support for mobile devices means that it is definitely available on larger screens. So, Foundation encourages you to do this: mobile first.

If you use the Foundation's Sass media query Mixin, you will find that there is no specific media query to query what the mobile device is, but instead you use media query to define how the larger screen should be displayed.

When designing something, consider a desktop, which is likely to be a big problem in supporting a smaller screen, and first consider the phone, will let you focus on what is most important to the user, let your space to use the sense of increase.

5. Community

Bootstrap has a larger community. and using Foundation you have to be self-reliant.

Bootstrap is a great highlight of the community. It's a very big, all-encompassing, almost anything you can find.

If you choose Foundation, self-reliance may be what you have to master. Almost all of the solutions are for Bootstrap, and you can only build your own.

Conclusion

Ask yourself a few questions:

Do you want something to be easier to use or to make it more life-like?
Do you want to organize your own CSS, just let it be your base component?

Bootstrap 3 and Foundation 5