Monday, March 6, 2017

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. The below table mentions the available classes and their effects.
S.N.Class Name & Description
1mdl-layout
Identifies a container as an MDL component. Required on outer container element.
2mdl-js-layout
Adds basic MDL behavior to layout. Required on outer container element.
3mdl-layout__header
Identifies container as an MDL component. Required on header element.
4mdl-layout-icon
Used to add an application icon. Gets overridden by menu icon if both are visible. Optional icon element.
5mdl-layout__header-row
Identifies container as MDL header row. Required on header content container.
6mdl-layout__title
Identifies layout title text. Required on layout title container.
7mdl-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.
8mdl-navigation
Identifies container as MDL navigation group. Required on nav element.
9mdl-navigation__link
Identifies anchor as MDL navigation link. Required on header and/or drawer anchor elements.
10mdl-layout__drawer
Identifies container as MDL layout drawer. Required on drawer container element.
11mdl-layout__content
Identifies container as MDL layout content. Required on main element.
12mdl-layout__header--scroll
Makes the header scroll with the content. Optional on header element.
13mdl-layout--fixed-drawer
Makes the drawer always visible and open in larger screens. Optional on outer container element not on drawer container element.
14mdl-layout--fixed-header
Makes the header always visible, even in small screens. Optional on outer container element.
15mdl-layout--large-screen-only
Hides an element on smaller screens. Optional on any descendant of mdl-layout.
16mdl-layout--small-screen-only
Hides an element on larger screens. Optional on any descendant of mdl-layout.
17mdl-layout__header--waterfall
Allows a "waterfall" effect with multiple header lines. Optional on header element.
18mdl-layout__header--transparent
Makes header transparent and draws on top of layout background. Optional on header element.
19mdl-layout__header--seamed
Uses a header without a shadow. Optional on header element.
20mdl-layout__tab-bar
Identifies container as an MDL tab bar. Required on container element inside header (tabbed layout).
21mdl-layout__tab
Identifies anchor as MDL tab link. Required on tab bar anchor elements.
22is-active
Identifies tab as default active tab. Optional on tab bar anchor element and associated tab section element.
23mdl-layout__tab-panel
Identifies container as tab content panel. Required on tab section elements.
24mdl-layout--fixed-tabs
Uses fixed tabs instead of the default scrollable tabs. Optional on outer container element , not container inside header.

Examples

The following examples showcases 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.
  1. mdl-layout - Identifies a div as an MDL component.
  2. mdl-js-layout - Adds basic MDL behavior to outer div.
  3. mdl-layout--fixed-drawer - Makes the drawer always visible and open in larger screens.
  4. mdl-layout__drawer - Identifies div as MDL layout drawer.
  5. mdl-layout-title - Identifies layout title text.
  6. mdl-navigation - Identifies div as MDL navigation group.
  7. mdl-navigation__link - Identifies anchor as MDL navigation link.
  8. mdl-layout__content - Identifies div as MDL layout content.
mdl_fixeddrawer.htm
<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
<body>
   <!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content" style="padding-left:100px;">Hello World!</div>
      </main>
   </div>
</body>
</html>

Result

Verify the result.

Fixed Header

To create a template with fixed header following additional MDL class is used.
  1. mdl-layout--fixed-header - Makes the header always visible, even in small screens.
mdl_fixedheader.htm
<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
<body>
   <!-- Always shows a header, even in smaller screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="" style="color:gray">Home</a>
               <a class="mdl-navigation__link" href="" style="color:gray">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content">Hello World!</div>
      </main>
   </div>
</body>
</html>

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.
  1. mdl-layout--fixed-drawer - Makes the drawer always visible and open in larger screens.
  2. mdl-layout--fixed-header - Makes the header always visible, even in small screens.
mdl_fixedheader.htm
<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="" style="color:gray">Home</a>
               <a class="mdl-navigation__link" href="" style="color:gray">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content">Hello World!</div>
      </main>
   </div>
</body>
</html>

Result

Verify the result.

Scrolling header

To create a template with scrolling header, following MDL classes are used.
  1. mdl-layout--header--scroll - Makes the header scroll with the content.
mdl_scrollingheader.htm
<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
<body>
   <!--  Uses a header that scrolls with the text, rather than staying  locked at the top -->
   <div class="mdl-layout mdl-js-layout ">
      <header class="mdl-layout__header mdl-layout__header--scroll">      
         <div class="mdl-layout__header-row">
         <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="">Home</a>
               <a class="mdl-navigation__link" href="">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content" style="padding-left:100px;">Hello World!
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   </div>
      </main>
   </div>
</body>
</html>

Result

Verify the result.

Contracting header

To create a template with a header that contracts as the page scrolls down, following MDL class is used.
  1. mdl-layout__header--waterfall - Allows a "waterfall" effect with multiple header lines.
mdl_waterfallheader.htm
<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout ">
      <header class="mdl-layout__header mdl-layout__header--waterfall">
      <!-- Top row, always visible -->
         <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
   </div>
     <!-- Bottom row, not visible on scroll -->
    <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
            <!-- Navigation -->
            <nav class="mdl-navigation">
               <a class="mdl-navigation__link" href="">Home</a>
               <a class="mdl-navigation__link" href="">About</a>      
            </nav>
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <div class="page-content" style="padding-left:100px;">Hello World!
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   <br/><br/><br/><br/><br/><br/><br/><br/>...
   </div>
      </main>
   </div>
</body>
</html>

Result

Verify the result.

Fixed Header with scrollable tabs

To create a template with a header having scrollable tabs, following MDL classes are used.
  1. mdl-layout__tab-bar - Identifies container as an MDL tab bar.
  2. mdl-layout__tab - Identifies anchor as MDL tab link.
  3. mdl-layout__tab-panel - Identifies container as tab content panel.
mdl_scrollabletabheader.htm
<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
         <!-- Top row, always visible -->
         <div class="mdl-layout__header-row">
         <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>          
         </div>
         <!-- Tabs -->
         <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
            <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
            <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
            <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>     
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
            <div class="page-content">Tab 1 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-2">
            <div class="page-content">Tab 2 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-3">
            <div class="page-content">Tab 3 Contents</div>
         </section>
      </main>
   </div>
</body>
</html>

Result

Verify the result.

Fixed Header with fixed tabs

To create a template with a header having fixed tabs, following additional MDL class is used.
  1. mdl-layout--fixed-tabs - Uses fixed tabs instead of the default scrollable tabs.
mdl_fixedtabheader.htm
<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
<body>
   <!-- The drawer is always open in large screens. The header is always shown,  even in small screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
      <header class="mdl-layout__header">
         <!-- Top row, always visible -->
         <div class="mdl-layout__header-row">
         <!-- Title -->
            <span class="mdl-layout-title">HTML5 Tutorial</span>          
         </div>
         <!-- Tabs -->
         <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
            <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
            <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
            <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>     
         </div>
      </header>
      <div class="mdl-layout__drawer">
         <span class="mdl-layout-title">HTML5 Tutorial</span>
         <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>    
         </nav>
      </div>
      <main class="mdl-layout__content">
         <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
            <div class="page-content">Tab 1 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-2">
            <div class="page-content">Tab 2 Contents</div>
         </section>
         <section class="mdl-layout__tab-panel" id="scroll-tab-3">
            <div class="page-content">Tab 3 Contents</div>
         </section>
      </main>
   </div>
</body>
</html>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)