Getting started with Google Material Design ( Materialize ) an HTML5 Responsive Framework ~ Coding Savvy
Coding Savvy FB Twitter Google
» »

Getting started with Google Material Design ( Materialize ) an HTML5 Responsive Framework

Google Materialize is a CSS framework but the special thing about this powerful library is that it gives your page the look and feel of material properties(colors, typography, shapes, patterns and layout). If you have ever come across any Material Design CSS you will understand what Google is trying to archive by creating this powerful library. Materialize has it own unique characteristics( Motion and Stacking ) which is why developers don't see it as another Twitter Bootstrap duplicate, It follows Google Material Design Documentation.
Material Design is a design language that combines the classic principles of successful design along with innovation and technology.:
We want to create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.  Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform.
Materialize is the web implementation of Material Design to web which was initially made by Google for Android.
Programming Languages and Frameworks used to build Top Nigeria Websites

Download Materialize Download Demo Script Getting started with Google Material Design ( Materialize ) an HTML5 Responsive Framework Live Demo
According to Materialize Documentation , If you will prefer the Sass version of the framework you can download it from the Getting Started Page.
The team working on this wonderful framework are a team of students from Carnegie Mellon University in Pittsburgh, Pennsylvania.
I had to share their picture, this team did a very incredible job, The team include Alvin Wang (Far right), Alan Chang(Middle left), Kevin Louie(Middle Right), Alex Mark(Far Left).
<!-- Compiled and minified CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"></link>
  <!-- Compiled and minified JavaScript (JQuery is required) -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
The needed framework files can be imported as above, the first line import the CSS file while the second line imports the JavaScript needed.
To install Materialize using Bower, Use the code below.
bower install materialize

Sample markup with all needed resource should look close to this:
  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>
This video best explains the quality designs that can be done with Materialize
Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

No comments:

Post a Comment