Comparison of Material Design CSS frameworks



Good day. The article talks about Material Design frameworks for creating Web pages. If you are interested in the theme of Material Design, as well as me, then Welcome to Cat, perhaps you will discover something new and interesting.

I’ll briefly describe what Material Design is, when it appeared and where it is used.

Material Design - The visual language introduced in 2014 by Google is most often used in mobile applications. An example of the use of Material Design can be seen in many Google mobile applications (Play, Music, Books, etc.), as well as in Chrome OS.
If you want to find out more, I advise you to visit Material.io - there you can find out 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 functions.
The first commit is dated 2014, in fact, in the same year when Material Design was presented at the Google conference.
It’s nice to note that recently Alpha 1.0 came out, which introduced independence from third-party JS libraries, such as JQuery and Hummer.js.
As I said at the beginning, Materialize has some interesting features that distinguish it from others, namely the Parallax effect . Scrollspy and Scrollfire (the appearance of elements as you scroll the page).

Size: ~ 194kb

Material Design Lite


Links : Material Design Lite and Github
The official Google framework for the Web.

Unlike Materialize, Material Design Lite is independent of other JS frameworks, which makes it a little easier.

The word Lite is in the name for a reason - this framework offers only the main components of Material Design, there is no Carousel, mesh, Parallax effect, etc.
Of the advantages, it can be noted that there is support for different color themes.
The site has a theme designer where 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 than all, except for the topic for Bootstrap, which will be discussed later.
The large weight of the framework is offset by support for React.js version 16, Angular.js and the presence of a module for the layout of mail letters.
Letters made up using this framework are supported by many popular platforms for working with e-mail boxes, for example GMail, Microsoft Outlook, Apple Mail, etc., and if the letter is beautifully designed and, first of all, pleasant to read, then using regular mailing you can interest a person in your product or something else.

Size: ~ 61kb

Surface


Link : Surface and Github
The framework is written in pure CSS without using Javascript, it is this fact that makes it the easiest of all. By the way, it’s also interesting that the framework was written in just 2 weeks.
Despite all these facts, he has all the basic 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 asks to send donations directed to him to the Cancer Research Foundation 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 just a theme for Bootstrap.
As far as this theme is for Bootstrap, there are all the features from Bootstrap and all the elements from Material Design, there are even built-in icons in the style of Material.

Size: ~ 648kb I
would like to note separately that all of the above libraries have grid support with 12 columns.

Conclusion


If you need a simple, like an ax, or just a lightweight framework, then your choice will most likely be Surface or Material Design Lite. If you need a completely turnkey 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 complex project where MVC will be used, and you need support for React.js or Angular.js, then you should look at the MUI.
Special attention, in my opinion, deserves special attention to the theme for Bootstrap.
I believe that it will be rational to use it if you are the same conservative as I your whole site is written using Bootstrap and you don’t want to use 10 CSS libraries in one project or 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 everything. Thank you for reading the article, I hope it will at least somehow, but it will help with the selection of the framework you need.