Scribd
Upload
66 views

Materialize Css Notes

Uploaded by

ebodegiovanni
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
66 views

Materialize Css Notes

Uploaded by

ebodegiovanni
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Swipe Left

Materialize CSS

Sanjeev Kumar
@prosanjeev
Sanjeev Kumar Keep Swiping...
@prosanjeev

Intro to Materialize CSS


Materialize CSS is a front-end framework based on
Google's Material Design principles. It provides a set of
pre-built CSS and JavaScript components to build
modern, responsive web applications quickly and
efficiently.

Installation Methods:
Via CDN (recommended for quick setup):

Via npm:

Download the Materialize files for offline usage


from materializecss.com.
Sanjeev Kumar Keep Swiping...
@prosanjeev

Grid System
Materialize uses a 12-column grid system to create
responsive layouts. Grid classes are defined for small
(s), medium (m), and large (l) screen sizes.
Syntax Example:

Adjusts column widths automatically based on the


screen size (s for small, m for medium, l for large).
Sanjeev Kumar Keep Swiping...
@prosanjeev

Typography
Materialize offers various button styles.
Basic Text Classes:
.flow-text: Makes the text responsive.
Example:

Buttons
Materialize offers various button styles.
Basic Button:

Floating Button:
Sanjeev Kumar Keep Swiping...
@prosanjeev

Icons

Materialize uses Google’s Material Icons.


Usage Example:

Forms
Materialize provides styled forms and inputs.
Basic Form Example:
Sanjeev Kumar Keep Swiping...
@prosanjeev

Cards
Materialize cards provide a flexible and extensible
content container.
Example:

Navbar
Materialize provides responsive and mobile-friendly
navigation bars.
Example:
Sanjeev Kumar Keep Swiping...
@prosanjeev

Modals
Create responsive modals with Materialize.
Example:

Collapsible
Materialize provides collapsible content.
Example:
Sanjeev Kumar Keep Swiping...
@prosanjeev

Tooltip
Add tooltips to your elements.
Example:

Footer
Materialize provides footer elements for basic web layouts
Example:

You might also like