Shulou(Shulou.com)06/03 Report--

This article mainly introduces what can be used without bootstrap, the article is very detailed, has a certain reference value, interested friends must read it!

You can use foundation without bootstrap. In general, development engineers will use Bootstrap, while front-end developers will give priority to Foundation.

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 clear, as can be seen from the naming of their framework: Bootstrap means boot, bootstrap, in other words, it tries to deal with everything you need in your project. And Foundation means to create, to create, in other words, it only gives you strong creativity in the project.

Keeping this view, let me now list more key differences between the two:

1. UI element

Foundation arranges only a limited number of elements, while Bootstrap gives you everything 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 everyone else's 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 that you have to accurately define the height, width, inner and outer margins of a component, and in each device and screen size, because the display effect of different devices tends to vary greatly.

Now Foundation 5 uses REMs instead of EM. In this way, the EM cascade problem: http://css-tricks.com/font-sizing-with-rem/ is avoided.

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

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

Foundation also provides sass's mixin method to convert Pixels to REMs, so you can continue to define pages using Pixels's way of thinking:

.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 predefines several grid sizes to fit mainstream devices and screens.

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

Foundation adapts flexibly to the current browser width, which is a new technology that automatically adapts while showing the same effect as Transformer.

Foundation has two main points when the grid changes: small, medium and large. All operations are only zoomed out and zoomed in, and adapted to the width of the current browser. There is no need for a predefined screen size, and more importantly, you are encouraged to define different styles according to the screen size.

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

With Foundation and Sass, you are free to resize the largest grid (medium and small ones are automatically calculated), the number of columns on the large screen, and the number of columns on the small screen.

4. Mobile device first VS also supports mobile devices

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

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

If you use 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.

Thinking about desktops when designing things is likely to have big problems supporting smaller screens, and thinking about phones first will make you focus on what is most important to users and increase your sense of space use.

5. Community

Bootstrap has a larger community. With Foundation, you have to be self-reliant.

One of the great highlights of Bootstrap is the community. This is a very huge, all-inclusive, almost anything can be found.

If you choose Foundation, self-reliance may be something you have to master. Almost all solutions are for Bootstrap, so you have to build your own.

The above is all the contents of the article "what can I use without bootstrap?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.