Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. It is created and designed by Google. Google’s goal is to develop a system of design that allows for a unified user experience across all its products on any platform.
Materialize CSS
Why Materialize CSS?
It is easier to use and makes the web page dynamic and responsive.
It makes the web-page which is compatible in Mobile, Tablets, laptops as well.
Freely available on https://materializecss.com/
Materialize CSS
Installing Materialize CSS:
Method 1: Go to the official documentation of the Materialize https://materializecss.com/getting-started.html and download the latest version available. After that put the downloaded materialize.min.js and materialize.min.css file in a directory of your project.
Method 2: You can use CDN link to run the code without installing it. Include the following CDN links inside the head tag.
<!– Compiled and minified CSS –>
<!– Compiled and minified JavaScript –>
Method 3: Install Materialize using npm. Before installing it, first install node.js and npm and then run the following command:
npm install materialize-css@next
Method 4: You can install Materialize using Bower package manager. Use the following command to install it.
bower install materialize
Now let’s understand the working of Materialize using an example.
Example: In this example, we have created a simple breadcrumb with the current location BreadCrumb. It means you are on the BreadCrumb page and it is under Materialize category and HTML5 points HTML5 page.
HTML
<!DOCTYPE html>
<html>
<head>
<title>BreadCrumb</title>
<link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" />
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<style>
.container {
height: 64px;
display: flex;
align-items: center;
}
h1 {
justify-content: center;
text-align: center;
}
div {
display: flex;
align-items: center;
color: white;
background-color: green;
}
span {
font-family: Roboto;
font-weight: 300;
font-size: 20px;
color: white;
}
i {
margin: 0 8px;
}
</style>
</head>
<body>
<div class="container">
<div>
<span>HTML5
<i class="material-icons">double_arrow</i>
</div>
<div>
<span>Materialize
<i class="material-icons">double_arrow</i>
</div>
<div>
<span>BreadCrumb
<i class="material-icons">double_arrow</i>
</div>
</div>
<h1>GeeksForGeeks</h1>
</body>
</html>
Output:
Learn More about Materialize CSS:
Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above
Share your thoughts in the comments
Add Your Comment
Please Login
