Materialize CSS is a modern responsive front-end framework based on Material Design. Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science. You can easily use different classes for your website and application like Bootstrap.
1. Based on Material Design
Prepared and Presented by : MRD
Materialize - CSS Framework
2. What we will Learn ?
● What and Why Materialize CSS
● Button, Waves & Pulse
● Floating Action Button
● Tabs
● Card
● Collections
● Icons
● Grid System
● Navbar
● Footer
● Carousel & Slider
● Parallax
● Dropdown
● Accordion
● Sidenav
● Modal
● Toast
● Tooltip
● Helper Classes
● Colors
● Table
● Media
● Shadow
● Breadcrumbs
● Badges
● Pagination
● Preloader
● Form
3. What and Why Materialize CSS
Material Design
Material Design is a visual language that
synthesizes the classic principles of good
design with the innovation of technology
and science.
MD is a design philosophy that inspired
by real materials and helps to create
smooth & interactive website.
Version : First version 0.100.2 Latest
version 1.0.0
Materialize
A modern responsive front-end
framework based on Material Design.
Version : First version 0.100.2 Latest
version 1.0.0
4. Button
Flat Button
Button without depth or elevation.
Mostly used inside other elements
which have depth
Raised Button
Button with some depth or elevation
or shadow. Looks good flat page.
6. Pulse
Basic Class
.pulse
Example
<a class="btn-floating pulse"><i class="material-icons">menu</i></a>
<a class="btn-floating btn-large pulse"><i class="material-icons">heart</i></a>
<a class="btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>
Pulse is mainly used with floating buttons. It
draws attention to buttons with captivating
effect.
7. Floating Action Button (FAB)
If you want a fixed floating action button, you can add
multiple actions that will appear on hover or click.
It gives a feel like mobile application.
Button with depth and used for certain functionality. Mostly
used with Icon and rounded shape
8. TABS
The tabs structure consists of an
unordered list of tabs that have hashes
corresponding to tab ids. Then when you
click on each tab, only the container with
the corresponding tab id will become
visible.
Similar to Bootstrap but with some added
animation.
9. Cards are a convenient means of
displaying content composed of different
types of objects. They’re also well-suited
for presenting similar objects whose size
or supported actions can vary
considerably, like photos with captions of
variable length.
CARDS
10. Collections allow you to group list objects together.
Similar to panel as in Bootstrap 3
COLLECTIONS
11. ICONS
All used in 4 sizes.
Tiny, Small, Medium, Large
Materialize have 932 material
icons courtesy of Google
<i class="material-icons">icon_name</i>
Default class
to use any
icon
Icon name
that you
want to use
12. GRID
1 2 3 4 5 6 7 8 9 10 11 12
Materialize has 12 columns.
No matter the size of the browser, each of these
columns will always have an equal width.
Classes to be used :
ROW : .row
COLUMN : .col
OFFSET : .offset-s1, .offset-m1, .offset-l1
PUSH : .push-s1
PULL : .pull-s1
s1 - s12
m1 - m12
l1 - l12
xl-1 - xl12
Breakpoints
Small (.s) : 0px - 600px
Medium (.m) : 601px - 992px
Large (.l) : 993px - 1200px
X-Large (.xl) : above 1200px
13. Tables are a nice way to organize a lot of
data. We provide a few utility classes to
help you style your table as easily as
possible. In addition, to improve mobile
experience, all tables on mobile-screen
widths are centered automatically.
TABLE
15. Navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div,
there are 2 main parts of the navbar. A logo or brand link, and the navigations links.
NAVBAR