Good day. The article tells about Material Design frameworks for creating Web-pages. If you are interested in the Material Design theme, as well as me, then Welcome under the cat, you may discover something new and interesting.



Briefly tell what Material Design, when it appeared and where it is used.



Material Design - Visual language, introduced in 2014 by Google, used most often in mobile applications. An example of using Material Design can be seen in many Google mobile apps (Play, Music, Books, etc.), as well as in Chrome OS.

If you want to find out more, then I advise you to visit the Material.io site - there you can learn everything in much more detail than in this post. Let's go directly to the topic of the post - to the frameworks.

')

Materialize

Links: Materialize and Github



And the first on my list will be Materialize, which got here thanks to interesting features.

The first commit is dated 2014, actually the same year when Material Design was presented at the Google conference.

From pleasant it may be noted that Alpha 1.0 recently came out, which introduced independence from third-party JS libraries, such as JQuery and Hummer.js

As I said at the beginning, Materialize has several interesting pieces that distinguish it from others, namely the Parallax effect , Scrollspy and Scrollfire (the appearance of elements as the page scrolls).



Size: ~ 194kb

Material Design Lite

Links : Material Design Lite and Github



The official Google framework for Web.



Unlike Materialize, Material Design Lite does not depend on other JS frameworks, which makes it a little easier.



The word Lite is not in vain in the name - this framework offers only the main components of Material Design, there is no Carousel, mesh, Parallax effect, etc.

Of the benefits it can be noted that there is support for different color themes.

The site has a designer so that you can create your own color theme.



Size: ~ 27 kb

Mui

Links : MUI and Github



Positioned as a lightweight framework, however, it uses Angular and React, which obviously does not make it easier, I would say that it is the hardest of all, not counting the topic for Bootstrap, which will be discussed later.

The large weight of the framework is compensated by the support of React.js version 16, Angular.js and the presence of a module for the layout of mail letters.

Letters created using this framework are supported by many popular platforms for working with e-mail boxes, such as GMail, Microsoft Outlook, Apple Mail, etc., and if the letter is beautifully designed and, above all, nice to read, then using regular mailing you can be interested in a person your product or something else.



Size: ~ 61kb

Surface

Link : Surface and Github



The framework is written in pure CSS without the use of Javascript, this fact makes it the easiest of all listed. By the way, it's also interesting that the framework was written in just 2 weeks.

In spite of all these facts, he has all the main elements of Material Design.

But unfortunately, there is no support for Bower and NPM.



I would like to separately note that the author of the framework requests that donations sent to him be sent to the Foundation for Cancer Research in the UK.



Size: ~ 5.7kb

Bootstrap Material Theme

Links: Bootstrap Material Design and Github



As the name suggests, this is not a separate framework, but simply a theme for Bootstrap.

As far as the theme for Bootstrap is, then there are all the chips from Bootstrap and all the elements from Material Design, there are even built-in icons in the Material style.



Size: ~ 648kb



Separately, I would like to note that all the libraries listed above have grid support with 12 columns.

Conclusion

If you need a simple ax, or just a lightweight framework, then your choice will most likely be Surface or Material Design Lite. If you need a ready-made solution, where there will be various sliders and, for example, the Parallax effect, then most likely you will stop at Materialize. If you are doing a more complicated project, where MVC will be used, and you need React.js or Angular.js support, then you should look at MUI.

Separate attention, in my opinion, the topic for Bootstrap deserves special attention.

I believe that it will be rational to use it if you are just as conservative as I have the whole site written using Bootstrap and you do not want to use 10 CSS libraries in one project or you want to slightly reduce the load time of the site.



If you have any complaints about the text, then I welcome any questions and any kind of discussion in the comments, I will try to answer all. Thank you for reading the article, I hope it will give you at least somehow, but it will help with the selection of the framework you need.