Development engineers, using Bootstrap, front-end developers, using Foundation . Let's talk about why.
There are many key differences between Bootstrap and Foundation, but, I think you only need to remember one thing:
The two design concepts of ZURB and Twitter are very clear, as they can be seen from their naming of their own frameworks: Bootstrap means bootstrap, bootstrap, in other words, it tries to handle everything you need in your project. Foundation means creation, creation, in other words, it just gives you strong creativity in your project.
Keeping this view, now I'll list more of the key differences between the two:
1. UI elements
Foundation only arranges a few limited elements, while Bootstrap gives you all the elements you can imagine.
ZURB's design goal for Foundation is that even if you use predefined UI elements, it should not look too similar to your website.
On the other hand, Bootstrap tries to provide you with all the defined UI elements.
2. REMs VS Pixels
Foundation uses REMs, while Bootstrap uses Pixels .
Using Pixels means you have to accurately define the height, width, inner margins, outer margins of a component, and in each device and screen size, because different devices tend to have a big difference in display effects.
Now Foundation 5 uses REMs, not EM. This avoids the EM cascade problem.
Using REMs means you can use font-size: 80%; to reduce the entire component and its subcomponents by 20%.
It is worth mentioning that with REMs, you can get rid of the details of Pixels, so it is worth it to use REMs to handle them.
Foundation also provides a mixin method of sass to convert Pixels to REMs, so that you can continue to use the Pixels thinking method to define pages:
.element { width: rem-calc(10px); // will be converted to REMs}3. Flexible grid vs predefined grid
Foundation's grid can automatically adapt to the width of the current browser. Boostrap predefined several grid sizes to adapt to mainstream devices and screens.
Bootstrap will suddenly change its grid when you change the browser width.
Foundation will flexibly adapt to the current browser width. This is a new technical method. While automatically adapting, it can perform the same effect as Transformer.
Foundation has two key points when the grid changes: small, medium and large. All operations are only reduced and enlarged and adapted to the width of the current browser. Predefined screen sizes are not required, and the more important reason is that you are encouraged to define different styles based on the size of the screen.
Using Bootstrap, you get a fixed or manifold mesh, which means you need to set or not a predefined width for the mesh container.
With Foundation and Sass, you can freely adjust the size of the largest grid (medium and small ones are automatically calculated), the number of columns for large screens, and the number of columns for small screens.
4. Mobile devices are preferred vs. Mobile devices are also supported
Foundation was designed with any four-corner screen in mind. Bootstrap was designed with pre-divided into: mobile phones, tablets, desktops and desktops with oversized screens .
Building a mobile-first website that supports mobile devices means it is certainly available on a larger screen. 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 a mobile device is, but you use Media Query to define how it should be displayed on a larger screen.
If you first consider desktop computers when designing things, you may encounter big problems when supporting smaller screens. If you first consider your phone, you will focus on what is most important to users and increase your sense of space.
5. Community
Bootstrap has a larger community. And with Foundation you have to be more self-reliant.
The big highlight of Bootstrap is the community. It is a very huge, all-inclusive, and you can find almost anything you want.
If you choose Foundation, self-reliance may be something you have to master. Almost all solutions are for Bootstrap, and you can only build your own.
in conclusion
Ask yourself a few questions:
Do you want something to be more useful or make it more lifelike?
Do you want to organize your own CSS and just make it your underlying component?
The answers are: Bootstrap. Foundation .
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
Is this an interesting comparison? I hope it will be helpful for everyone to understand the front-end frameworks Bootstrap 3 and Foundation 5.