6 Best Free Material Design Frameworks For Your Website
Articles,  Blog

6 Best Free Material Design Frameworks For Your Website


Hey buddy, First of all tell me how is my
audio quality, because I have newly bought a Neewer NW-700 studio certified condenser
microphone, and also sorry for not uploading a video for last two weeks. I really apologize for that. So, today’s video will be about 6 best free
Google’s material design frameworks for your website. Here I am talking about the HTML websites,
not WordPress or Jekyll. In future I will be making a video for WordPress
and Jekyll also. Please check out the I button at the top,
to watch those videos. Also I have made a video on 12 best and free
HTML templates, please click on the top right corner now to watch it. Okay, enough of wasting time, because I know
you have come here to watch the 6 best free material design frameworks for your website. So, without wasting any time, let’s start. On the first we have Materialize CSS. This is a mixed framework of CSS and JavaScript. Basically JavaScript is used for animations
and CSS is used for styling. The Materialize CSS framework is available
in two versions, first is in general CSS and second in SASS. At the time of making this video, the CSS
version is only 921 Kilobytes and the SASS version goes for 1010 Kilobytes. For installing Materialize CSS, you can download
it, use a CDN which is a content delivery network, install it from NPM which is node
package manager or you even have an option to get it from bower. Here you also get a sample HTML code to get
started with all files linked up, but make sure you have same project structure as shown
on the screen. Also there are 4 templates pre-made for you. In that 2 templates are free to download and
use and other 2 templates are paid. The price range for paid templates goes for
around 19 to 29 dollars. If you are building your own theme from scratch
then I think this theme can also work for PHP. Next we have the Material Design Lite or better
known as MDL. Not like Materialize, MDL only supports the
CSS, so you don’t get the SASS version. You also have to linkup the JavaScript to
get the awesome animations working, otherwise it is boring. For the installation, you can get it via a
CDN, download it to the build machine, or install it though NPM or Bower, one thing
with MDL is that you can even build the CSS from the source code. You can find the build instructions on the
get started page. I have seen around 10 to 15 material design
frameworks for websites and this is the best one in case of UI and animations. It has the largest amount of beautiful elements. There are also 6 free templates with this
framework which will even faster your startup. The first template is a blog template and
is awesome, I wish this template was available for WordPress users. Next we have the android.com template, personally
I don’t know, weather it is copyright to use this template or not. But still it is a good template. There is also a dashboard or admin template
with this framework, personally I am not a fan of this template, it only has 1 page. But it is a free template to download. Now we have a portfolio template with this
framework, you get a portfolio page, blog page and about page and also a contact page. Basically this template has a grid style portfolio
and a grid style blog layout. It is free to download, edit and use it for
your website. Next we get a dashboard like page, but they
call it a text-heavy website. It looks cool to me. With some minor improvements this can be used
for nice web applications. The template has Overview, features, details,
technology and an FAQ page. Overall this is the most liked template from
MDL by me. Next we have a document like material design
template by MDL. On the top you have a Material Design Lite
branding with a search button and a floating box where you can add your own text, followed
by a footer. So, if you are searching for a light weight
CSS framework, then MUI is the perfect one for you. The MDL and Materialize are heavy frameworks
for a more robust project. For an example, if you are building a website
for a mobile device, where you cannot do much processing, MUI does the best work for you. It has a good UI and also it is light weight. Although MUI doesn’t have a complete template
section, it has some layout examples with some useful source code. MUI also supports Emails, so if you are plaining
to make email HTML template, then MUI might be your choice. The only way I could get started is by downloading
the complete package as ZIP. The minified and gzipped version of MUI is
only 6.6 kilobytes. Also it comes with a JavaScript file which
is also minified and is around 5.4 kilobytes. Compared with other frameworks, MUI has less
animations, now considering that it is minimal and mostly used in mobile devices, animations
don’t matter in my opinion. Again Material Foundation is not a heavy CSS
framework like the MDL or Materialize. But it is also not as minimal as MUI. I think that this is balanced between the
minimalism and functionality. Like MDL and Materialize, you cannot use a
CDN or install it though NPM or Bower, you have to download the complete zip file or
the TAR GZ file to use the framework. According to me, this is very straight forward
and here on the screen you can see the contents and what this framework can do. After going into the Material Foundation GitHub
page, I found that you actually need the NodeJS to be installed along with Grunt and Bower. More information can be found at the GitHub
page of the Material Foundation. Material is another CSS framework which is
based on Bootstrap 4. To install Material you can either download
it which comes with minified version of CSS and JavaScript, or install it using NPM or
Bower. Like other CSS frameworks, it doesn’t have
templates it is just having some layout guidelines, everything is nicely explained, so you can
create you own layout. As of me, It looked like there are a good
number of elements in this framework. So, I think there is nothing much to say about
this framework, let’s check out the last framework. Unlike other CSS frameworks, I just wanted
to go a little bit advanced, so its Lumx. This framework works with AngularJS, SASS
and a little bit of JQuery. If you are running a super charged robust
web application which needs performance as well as great UI, you got to use this framework. To download it, the Zipped version is available
at 4.3 megabytes. As of me, I don’t think you can get Lumx through
NPM. It is only available through Bower. If you are downloading though Bower then all
the dependences will be automatically resolved or else you have to get a good amount of dependences
to get started. So, if you think this video ends here, then
you are wrong. You still got the bonus one, right ? Personally,
on all of the frameworks till now, Material-UI has the best UI. Material-UI is a set of React elements that
are based Google’s Material Design. I think, this is best framework among all
of them, that I have showed in this video. But you should be a little advanced to use
this framework. To install it, just install it using the Node
Package Manager. There are also two themes available with this
frameworks, light and dark. I won’t tell you much about this framework
because you will see its performance by yourself. Links to all the frameworks shown in this
video are in the description box below. So, did you like it ?. If you liked it, you
know what to do. Please subscribe to my channel for more videos
on android, web designing and other cool stuff. This is Vasanth Developer Sining Off.

6 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *