Materialize Installation
MaterializeCss Installation(Environment Setup): It is very easy to setup environment for Materialize Css. Here in this tutorial we are going to explain how you can install Materialize Css. –
Materialize Installation Steps
There are two ways to install Materialize –
- Install Locally: To install Materialize Locally Download materialize.min.css and materialize.min.js and include it on page.
- CDN Based Installation: You can also install materialize from CDN based network. You can directly include the files from Content Delivery Networks.
Install Locally:
To install locally download the materialize.min.css and materialize.min.js from http://materializecss.com/getting-started.html And keep them in js and css folder and simply include as below –
Materialize Installation Steps:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
</body>
</html>
|
jQuery is required so do not forget to include it.
CDN Based Installation
You can also install materialized css and js from CDN simply as below –
Materialize CDN URL Based Installation Example:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
</body>
</html>
|
Now you are ready to go and You can create your first page in Materialize.
So let us create an example.
Example
Let us create an example using the CDN based installation of Materialize Css and Js.
Materialize First Application Example:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<h1>My First App</h1>
</body>
</html>
|
Advertisements
