What to use without bootstrap?

What to use without bootstrap?

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

There are many key differences between Bootstrap and Foundation, however, I think you only need to remember one thing:

The two design philosophies of ZURB and Twitter are very clear, from their pairing You can tell from the naming of your own framework: Bootstrap means to guide and bootstrap at startup, in other words, it tries to handle everything you need in your project. And Foundation means to create, in other words, it only gives you everything you need in your project. Powerful creativity.

Keeping that perspective, let me now list more key differences between the two:

1. UI Elements

Foundation only arranges a limited number of 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 , and it shouldn’t look too similar to everyone’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, padding, and margin of a component, and in each A device and screen size, because different devices often have very different display effects.

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

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

It is worth mentioning that through REMs, you can break away from the details of Pixels, so it is very worthwhile to use REMs to handle it.

Foundation also provides the sass mixin method to convert Pixels to REMs. In this way, you can continue to use the Pixels way of thinking to define the page:

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

3. Flexible grid VS predefined grid

Foundation's grid It can automatically adapt to the width of the current browser. Boostrap predefines several grid sizes to adapt to mainstream devices and screens.

Bootstrap will suddenly change it when you change the browser width. Grid.

Foundation will flexibly adapt to the current browser width. This is a new technical means. While automatically adapting, it can show the same effect as Transformer.

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

With Bootstrap, you get a fixed or manifold grid, which means you need to set or configure the grid container separately. Not a predefined width.

Using Foundation and Sass, you can freely adjust the size of the largest grid (medium and small are automatically calculated), the number of columns for large screens, and the number of columns for small screens Number.

4. Mobile device first VS also supports mobile devices

Foundation has been designed with any four-corner screen in mind. Bootstrap is designed in advance: Mobile , tablets, desktops and extra-large screen desktops.

Building a mobile-first website means it will definitely be usable on larger screens. So, Foundation encourages you to do this: Mobile Prioritize.

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 a Media Query to define what should be on a larger screen. How to display.

If you think about desktops first when designing something, you are likely to encounter big problems in supporting smaller screens, and thinking about mobile phones first will allow you to focus on what is most important to users. , making your space more useful.

5. Community

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

The biggest highlight of Bootstrap is the community. This is a very huge and all-encompassing community, and you can find almost anything you are looking for.

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

The above is the detailed content of What to use without bootstrap?. For more information, please follow other related articles on the PHP Chinese website!