Introduction
What is this ?
Material Framework is a simple responsive CSS framework made by Tim Nguyen that allows you to integrate Material Design in any web page or web app.
© Copyright 2014-2015 - Tim Nguyen
Where do I get it ?
You can find it on Github. Grab it now before your internet gets slow :)
View on Github DownloadSetup
Just import material.css if you only need the styles. If you need the JS, you'll also need to import material.js first, then you'll need to initialize the Material object. Luckily, that can be done using a simple line of code :
// This will initialize all Material modules
var md = new Material();
Or if you only need specific modules :
// This will initialize only the Responsive and SideMenu modules
var md = new Material({modules: ["Responsive", "SideMenu"]});
You can also specify options :
var md = new Material({
options: {
FancyHeader: {
header: document.querySelector(".toolbar"),
scrollTarget: document.querySelector(".main-content")
}
}
});
Themes
Two themes are available : the dark theme and the light theme.
To apply the dark theme, use the dark-theme class.
Helpers are also available in material.js.
Theme.toggle(element)
This toggles between light and dark theme. element corresponds to the DOM element that will have it's theme toggled. If no element is specified, this defaults to document.body.
Theme.setTheme(theme, element)
This sets an element to a specified theme. theme corresponds to the theme you want to switch to (light or dark), this is required. element corresponds to the DOM element that will have it's theme changed. If no element is specified, this defaults to document.body.
Colors
This framework provides access to all material design colors. Here's how you can use them :
Class names are composed like this :
type-color-shade
type corresponds to one of the 4 different types (bg, color, fill or stroke) depending on your needs, color corresponds to the color name (red for example), and shade corresponds to number specified in the palette below (500 for example).
Note that you can also use multiple classes together.
Example
This class name will make the background of an element red.
bg-red-500
Palette
- Red 500 #f44336
- 50#ffebee
- 100#ffcdd2
- 200#ef9a9a
- 300#e57373
- 400#ef5350
- 500#f44336
- 600#e53935
- 700#d32f2f
- 800#c62828
- 900#b71c1c
- A100#ff8a80
- A200#ff5252
- A400#ff1744
- A700#d50000
- Pink 500 #e91e63
- 50#fce4ec
- 100#f8bbd0
- 200#f48fb1
- 300#f06292
- 400#ec407a
- 500#e91e63
- 600#d81b60
- 700#c2185b
- 800#ad1457
- 900#880e4f
- A100#ff80ab
- A200#ff4081
- A400#f50057
- A700#c51162
- Purple 500 #9c27b0
- 50#f3e5f5
- 100#e1bee7
- 200#ce93d8
- 300#ba68c8
- 400#ab47bc
- 500#9c27b0
- 600#8e24aa
- 700#7b1fa2
- 800#6a1b9a
- 900#4a148c
- A100#ea80fc
- A200#e040fb
- A400#d500f9
- A700#aa00ff
- Deep Purple 500 #673ab7
- 50#ede7f6
- 100#d1c4e9
- 200#b39ddb
- 300#9575cd
- 400#7e57c2
- 500#673ab7
- 600#5e35b1
- 700#512da8
- 800#4527a0
- 900#311b92
- A100#b388ff
- A200#7c4dff
- A400#651fff
- A700#6200ea
- Indigo 500 #3f51b5
- 50#e8eaf6
- 100#c5cae9
- 200#9fa8da
- 300#7986cb
- 400#5c6bc0
- 500#3f51b5
- 600#3949ab
- 700#303f9f
- 800#283593
- 900#1a237e
- A100#8c9eff
- A200#536dfe
- A400#3d5afe
- A700#304ffe
- Blue 500 #2196f3
- 50#e3f2fd
- 100#bbdefb
- 200#90caf9
- 300#64b5f6
- 400#42a5f5
- 500#2196f3
- 600#1e88e5
- 700#1976d2
- 800#1565c0
- 900#0d47a1
- A100#82b1ff
- A200#448aff
- A400#2979ff
- A700#2962ff
- Light Blue 500 #03a9f4
- 50#e1f5fe
- 100#b3e5fc
- 200#81d4fa
- 300#4fc3f7
- 400#29b6f6
- 500#03a9f4
- 600#039be5
- 700#0288d1
- 800#0277bd
- 900#01579b
- A100#80d8ff
- A200#40c4ff
- A400#00b0ff
- A700#0091ea
- Cyan 500 #00bcd4
- 50#e0f7fa
- 100#b2ebf2
- 200#80deea
- 300#4dd0e1
- 400#26c6da
- 500#00bcd4
- 600#00acc1
- 700#0097a7
- 800#00838f
- 900#006064
- A100#84ffff
- A200#18ffff
- A400#00e5ff
- A700#00b8d4
- Teal 500 #009688
- 50#e0f2f1
- 100#b2dfdb
- 200#80cbc4
- 300#4db6ac
- 400#26a69a
- 500#009688
- 600#00897b
- 700#00796b
- 800#00695c
- 900#004d40
- A100#a7ffeb
- A200#64ffda
- A400#1de9b6
- A700#00bfa5
- Green 500 #4caf50
- 50#e8f5e9
- 100#c8e6c9
- 200#a5d6a7
- 300#81c784
- 400#66bb6a
- 500#4caf50
- 600#43a047
- 700#388e3c
- 800#2e7d32
- 900#1b5e20
- A100#b9f6ca
- A200#69f0ae
- A400#00e676
- A700#00c853
- Light Green 500 #8bc34a
- 50#f1f8e9
- 100#dcedc8
- 200#c5e1a5
- 300#aed581
- 400#9ccc65
- 500#8bc34a
- 600#7cb342
- 700#689f38
- 800#558b2f
- 900#33691e
- A100#ccff90
- A200#b2ff59
- A400#76ff03
- A700#64dd17
- Lime 500 #cddc39
- 50#f9fbe7
- 100#f0f4c3
- 200#e6ee9c
- 300#dce775
- 400#d4e157
- 500#cddc39
- 600#c0ca33
- 700#afb42b
- 800#9e9d24
- 900#827717
- A100#f4ff81
- A200#eeff41
- A400#c6ff00
- A700#aeea00
- Yellow 500 #ffeb3b
- 50#fffde7
- 100#fff9c4
- 200#fff59d
- 300#fff176
- 400#ffee58
- 500#ffeb3b
- 600#fdd835
- 700#fbc02d
- 800#f9a825
- 900#f57f17
- A100#ffff8d
- A200#ffff00
- A400#ffea00
- A700#ffd600
- Amber 500 #ffc107
- 50#fff8e1
- 100#ffecb3
- 200#ffe082
- 300#ffd54f
- 400#ffca28
- 500#ffc107
- 600#ffb300
- 700#ffa000
- 800#ff8f00
- 900#ff6f00
- A100#ffe57f
- A200#ffd740
- A400#ffc400
- A700#ffab00
- Orange 500 #ff9800
- 50#fff3e0
- 100#ffe0b2
- 200#ffcc80
- 300#ffb74d
- 400#ffa726
- 500#ff9800
- 600#fb8c00
- 700#f57c00
- 800#ef6c00
- 900#e65100
- A100#ffd180
- A200#ffab40
- A400#ff9100
- A700#ff6d00
- Deep Orange 500 #ff5722
- 50#fbe9e7
- 100#ffccbc
- 200#ffab91
- 300#ff8a65
- 400#ff7043
- 500#ff5722
- 600#f4511e
- 700#e64a19
- 800#d84315
- 900#bf360c
- A100#ff9e80
- A200#ff6e40
- A400#ff3d00
- A700#dd2c00
- Brown 500 #795548
- 50#efebe9
- 100#d7ccc8
- 200#bcaaa4
- 300#a1887f
- 400#8d6e63
- 500#795548
- 600#6d4c41
- 700#5d4037
- 800#4e342e
- 900#3e2723
- Grey 500 #9e9e9e
- 50#fafafa
- 100#f5f5f5
- 200#eeeeee
- 300#e0e0e0
- 400#bdbdbd
- 500#9e9e9e
- 600#757575
- 700#616161
- 800#424242
- 900#212121
- Blue Grey 500 #607d8b
- 50#eceff1
- 100#cfd8dc
- 200#b0bec5
- 300#90a4ae
- 400#78909c
- 500#607d8b
- 600#546e7a
- 700#455a64
- 800#37474f
- 900#263238
- Black#000000
- White#ffffff
Ripple
You can use the ripple class or the ripple attribute. You can also specify circular ripples (for round elements like fabs). The ripple attribute supports 3 values : circle, none and nothing.
If you don't like the W3C validator screaming about non-valid attributes, you can use class names instead : ripple,circle and no-ripple.
Examples
<button class="button raised bg-blue-500 color-white" ripple="none">No ripple</button>
<div style="width: 100px;height: 100px;padding: 10px;" ripple="circle">Circular ripple</div>
Or... using class names :
<button class="button raised bg-blue-500 color-white no-ripple">No ripple</button>
<div class="ripple circle" style="width: 100px;height: 100px;padding: 10px;">Circular ripple</div>
Typography
A subheading - scroll down
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst. orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst.orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst.orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst.
Another subheading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst. orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst.orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst.orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst.
A minor heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst. orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst.orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis.
Within the material environment, virtual lights illuminate the scene and allow objects to cast shadows. A key light creates directional shadows, while an ambient light creates consistent, soft shadows from all angles.Google material design spec
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst.orem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lectus metus, ullamcorper vehicula dui ac, posuere feugiat turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Curabitur in tortor ac ex convallis gravida sit amet eget sem. Vivamus bibendum tincidunt risus ut ultrices. Mauris quis erat consequat, eleifend sapien ac, mollis quam. Aliquam odio lectus, consequat at magna id, efficitur euismod ante. Sed ac elit vitae odio tempus accumsan. Suspendisse leo ante, venenatis vel leo nec, euismod faucibus orci. In hac habitasse platea dictumst.
Checkboxes
Example
<div class="checkbox">
<input type="checkbox" id="checkbox"/>
<label for="checkbox"></label>
</div>
Radios
Example
<div class="radio">
<input type="radio" id="radio" name="radios"/>
<label for="radio"></label>
</div>
Switches
Example
<div class="switch">
<input type="checkbox" id="switch"/>
<label for="switch"></label>
</div>
Buttons
Flat
Example
<button class="button">Button</button>
<button class="button color-blue-500">Colored</button>
<button class="button" disabled>Disabled</button>
Raised
Example
<button class="button raised">Button</button>
<button class="button raised bg-blue-500 color-white">Colored</button>
<button class="button raised" disabled>Disabled</button>
Fab
Example
<button class="fab bg-red-500 color-white"><i class="icon-create"></i></button>
<button class="fab bg-green-500 color-white small"><i class="icon-check"></i></button>
Dropdown menus
Native menu (<select>) : Use the dropdown-menu class on any select.
Custom menu (JS)
Example
<div class="dropdown">
<button class="dropdown-menu">Apple</button>
<ul class="menu">
<li ripple><a>Apple</a></li>
<li ripple><a>Orange</a></li>
<li ripple><a>Pear</a></li>
</ul>
</div>
Inputs
Example
<input type="text" class="text-input" placeholder="Type something here"/>
Example
<textarea class="text-input" placeholder="This is a textarea"></textarea>
Example
<div class="text-input-container">
<i class="icon-location text-input-icon"></i>
<input type="text" class="text-input border-green-500" placeholder="Input with an icon"/>
</div>
You can create floating inputs by adding the card class to text-input-container.
Example
<div class="text-input-container card">
<i class="icon-search text-input-icon"></i>
<input type="text" class="text-input" placeholder="Search"/>
</div>
Sliders
Example
<input type="range" class="slider"/>
Icon buttons
Example
<button class="icon-button"><i class="icon-star"></i></button>
Icon font
The icon font was created with Fontello with icons by Google.
Add icons using the template below, replacing "icon-name" with the icon name listed below.
<i class="icon-name"></i>
Toolbars
Example
<div class="toolbar bg-red-500 color-white">
<button class="icon-button"><i class="icon-menu"></i></button>
<span class="toolbar-label">My app</span>
<span class="float-right">
<button class="icon-button"><i class="icon-search"></i></button>
<button class="icon-button"><i class="icon-star"></i></button>
</span>
</div>
Tabs
Example
<ul class="toolbar tabs bg-green-500 color-white">
<li ripple class="selected"><a href="#">Item 1</a></li>
<li ripple><a href="#">Item 2</a></li>
<li ripple><a href="#">Item 3</a></li>
</ul>
You can also add tabs to underneath a toolbar by using a toolbar-group class that contains both the tabs and the toolbar.
Navigation bars
Example
<div class="navbar toolbar bg-teal-500 color-white">
<div class="float-left">
<a href="#" class="bold" ripple>Art site</a>
</div>
<div class="float-right">
<a href="#" ripple>Design</a>
<a href="#" ripple>Photos</a>
<a href="#" ripple>Wearables</a>
<button class="fab bg-pink-500 color-white"><i class="icon-file-upload"></i></button>
</div>
</div>
Hello world
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tooltips
Use the data-tooltip attribute to add a custom tooltip to any element.
Note that elements using the ::before pseudo class will interfere with the tooltip.
Toasts
Example
<div class="toast">
<label class="toast-label">We could not load your mail</label>
<button class="button flat color-yellow-500">Retry</button>
</div>
You can also add a rounded class to toasts if needed.
Dialogs
Tip : initialize the Dialog module for quick helper functions
Helpers
Dialog.show(element, callback)
Shows a dialog, callback is optional. element corresponds to a DOM element.
Dialog.hide(element)
Hides a dialog. element corresponds to a DOM element.
Dialog.toggle(element)
Toggles a dialog. element corresponds to a DOM element.
Example
<div class="dialog" hidden>
<h1 class="dialog-title">Hello world</h1>
<div class="dialog-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="dialog-footer">
<button class="button">More info</button>
<span class="float-right">
<button class="button dialog-close">Decline</button>
<button class="button color-blue-500 dialog-confirm">Accept</button>
</span>
</div>
</div>
Lists
-
Larry Page
I have an action on the right
-
Larry Page
I love your Material design framework !
-
Larry Page
I love your Material design framework !
Example
<ul class="list">
<li ripple>
<img class="item-icon" src="demo-files/avatar.jpg"/>
<span class="item-text">
Larry Page
<span class="secondary-text">
I have an action on the right
</span>
</span>
<i class="icon-message item-action"></i>
</li>
</ul>
Grid Lists
Example
<div class="grid-list">
<div class="tile">
<img class="tile-image" src="demo-files/avatar.jpg"/>
<div class="tile-footer">
<span class="item-text">
Larry Page
<span class="secondary-text">
I love your Material design framework !
</span>
</span>
<i class="icon-star item-action"></i>
</div>
</div>
</div>
If the tile image does not fit the size of the tile background, you will want to use background images instead to avoid stretching the image.
<div class="tile-image" style="background-image:url(demo-files/avatar.jpg)"></div>
Menus
Example
<ul class="menu">
<li ripple><a href="#">Open file</a></li>
<li class="divider"></li>
<li ripple><a href="#">Reload file</a></li>
</ul>
Sidemenus
Tip : initialize the SideMenu module to get quick helper functions.
Add the additional sidebar class if you want the sidemenu to persist on desktops (like the one on this page).
Helpers
SideMenu.show(element)
Shows a sidemenu. element corresponds to a DOM element.
SideMenu.hide(element)
Hides a sidemenu. element corresponds to a DOM element.
SideMenu.toggle(element)
Toggles a sidemenu. element corresponds to a DOM element.
Example
<div class="sidemenu" hidden>
<div class="sidemenu-hero fade">
<img class="avatar" src="demo-files/avatar.jpg"/>
<img class="sidemenu-hero-image" src="demo-files/sidemenu-hero.jpg"/>
<span class="title">Larry Page</span>
<span class="text">example@gmail.com</span>
</div>
<ul class="menu">
<li ripple><a href="#"><i class="icon-person-add"></i>Current</a></li>
<li ripple><a href="#"><i class="icon-person"></i>Recent</a></li>
<li class="divider"></li>
<h2 class="subheading">Subheading</h2>
<li ripple><a href="#"><i class="icon-archive"></i>Archive</a></li>
<li ripple><a href="#"><i class="icon-delete"></i>Trash</a></li>
</ul>
</div>
Cards
Rich cards
Kangaroo Valley Safari
Example
<div class="card rich-card">
<div class="card-hero" style="background-image: url('demo-files/card-hero.jpg')">
<h1>Kangaroo Valley Safari</h1>
</div>
<div class="divider"></div>
<div class="card-footer">
<button class="button flat">Share</button>
<button class="button flat color-orange-500">Explore</button>
</div>
</div>
Different depths
Use the z attribute to choose a depth for cards. For example, use <div class="card" z="1"></div> for a card with a z-depth of 1.
Card Containers
Used the card-containerclass to add a background to <div> container.