Material Design Lite Layouts - Material Design Lite

What are Material design lite layouts?

HTML5 has the following container elements:
  • <div> - Provides a generic container to HTML content.
  • <header> - Represents the header section.
  • <footer> - Represents the footer section.
  • <article> - Represents articles.
  • <section> - Provides a generic container for various types of sections.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the containers. Following table explains the available classes and their effects.
S.N.
Class Name & Description
1
mdl-layout
Identifies a container as an MDL component. Required on outer container element.
2
mdl-js-layout
Adds basic MDL behavior to layout. Required on outer container element.
3
mdl-layout__header
Identifies container as an MDL component. Required on header element.
4
mdl-layout-icon
Used to add an application icon. Gets overridden by menu icon if both are visible. Optional icon element.
5
mdl-layout__header-row
Identifies container as MDL header row. Required on header content container.
6
mdl-layout__title
Identifies layout title text. Required on layout title container.
7
mdl-layout-spacer
Used to align elements inside a header or drawer. It grows to fill remaining space. Commonly used for right aligning elements. Optional on div following layout title.
8
mdl-navigation
Identifies container as MDL navigation group. Required on nav element.
9
mdl-navigation__link
Identifies anchor as MDL navigation link. Required on header and/or drawer anchor elements.
10
mdl-layout__drawer
Identifies container as MDL layout drawer. Required on drawer container element.
11
mdl-layout__content
Identifies container as MDL layout content. Required on main element.
12
mdl-layout__header--scroll
Makes the header scroll with the content. Optional on header element.
13
mdl-layout--fixed-drawer
Makes the drawer always visible and open in larger screens. Optional on outer container element not on drawer container element.
14
mdl-layout--fixed-header
Makes the header always visible, even in small screens. Optional on outer container element.
15
mdl-layout--large-screen-only
Hides an element on smaller screens. Optional on any descendant of mdl-layout.
16
mdl-layout--small-screen-only
Hides an element on larger screens. Optional on any descendant of mdl-layout.
17
mdl-layout__header--waterfall
Allows a "waterfall" effect with multiple header lines. Optional on header element.
18
mdl-layout__header--transparent
Makes header transparent and draws on top of layout background. Optional on header element.
19
mdl-layout__header--seamed
Uses a header without a shadow. Optional on header element.
20
mdl-layout__tab-bar
Identifies container as an MDL tab bar. Required on container element inside header (tabbed layout).
21
mdl-layout__tab
Identifies anchor as MDL tab link. Required on tab bar anchor elements.
22
is-active
Identifies tab as default active tab. Optional on tab bar anchor element and associated tab section element.
23
mdl-layout__tab-panel
Identifies container as tab content panel. Required on tab section elements.
24
mdl-layout--fixed-tabs
Uses fixed tabs instead of the default scrollable tabs. Optional on outer container element , not container inside header.

Examples

Below mentioned examples describes the use of mdl-layout class to style various containers.

Fixed Drawer

To create a template with fixed drawer but no header following MDL classes are used.
  • .mdl-layout – Discovers a div as an MDL component.
  • .mdl-js-layout – Includes basic MDL behavior to outer div.
  • .mdl-layout--fixed-drawer – Helps the drawer always visible and open in larger screens.
  • .mdl-layout__drawer – Discovers div as MDL layout drawer.
  • .mdl-layout-title – Determines layout title text.
  • .mdl-navigation – Determines div as MDL navigation group.
  • .mdl-navigation__link – Determines anchor as MDL navigation link.
  • .mdl-layout__content – Determines div as MDL layout content.
mdl_fixeddrawer.htm

Result

Verify the result.

Fixed Header

Additional MDL class is used to create a template with fixed header.
  • mdl-layout--fixed-header – It helps to make the header always visible, even in small screens.
mdl_fixedheader.htm

Result

Verify the result.

Fixed Header and Drawer

To create a template with fixed header and a fixed drawer, following additional MDL classes are used.
  • .mdl-layout--fixed-drawer – It’s role is to make the drawer always visible and open in larger screens.
  • .mdl-layout--fixed-header – It’s role is to make the header always visible, even in small screens.
mdl_fixedheader.htm

Result

Verify the result.

Scrolling header

If you are looking to create a template with scrolling header, below MDL classes are used.
  • mdl-layout--header--scroll - Makes the header scroll with the content.
mdl_scrollingheader.htm

Result

Verify the result.

Contracting header

Following MDL class is used to create a template with a header that contracts as the page scrolls down.
  • mdl-layout__header--waterfall - Allows a "waterfall" effect with multiple header lines.
mdl_waterfallheader.htm

Result

Verify the result.

Fixed Header with scrollable tabs

Following MDL classes are used to create a template with a header having scrollable tabs.
  • mdl-layout__tab-bar – Determines container as an MDL tab bar.
  • mdl-layout__tab – Determines anchor as MDL tab link.
  • mdl-layout__tab-panel – Determines container as tab content panel.
mdl_scrollabletabheader.htm

Result

Verify the result.

Fixed Header with fixed tabs

See below process to create a template with a header having fixed tabs, following additional MDL class is used.
  • mdl-layout--fixed-tabs - Uses fixed tabs instead of the default scrollable tabs.
mdl_fixedtabheader.htm

Result

Verify the result.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics