DOCSEARCHbyAlgolia
Submit Docs

Material Design Lite (MDL)

repository·mdl-1.x·Indexed 12 days ago

https://github.com/google/material-design-lite

A lightweight implementation of Material Design components using vanilla CSS, JS, and HTML. Designed for static websites without the need for JavaScript frameworks, version 1.3.0 provides components such as badges, buttons, cards, and checkboxes with support for IE10+, Chrome, Firefox, Safari, and Opera.

Tokens
31.9K
Snippets
76
Records
111
Agent score
97%

What's inside MDL

  1. Overview of Material Design Lite (MDL)

    mdl-1.x

    Material Design Lite (MDL) is a toolkit for adding a Material Design look and feel to websites. It is built using CSS, JavaScript, and HTML, and is designed to be framework-agnostic, meaning it does not rely on any specific JavaScript frameworks.

    Key characteristics include:

    • Cross-device optimization: Designed for use across various devices.
    • Graceful degradation: Ensures functionality in older browsers.
    • Accessibility: Focuses on providing an immediately accessible experience.
    • Portability: Can be used with or without specific development environments (like Web Starter Kit).

  2. Available Material Design Lite templates

    mdl-1.x

    Material Design Lite provides several pre-built responsive templates designed for different use cases. You can use these as starting points for your own projects:

    • Blog: A mobile-focused responsive template for image or text-based blog entries. Includes subscription CTA, search, share links, and an expanded article page with comments, counters, and bookmarking.
    • Android.com MDL skin: A version of the android.com site featuring horizontal navigation, a feature carousel, and long-form scrolling sub-pages.
    • Dashboard: A modular responsive template for data visualizations and information. Includes a vertical nav, user profile, search, and dedicated space for updates and filters.
    • Portfolio: A modern, clean template for portfolios or blogs. Includes a top navigation bar with the waterfall header component, content cards, and a footer.
    • Text-heavy webpage: Optimized for information-dense content and legibility. Features a sticky horizontal top nav on mobile, feature callouts, cards, and a site map footer with a deep-linked table of contents.
    • Stand-alone article: A clean layout optimized for text-based content. Includes breadcrumb navigation, search, clear headers, and a card-like footer structure.

  3. How the MDL layout component works

    mdl-1.x

    The MDL layout component provides a responsive, scalable page structure that adapts to different browsers, screen sizes, and devices. It is composed of several key parts:

    • Outer Container: A <div> with classes mdl-layout and mdl-js-layout. Note: You cannot apply the layout directly to the <body> element; you must use a nested <div>.
    • Header (mdl-layout__header): Contains the title, a menu icon for mobile navigation, and navigation links.
    • Drawer (mdl-layout__drawer): A slide-out panel that appears automatically on smaller screens or can be opened via the menu icon. It can be configured as a fixed sidebar on larger screens.
    • Content (mdl-layout__content): The <main> element that holds the primary page content.

    By combining these elements with specific MDL classes, you can create various layout patterns such as fixed headers, scrolling headers, or fixed sidebars.

    <div class="mdl-layout mdl-js-layout">
  <header class="mdl-layout__header">
    <div class="mdl-layout-icon"></div>
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title">Title</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout__title">Drawer Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Drawer Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <!-- Primary Content -->
  </main>
</div>

  4. Disable an MDL button

    mdl-1.x

    You can disable an MDL button using two methods:

    1. Standard HTML disabled attribute: This is the recommended method as it disables both the visual style and the actual functionality of the element. This attribute can be added or removed programmatically via scripting.
      <button class="mdl-button mdl-js-button mdl-button--raised" disabled>Disabled Button</button>
    2. mdl-button--disabled class: This applies the disabled visual style but does not disable the functionality of the element. Use this only if you want the button to look disabled while remaining interactive.
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" disabled>Raised Ripples Disabled</button>

  5. How the MDL grid component works

    mdl-1.x

    The Material Design Lite (MDL) grid is a layout system that uses a container and cell model to manage content across different screen sizes.

    Grid Structure

    • Container: An outer element with the mdl-grid class.
    • Cells: Inner elements with the mdl-cell class.

    Column Logic by Device

    The number of available columns changes based on the device type:

    • Desktop: 12 columns
    • Tablet: 8 columns
    • Phone: 4 columns

    Layout Behavior

    • Cells are laid out sequentially in a row.
    • If a cell cannot fit in the current row for a specific screen size, it flows to the next line.
    • If a cell's specified column size is equal to or larger than the total columns available for the current screen size, it occupies the entire row.
    • You can center the grid and add side padding by setting the CSS max-width property on the grid container.

  6. Control spinner visibility programmatically

    mdl-1.x

    The spinner does not have a specific disabled class. Instead, its visibility and animation state are determined by the presence or absence of the is-active class. You can show or hide the spinner by adding or removing this class via JavaScript.

    <!-- Inactive and invisible spinner -->
<div class="mdl-spinner mdl-js-spinner"></div>

  7. Explore MDL Components, Styles, and Customization

    mdl-1.x

    The MDL library provides a variety of resources to build web pages and apps:

    • Components: A library of UI controls including buttons, checkboxes, text fields, cards, column layouts, sliders, spinners, and tabs.
    • Styles: Pre-defined CSS styles that adhere to Material Design principles.
    • Customization: Tools and methods to adapt the library to your specific design needs.
    • Templates: Pre-built structures to jumpstart development.

  8. How mega-footers work in MDL

    mdl-1.x

    A mega-footer is a complex container used to present large amounts of related content in organized sections. It is structured into three primary vertical sections: top, middle, and bottom.

    • Top Section: Divided into a left-section (often for social buttons) and a right-section (often for primary links).
    • Middle Section: Contains one or more drop-down-section elements, each with its own heading and link list.
    • Bottom Section: Typically contains a branding/logo area (mdl-logo) and a final list of links (mdl-mega-footer__link-list).

    While called a 'footer', it can be placed anywhere on the screen.

    <footer class="mdl-mega-footer">
  <div class="mdl-mega-footer__top-section">
    <div class="mdl-mega-footer__left-section">
      <button class="mdl-mega-footer__social-btn"></button>
    </div>
    <div class="mdl-mega-footer__right-section">
      <a href="#">Link</a>
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
      <h1 class="mdl-mega-footer__heading">Heading</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
    <div class="mdl-logo">Logo Text</div>
    <ul class="mdl-mega-footer__link-list">
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</footer>

  9. How MDL shadows work

    mdl-1.x
    In Material Design Lite, a shadow is a visual effect rather than a standalone component. It is applied to existing UI elements (like <div>, <button>, or cards) to simulate three-dimensional positioning on a z-axis. This effect helps distinguish elements from their surroundings and provides visual cues regarding an object's importance or immediacy.

  11. How MDL handles progressive enhancement and browser support

    mdl-1.x

    MDL is designed with progressive enhancement in mind, building on native HTML elements and using JavaScript only for necessary 'enhancements' (like button ripples or pop-out menus).

    Browser Support

    • Evergreen Browsers: Full support for the last two versions of all evergreen browsers.
    • IE10+: Supported, primarily due to the use of Flexbox in Templates.
    • IE9: Gracefully degrades to a CSS-only experience. You can use polyfills for an enhanced experience.
    • IE8: Not officially supported, but some components (like Buttons and Tables) will degrade to native HTML/CSS experiences. Sliders will degrade to standard input fields.

    Required APIs

    For components to function, browsers must support:

    • querySelector
    • classList
    • addEventListener

    If you need to support older browsers like IE9, include these polyfills:

    <!--[if IE]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.2.0/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->

  12. Configure Tabbed Layouts in MDL

    mdl-1.x

    To implement a tabbed interface within an MDL layout, you must use a specific hierarchy of classes. A mdl-layout__tab-bar is required inside the header, and each link must be marked with mdl-layout__tab. Content areas are defined using mdl-layout__tab-panel. You can use the is-active class on both the anchor and the panel to set a default active tab.

    For advanced control, use mdl-layout__tab-manual-switch on the tab bar to disable default switching, allowing you to implement custom event listeners.

    | MDL class | Effect | Remarks |
|-----------|--------|---------|
| `mdl-layout__tab-bar` | Defines container as MDL tab bar | Required on div element inside header (tabbed layout) |
| `mdl-layout__tab` | Defines anchor as MDL tab link | Required on tab bar anchor elements |
| `is-active` | Defines tab as default active tab | Optional; goes on tab bar anchor element and associated tab section element|
| `mdl-layout__tab-panel` | Defines container as tab content panel | Required on tab section elements |
| `mdl-layout__tab-manual-switch` | Disables tab switching when clicking on tab separators. Useful for disabling default behavior and setting up your own event listeners. | Optional; goes on tab bar element |
| `mdl-layout--fixed-tabs` | Uses fixed tabs instead of the default scrollable tabs | Optional; goes on outer div element (not div inside header) |