Materialize | 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 unified user experience across all its products on any platform.
Why Materialize ?
- It is Easier to use.
- It makes the web-page dynamic and responsive.
- It makes the web-page which is compatible in Mobile, Tablets, Laptop as well.
- Freely available on materializecss.com
Materialized comprises of mainly three components:
- HTML
- CSS
- Javascript
Basic HTML Template:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Learning Materialize</title> <meta name="description" content="Hello World"> </head> <body> <div> Hello World!</div> <div> You're learning Materialize on Geeksforgeeks.org</div> </body> </html> |
Installing Materialize: There are two methods to install the Materialize.
- Method 1: Copy the link and add the head section on HTML Template.
<!-- Compiled and minified CSS --><linkrel="stylesheet"href=<!-- Compiled and minified JavaScript --><scriptsrc=</script> - Method 2: Use the Materialize Starter Template.
<!DOCTYPE html><html><head><!--Import Google Icon Font-->rel="stylesheet"><!--Import materialize.css--><linktype="text/css"rel="stylesheet"href="css/materialize.min.css"media="screen, projection"/><linkrel="stylesheet"href=<!-- Compiled and minified JavaScript --><scriptsrc=</script><!--Let browser know website is optimized for mobile--><metaname="viewport"content="width=device-width,initial-scale=1.0" /></head><body><div> Hello World!</div><div> You're learning Materialize on Geeksforgeeks.org</div><!--JavaScript at end of body for optimized loading--><scripttype="text/javascript"src="js/materialize.min.js"></script></body></html>Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
