Learn how to easily start using Materialize with Ionic Framework

by - May 31, 2016

I found a material design css framework known as Materializecss. It looks promising. It's just plain css and javascript framework.
Advantages over other frameworks
  1. Pure css classes, will not conflict with ionic directives. No performance loss.
  2. Of all the frameworks i have seen, this is the only one closely following material design rules
  3. Almost ready it has about 50+ contributors it's current Version 0.95.3 in less than 6 months
  4. Easy to use. Well documented with feature wise navigation.
  5. It has almost all material design features needed for an app.


This page http://materializecss.com/getting-started.html will show you how to include it in your projects.

CDN
You can find all the versions of the CDN at cdnjs.
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
      

Setup

Project Structure

After downloading, extract the files into the directory where your website is located. Your directory will look something like this.
You'll notice that there are two sets of the files. The min means that the file is "compressed" to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development.

You May Also Like

0 comments