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.:
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.
Download Materialize
Download Demo Script
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.
<!-- 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.<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>
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
<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>
Thanks!
Your feedback helps us improve tutorials.
No comments:
Post a Comment