Materialize CSS Introduction
Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present), Material Design is a language that combines the classic principles of successful design. Materialize UI components are mainly used to create innovative websites, web apps, android apps,.. and finally you create faster, beautiful and responsive websites.
The Materialized websites are fully compatible with PC, tablets, and mobile devices.
Materialize is by design very minimal and flat. It is considering the fact that it is much easier to add new CSS rules than to overwrite the existing CSS rules. It supports shadows and bold colors. The colors and shades remain uniform across various platforms and devices.
Before start this tutorial, you should have a basic knowledge of HTML, CSS, JavaScript, jQuery, Document Object Model (DOM), and any text editor(Adobe Dreamweaver or Notepad++ etc).
Getting Started
Material Design is absolutely free and go to use it.
Materialize comes in two different forms.
1. Download Library. Click Here !
2. Content Delivery Network ( CDN Online Links)
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>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.
Local Setup :
<!DOCTYPE html>
<html>
<head>
<title>Materialize CSS</title>
<!--Responsive Meta Tag-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" />
</head>
<body>
<h1>Free Time Learn</h1>
<h2>Free Time Learning</h2>
<h3>www.freetimelearning.com</h3>
<!--Import jQuery Library-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--Import materialize.js-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>Output :
CDN Setup :
<!DOCTYPE html>
<html>
<head>
<title>Materialize CSS</title>
<!--Responsive Meta Tag-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
</head>
<body>
<h1>Free Time Learn</h1>
<h2>Free Time Learning</h2>
<h3>www.freetimelearning.com</h3>
<!--Import jQuery Library-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--Import materialize.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>Output :