Web front-end development framework BOOTSTRAP3 VS Foundation5_javascript Tips

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 need to remember one thing:

Zurb and Twitter's two design philosophies are clear, from their naming of their own frameworks: Bootstrap has a boot, the power to boot, 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 your project.

To keep this view, now I'm going to list more key differences between the two:

1. UI Elements

Foundation only a limited set of elements, Bootstrap gives you all the elements you can imagine.

Zurb's design goal for Foundation is that even if you use predefined UI elements, you shouldn't look too much like your site.

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

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, inner margin, outer margin, and on each device and screen size, because different devices often show a great difference in the effect.

Now Foundation 5 uses REMs instead of EM. In this way, the EM cascade problem is avoided.

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

It is worth noting that, through REMs, you can get out of Pixels details, so it is worthwhile to use REMs to deal with.

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

. element {
 Width:rem-calc (10px);//would be converted to REMs
}

3. Flexible grid VS predefined grid

The Foundation grid can automatically fit the width of the current browser. Boostrap is a predefined number of mesh sizes to fit the mainstream of the device and screen.

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

Foundation will be flexible to fit the current browser width, this is a new technology, automatic adaptation at the same time, you can perform the same effect as Transformer.

Foundation when the grid changes there are two main points: small, medium and large. All operations only shrink and enlarge, and adapt to the width of the current browser. There is no need for a predefined screen size, and the main reason is to encourage you to define different styles based on the size of the screen.

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

With Foundation and Sass, you can freely adjust the maximum size of the grid (medium and small automatically calculated), the number of large screen columns, the number of small screen columns.

4. Mobile device priority VS. Mobile Device Support

Foundation has been designed with any four-corner screens in mind. The Bootstrap design is divided into: mobile phones, tablets, desktops and large-screen desktops .

Building a Web site that gives priority to mobile devices means it must be available on a larger screen. So, Foundation encourages you to do this: move first.

If you use Foundation's Sass media query mixin, you will find that there is no specific media query for querying what a mobile device is, but instead you use media query to define how it should be displayed under a larger screen.

When you design something, it's likely that you'll have a big problem supporting a smaller screen, and that you'll focus on what's most important to your users and make your space sense rise.

5. Community

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

The Bootstrap very big bright spot is the community. This is a very large, all-encompassing, almost anything you can find.

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

Conclusion

Ask yourself a few questions:

Do you want to make something more easy to use or to make it more life-breathing?
Do you want to organize your own CSS and just make it your basic component?
The answer is: Bootstrap. Foundation.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

Isn't it an interesting comparison that would like to help you understand the front-end framework bootstrap 3 and Foundation 5.