Materialize CSS Introduction and Installation
Introduction:
Materialize is a design language that combines the classic principles of successful design along with innovation and technology. Materialize 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.
Features:
- It is Easier to use.
- It make the web-pages dynamic and responsive.
- It make the web-page which is compatible in Mobile, Tablets, Laptop as well.
- Freely available on materializecss.com
Installing Materialize: There are following two ways to install materialize.
Method 1: Go to the official documentation of the Materialize CSS 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 also install it using the CDN versions. Include the following CDN links inside the script tag.
<!– Compiled and minified CSS –>
<link rel=”stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
<!– Compiled and minified JavaScript –>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>
Now let’s understand the working of Materialize using an example.
Example: The below example shows the implementation of dialogs in Materialize CSS.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
< script type = "text/javascript"
</ script >
< script src =
</ script >
< script >
function Toast1(string, timeLength) {
Materialize.toast(
'< em >' + string + '</ em >', timeLength
);
}
function Toast2(string, timeLength) {
Materialize.toast(
'< b >' + string + '</ b >', timeLength, 'rounded'
);
}
function Toast3(string, timeLength) {
Materialize.toast(
'< u >' + string + '< u >', timeLength
);
}
</ script >
</ head >
< body >
< body class = "container" >
< h4 >Toasts</ h4 >
< a class = "btn" onclick =
"Toast1('Emphasized Alert!', 1500)" >
Emphasized Alert!!
</ a >< br >< br >
< a class = "btn" onclick =
"Toast2('Bold N rounded Alert!', 1500)" >
Bold N rounded Alert!!
</ a >< br >< br >
< a class = "btn" onclick =
"Toast3('Underlined Alert!', 1500)" >
Underlined Alert!!
</ a >< br >< br >
</ body >
</ body >
</ html >
|
Output:
Last Updated :
24 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...