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 > |
chevron_right
filter_none
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 -->
<
link
rel
=
"stylesheet"
href
=
<!-- Compiled and minified JavaScript -->
<
script
src
=
</
script
>
chevron_rightfilter_none - Method 2: Use the Materialize Starter Template.
<!DOCTYPE html>
<
html
>
<
head
>
<!--Import Google Icon Font-->
rel
=
"stylesheet"
>
<!--Import materialize.css-->
<
link
type
=
"text/css"
rel
=
"stylesheet"
href
=
"css/materialize.min.css"
media
=
"screen, projection"
/>
<
link
rel
=
"stylesheet"
href
=
<!-- Compiled and minified JavaScript -->
<
script
src
=
</
script
>
<!--Let browser know website is optimized for mobile-->
<
meta
name
=
"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-->
<
script
type
=
"text/javascript"
src
=
"js/materialize.min.js"
></
script
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput: