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:
