Taking this front-end story to the next level, I’ll be discussing some of the most widely used and famous design frameworks. Designers use these frameworks for cross-platform development. It is recommended for you to get yourself a good practice with CSS and JS before getting into these frameworks.

Bootstrap

Bootstrap is a front-end library, which is based on HTML, CSS, and JavaScript. Initially named as Twitter Blueprint, it was released in 2011 by Jacob Thornton and Mark Otto. They later commercialized it and renamed to just “Bootstrap”. Designers use it for fast designing of front-end of websites. As it provides quick, mobile-ready, responsiveness having nice navigation design, buttons format, typography and much more.

Foundation Framework

Similarly, Foundation Framework also provides a responsive grid, mobile-ready options in its framework. Zurb launched Foundation in 2006. It has received more releases over the time as compared to Bootstrap however it is not used as widely as Bootstrap. There is not much difference between the components, grid layouts, and responsive setting. Bootstrap uses pixels as sizing units while foundation uses rems. Unlike bootstrap, you don’t have to add the exact CSS class in Foundation. The grid layout of Foundation preferred by most of the developers as it is more flexible as compared to Bootstrap.

Google’s Material Design

Material Design or Quantum Paper, named previously, is a google design language which is based on the card concept that Google introduced in its “Google Now” feature. Material was released in 2014 and is mostly used in Android applications. The design consists of objects or materials which has an x-y-z dimension and are 1dp thick in z-dimension which gives a 3D feel.

Material Limitations

Material design is very much different as compared to Bootstrap or Foundation. Google has set come limitations for designing a front-end based on material. Some of these limitations say that the material objects are solid, they cannot pass through each other or bend or fold.

Shadow-Graphics

The shadow-graphics play a big role in giving material objects a 3D look. Which are very much visible and understandable by humans. The shadow between the objects makes us believe that there is some space between the objects. The shadow graphics not only help in understanding the dimensional difference but also the motion of objects. You can also move material cards vertically or in z-axis.

Material design is a complete package for designers as it follows the real world physics and unification. It makes whole experience a lot more user-friendly. Whereas, both Foundation and Bootstrap serves their purposes very well.