### Menu Examples (Top Left, Top Right)

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Examples of Material Design Lite menus positioned at the top left and top right.

```html
            file: top-left.html
              demo_file: top-left-demo.html
              extra_codepen_css: codepen-top-buttons.css
```

```html
            file: top-right.html
              demo_file: top-right-demo.html
```

--------------------------------

### Simple List Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

A basic example of a simple list using Material Design Lite.

```html
            file: list-item.html
```

--------------------------------

### Expansion Panel Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

A single example of an expansion panel, which allows for collapsible content sections. This is useful for organizing content and saving space.

```html
<style>
.demo-expansion-panel {
  width: 300px;
}
</style>
<div class="demo-expansion-panel mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-color--teal-300">
    <h2 class="mdl-card__title-text">Expansion Title</h2>
  </div>
  <div class="mdl-card__supporting-text">
    This is the content of the expansion panel. It can contain any HTML elements.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Action</button>
  </div>
</div>
```

--------------------------------

### Install Gulp Globally

Source: https://github.com/google/material-design-lite/wiki/Customizing

Install Gulp globally to easily access it for building your customized MDL files. This command is run from your command line.

```bash
npm install -g gulp
```

--------------------------------

### List with Avatars and Actions Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a list with avatars and action buttons using Material Design Lite.

```html
            file: action.html
```

--------------------------------

### Menu Examples (Lower Left, Lower Right)

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Examples of Material Design Lite menus positioned at the lower left and lower right.

```html
            file: lower-left.html
              demo_file: lower-left-demo.html
              extra_codepen_css: codepen-lower-buttons.css
```

```html
            file: lower-right.html
              demo_file: lower-right-demo.html
```

--------------------------------

### Simple Text Tooltip Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tooltip/README.md

A basic example of a tooltip with simple text content.

```html
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">eXtensible Markup Language</span>
```

--------------------------------

### Two-Line List Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a two-line list item using Material Design Lite.

```html
            file: two-line.html
```

--------------------------------

### Mini Footer Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a mini footer in Material Design Lite.

```html
              file: mini-footer.html
              full_width: true
```

--------------------------------

### Install Material Design Lite via npm

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_templates/started.html

Install the Material Design Lite library files into your project's node_modules folder using npm.

```bash
npm install material-design-lite --save
```

--------------------------------

### Basic Tooltip Setup: Tooltip Element

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tooltip/README.md

Create the tooltip element and link it to the target using the 'for' attribute.

```html
<p id="tt1">HTML</p>
<span for="tt1">HyperText Markup Language</span>
```

--------------------------------

### Three-Line List Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a three-line list item using Material Design Lite.

```html
            file: three-line.html
```

--------------------------------

### Volume Control Slider Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/slider/README.md

A practical example of an MDL slider used for volume control, showcasing the typical implementation with specified range and step.

```html
<p style="width:300px">
<input class="mdl-slider mdl-js-slider" type="range" id="s1" min="0" max="10" value="4" step="2">
</p>
```

--------------------------------

### Basic Menu Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/menu/README.md

A standard MDL menu with three options. Ensure the parent element is not statically positioned.

```html
<button id="menu-speed" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu" for="menu-speed">
  <li class="mdl-menu__item">Fast</li>
  <li class="mdl-menu__item">Medium</li>
  <li class="mdl-menu__item">Slow</li>
</ul>
```

--------------------------------

### List with Avatars and Controls Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a list with avatars and control elements using Material Design Lite.

```html
            file: list-control.html
```

--------------------------------

### Basic Tooltip Setup: Applying MDL Class

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tooltip/README.md

Add the 'mdl-tooltip' class to the tooltip element to enable MDL styling.

```html
<p id="tt1">HTML</p>
<span for="tt1" class="mdl-tooltip">HyperText Markup Language</span>
```

--------------------------------

### Default Slider and Slider with Starting Value

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Examples of a default Material Design Lite slider and a slider with a specified starting value.

```html
              file: slider-default.html
              demo_file: slider-default-demo.html
```

```html
              file: slider-starting-value.html
```

--------------------------------

### Complete Card Example (No Shadow)

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/card/README.md

A complete example of an MDL card with a title, image, supporting text, and an action link. This card does not have a shadow effect.

```html
<div class="mdl-card">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">title Text Goes Here</h2>
  </div>
  <div class="mdl-card__media">
    <img src="photo.jpg" width="220" height="140" border="0" alt="" style="padding:20px;">
  </div>
  <div class="mdl-card__supporting-text">
    This text might describe the photo and provide further information, such as where and
    when it was taken.
  </div>
  <div class="mdl-card__actions">
    <a href="(URL or function)">Related Action</a>
  </div>
</div>
```

--------------------------------

### Install MDL with Bower

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_templates/started.html

Use Bower to install Material Design Lite into your project. This command saves the library to your bower_components folder.

```bash
bower install material-design-lite --save
```

--------------------------------

### Basic Tooltip Setup: Target Element

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tooltip/README.md

Define the target element for the tooltip using an ID.

```html
<p id="tt1">HTML</p>
```

--------------------------------

### Responsive Grid Layout

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a responsive grid layout using Material Design Lite.

```html
            file: grid.html
            demo_file: grid-demo.html
            extra_codepen_css: codepen-grid.css
            full_width: true
```

--------------------------------

### Basic List Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/list/snippets/list-control.html

A simple list item with an icon. Used for displaying rows of information.

```html
<li class="mdl-list__item">
  <span class="mdl-list__item-primary-content">
    <i class="material-icons mdl-list__item-icon">person</i>
    Bryan Cranston
  </span>
</li>
```

--------------------------------

### Mega Footer Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a mega footer in Material Design Lite.

```html
              file: mega-footer.html
              full_width: true
```

--------------------------------

### Raised Button Example (MDL)

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/started.md

Demonstrates a raised button with an accent color using Material Design Lite.

```html
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
  Button
</button>
```

--------------------------------

### Tooltip Examples

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Provides additional information on hover. Use 'Simple' and 'Large' for basic tooltips, and 'Rich' and 'Multiple lines' for more detailed content.

```html
<!-- Simple Tooltip -->
<button id="tt1" class="mdl-button mdl-js-button">
  Hover me
</button>
<div class="mdl-tooltip" for="tt1">
  Tooltip
</div>

<!-- Large Tooltip -->
<button id="tt2" class="mdl-button mdl-js-button">
  Hover me too
</button>
<div class="mdl-tooltip mdl-tooltip--large" for="tt2">
  Larger Tooltip
</div>
```

```html
<!-- Rich Tooltip -->
<button id="tt3" class="mdl-button mdl-js-button">
  Hover me
</button>
<div class="mdl-tooltip" for="tt3">
  <p>This is a <strong>rich</strong> tooltip with <em>HTML</em> content.</p>
</div>

<!-- Multiline Tooltip -->
<button id="tt4" class="mdl-button mdl-js-button">
  Hover me
</button>
<div class="mdl-tooltip" for="tt4">
  This tooltip has multiple lines of text.
  It can be used for longer explanations.
</div>
```

--------------------------------

### Install Icons with npm

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/styles.md

Use npm to install the Material Design Icons package. This command saves the package to your project's dependencies.

```markup
$ npm install material-design-icons --save
```

--------------------------------

### List with Icons

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/list/snippets/icon.html

Example of how to display a list with icons using Material Design Lite. Ensure the icon class is correctly applied.

```html
.demo-list-icon { width: 300px; }

*   _person_ Bryan Cranston
*   _person_ Aaron Paul
*   _person_ Bob Odenkirk
```

--------------------------------

### Basic Footer Structure

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/footer/README.md

Start by creating a footer element with divs for each content section (top, middle, bottom).

```html
<footer>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
  <div>
  ...
  </div>
</footer>
```

--------------------------------

### Include MDL Files Installed via Bower

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_templates/started.html

Reference the Material Design Lite files in your HTML after installing it with Bower. The paths will point to the bower_components directory.

```html
<link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
<script src="/bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```

--------------------------------

### Image and Text Tooltip Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tooltip/README.md

A tooltip that includes both an image and text content.

```html
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">
<img src="xml-logo-small.png" width="20" height="10"> eXtensible Markup Language</span>
```

--------------------------------

### Tab Content Structure

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tabs/README.md

This example demonstrates placing standard HTML content within the designated tab content divs.

```html
<div>
  <div>
    <a href="#tab1">Tab One</a>
    <a href="#tab2">Tab Two</a>
    <a href="#tab3">Tab Three</a>
  </div>
  <div id="tab1">
    <p>First tab's content.</p>
  </div>
  <div id="tab2">
    <p>Second tab's content.</p>
  </div>
  <div id="tab3">
    <p>Third tab's content.</p>
  </div>
</div>
```

--------------------------------

### Rich Text Tooltip Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tooltip/README.md

Demonstrates a tooltip containing HTML markup for rich text formatting.

```html
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">e<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage</span>
```

--------------------------------

### Data Table Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Organizes and displays data in a tabular format. Suitable for presenting structured information.

```html
<table class="mdl-data-table mdl-js-data-table">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit cost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Opaque)</td>
      <td>10</td>
      <td>$3.10</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Styrene</td>
      <td>50</td>
      <td>$1.00</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Fixed Drawer Layout

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a fixed drawer layout for Material Design Lite.

```html
              file: fixed-drawer.html
              demo_file: fixed-drawer-demo.html
              full_width: true
```

--------------------------------

### Basic Table Structure

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/data-table/README.md

Start by coding a basic HTML table structure with thead and tbody elements.

```html
<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>
```

--------------------------------

### Fixed Header Layout

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a fixed header layout for Material Design Lite.

```html
              file: fixed-header.html
              demo_file: fixed-header-demo.html
              full_width: true
```

--------------------------------

### Floating Action Button Example (MDL)

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/started.md

Shows a colored Floating Action Button (FAB) in Material Design Lite.

```html
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--accent">
  <i class="material-icons">add</i>
</button>
```

--------------------------------

### Multi-line Code Block Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/typography/demo.html

Use the &lt;pre&gt; tag for multi-line code blocks. Each line can be wrapped in a &lt;p&gt; tag.

```html
<p>This is the first line of code</p>
<p>This is the second line of code</p>
```

--------------------------------

### Disabled Menu Item Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/menu/README.md

Demonstrates how to create a disabled menu option using the 'disabled' attribute on a list item.

```html
<li class="mdl-menu__item" disabled>Medium</li>
```

--------------------------------

### Switch Toggle Examples

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

A visual switch for enabling or disabling options. Use 'Switch on' for the enabled state and 'Switch off' for the disabled state.

```html
<!-- Switch -->
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
  <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
  <span class="mdl-switch__label">Switch on</span>
</label>

<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
  <input type="checkbox" id="switch-2" class="mdl-switch__input">
  <span class="mdl-switch__label">Switch off</span>
</label>
```

--------------------------------

### Checkbox Toggle Examples

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Allows users to select one or more options from a set. Use 'Check on' for a pre-selected state and 'Check off' for the default.

```html
<!-- Checkbox -->
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Check on</span>
</label>

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
  <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">Check off</span>
</label>
```

--------------------------------

### Fixed Header and Drawer Layout

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a layout with both a fixed header and a fixed drawer in Material Design Lite.

```html
              file: fixed-header-drawer.html
              demo_file: fixed-header-drawer-demo.html
              full_width: true
```

--------------------------------

### Clone MDL Repository

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/README.md

Clone the Material Design Lite repository using Git to get the source code.

```bash
git clone https://github.com/google/material-design-lite.git
```

--------------------------------

### Icon Toggle Examples

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Provides a toggle functionality using icons. Use 'Icon on' for the active state and 'Icon off' for the inactive state.

```html
<!-- Icon Toggle -->
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
  <input type="button" id="icon-toggle-1" class="mdl-icon-toggle__button" checked>
  <i class="material-icons">format_align_left</i>
  <i class="material-icons">format_align_center</i>
</label>

<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
  <input type="button" id="icon-toggle-2" class="mdl-icon-toggle__button">
  <i class="material-icons">format_align_left</i>
  <i class="material-icons">format_align_center</i>
</label>
```

--------------------------------

### Radio Button List Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/list/snippets/list-control.html

A list item configured as a radio button. Use for single selection from a group.

```html
<li class="mdl-list__item">
  <span class="mdl-list__item-primary-content">
    <span class="mdl-list__item-avatar mdl-list__item-avatar--circle"></span>
    Aaron Paul
  </span>
  <span class="mdl-list__item-secondary-action">
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-radio-1">
      <input type="radio" id="list-radio-1" class="mdl-radio__input" name="list-radio" value="1" checked>
    </label>
  </span>
</li>
```

--------------------------------

### Card Examples

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Demonstrates different card layouts, including wide, square, and image-based cards. Cards are used to group related information and actions.

```html
<div class="mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Title</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Action 1</button>
  </div>
</div>
```

```html
<style>
.demo-card-square.mdl-card {
  width: 320px;
  height: 320px;
}
.demo-card-square > .mdl-card__title .material-icons {
  color: rgb(255, 255, 255);
}
</style>
<div class="demo-card-square mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--border">
    <h2 class="mdl-card__title-text">Title</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Action 1</button>
  </div>
</div>
```

```html
<div class="mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--border">
    <h2 class="mdl-card__title-text">Title</h2>
  </div>
  <div class="mdl-card__media">
    <img src="/assets/demos/image_upload.png" border="0" cellspacing="0" cellpadding="0" style="width: 300px; height: 150px;">
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Action 1</button>
  </div>
</div>
```

```html
<div class="mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Title</h2>
  </div>
  <div class="mdl-card__media">
    <img src="/assets/demos/image_upload.png" border="0" cellspacing="0" cellpadding="0" style="width: 300px; height: 150px;">
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <button class="mdl-button mdl-js-button mdl-js-ripple-effect">Action 1</button>
  </div>
</div>
```

--------------------------------

### MDL Typography Button Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/typography/README.md

Use the 'mdl-typography--button' class for a button-like text style, rendering at 14px and in all caps.

```html
<span class="mdl-typography--button">Medium (All Caps) 14px</span>
```

--------------------------------

### Show a Toast (Snackbar without Action)

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/snackbar/README.md

This JavaScript example demonstrates how to display a toast, which is a snackbar without an action button. Only a message is provided in the data object.

```javascript
var notification = document.querySelector('.mdl-js-snackbar');
notification.MaterialSnackbar.showSnackbar(
  {
    message: 'Image Uploaded'
  }
);
```

--------------------------------

### MDL Typography Headline Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/typography/README.md

Use the 'mdl-typography--headline' class for a headline style, rendering at 24px.

```html
<p class="mdl-typography--headline">Regular 24px</p>
```

--------------------------------

### Card with Image, Caption, and Text (Level-3 Shadow)

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/card/README.md

This example demonstrates an MDL card with a level-3 shadow, displaying an image, a caption, and detailed supporting text.

```html
<div class="mdl-card mdl-shadow--4dp">
  <div class="mdl-card__media"><img src="skytower.jpg" width="173" height="157" border="0"
   alt="" style="padding:10px;">
  </div>
  <div class="mdl-card__supporting-text">
    Auckland Sky Tower, taken March 24th, 2014
  </div>
  <div class="mdl-card__supporting-text">
  The Sky Tower is an observation and telecommunications tower located in Auckland,
  New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
  in the Southern Hemisphere.
  </div>
</div>
```

--------------------------------

### Badge on Icon and Text

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Examples of how to apply badges to icons and text elements. These snippets demonstrate the basic usage for indicating status or counts.

```html
<span class="mdl-badge" data-badge="1"></span>
<span class="mdl-badge" data-badge="10">Icon</span>
```

```html
<span class="mdl-badge" data-badge="1"></span>
<span class="mdl-badge" data-badge="10">Icon</span>
```

--------------------------------

### Content Tabs Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of content tabs in Material Design Lite.

```html
              file: tabs.html
```

--------------------------------

### Fixed Tabs Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of fixed tabs in Material Design Lite.

```html
              file: fixed-tabs.html
              demo_file: fixed-tabs-demo.html
              full_width: true
```

--------------------------------

### Scrollable Tabs Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of scrollable tabs in Material Design Lite.

```html
              file: scrollable-tabs.html
              demo_file: scrollable-tabs-demo.html
              full_width: true
```

--------------------------------

### Build MDL from Source

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_templates/started.html

Steps to clone the Material Design Lite repository, install dependencies, and build the library using Gulp. This method is for developers who need to build from source.

```bash
# Clone/copy the Material Design lite source code.
git clone https://github.com/google/material-design-lite.git
# Go into the newly created folder containing the source code.
cd material-design-lite
# Install necessary dependencies.
npm install && npm install -g gulp
# Build a production version of the components.
gulp
```

--------------------------------

### Grid Cells with Tablet-Specific Sizing

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/grid/README.md

This example shows three cells, each set to 6 columns by default, which will expand to 8 columns on tablet devices.

```html
<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">CS 6 (8 on tablet)</div>
</div>
```

--------------------------------

### Text Field Examples

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Components for textual input. Includes standard text, numeric, floating labels, multi-line, and expanding text areas.

```html
<!-- Textfield -->
<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="sample">
  <label class="mdl-textfield__label" for="sample">Text...</label>
</div>

<!-- Numeric Textfield -->
<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="number" id="sample-numeric">
  <label class="mdl-textfield__label" for="sample-numeric">Numeric...</label>
</div>
```

```html
<!-- Textfield with Floating Label -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="text" id="sample-floating">
  <label class="mdl-textfield__label" for="sample-floating">Text with floating label...</label>
</div>

<!-- Numeric Textfield with Floating Label -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="number" id="sample-floating-numeric">
  <label class="mdl-textfield__label" for="sample-floating-numeric">Numeric with floating label...</label>
</div>
```

```html
<!-- Textarea -->
<div class="mdl-textfield mdl-js-textfield">
  <textarea class="mdl-textfield__input" type="text" rows="3" id="sample-textarea"></textarea>
  <label class="mdl-textfield__label" for="sample-textarea">Multiple line...</label>
</div>

<!-- Expanding Textarea -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
  <button id="sample-expandable-button" type="button" class="mdl-button mdl-js-button mdl-button--icon">
    <i class="material-icons">expand_more</i>
  </button>
  <input class="mdl-textfield__input" type="text" id="sample-expandable" />
  <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
</div>
```

--------------------------------

### MDL Mega Footer Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/footer/README.md

A complete MDL mega-footer with top, middle (with drop-downs), and bottom sections. Use this for complex site navigation and information.

```html
<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>
      <button class="mdl-mega-footer__social-btn"></button>
      <button class="mdl-mega-footer__social-btn"></button>
    </div>
    <div class="mdl-mega-footer__right-section">
      <a href="#">Introduction</a>
      <a href="#">App Status Dashboard</a>
      <a href="#">Terms of Service</a>
    </div>
  </div>
  <div class="mdl-mega-footer__middle-section">
    <div class="mdl-mega-footer__drop-down-section">
      <h1 class="mdl-mega-footer__heading">Learning and Support</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="#">Resource Center</a></li>
        <li><a href="#">Help Center</a></li>
        <li><a href="#">Community</a></li>
        <li><a href="#">Learn with Google</a></li>
        <li><a href="#">Small Business Community</a></li>
        <li><a href="#">Think Insights</a></li>
      </ul>
    </div>
    <div class="mdl-mega-footer__drop-down-section">
      <h1 class="mdl-mega-footer__heading">Just for Developers</h1>
      <ul class="mdl-mega-footer__link-list">
        <li><a href="#">Google Developers</a></li>
        <li><a href="#">AdWords API</a></li>
        <li><a href="#">AdWords Scipts</a></li>
        <li><a href="#">AdWords Remarketing Tag</a></li>
      </ul>
    </div>
  </div>
  <div class="mdl-mega-footer__bottom-section">
    <div class="mdl-logo">
      More Information
    </div>
    <ul class="mdl-mega-footer__link-list">
      <li><a href="#">Help</a></li>
      <li><a href="#">Privacy and Terms</a></li>
    </ul>
  </div>
</footer>
```

--------------------------------

### Show Dialog Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/dialog/README.md

This snippet demonstrates how to show a modal dialog using its JavaScript API. It requires a button to trigger the dialog and the dialog element itself. Ensure dialog support is available, either natively or via a polyfill.

```javascript
var button = document.querySelector('button');
var dialog = document.querySelector('dialog');
button.addEventListener('click', function() {
  dialog.showModal();
  /* Or dialog.show(); to show the dialog without a backdrop. */
});
```

--------------------------------

### Basic Chip with Text

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/chip/README.md

Add the text wrapper and the MDL classes to create a basic chip with text.

```html
<span class="mdl-chip">
    <span class="mdl-chip__text">Chip Text</span>
</span>
```

--------------------------------

### Responsive Grid Layout

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/grid/snippets/grid-demo.html

Shows how to create a responsive grid layout using MDL classes for different column spans on various screen sizes.

```html
<div class="demo-grid">
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">6 (tablet 8, phone 4)</div>
    <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">6 (tablet 8, phone 4)</div>
  </div>
</div>
```

--------------------------------

### Grid Cells with Phone-Specific Sizing

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/grid/README.md

This example features four cells, each set to 2 columns by default, which will expand to 4 columns on phone devices.

```html
<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2 (4 on phone)</div>
</div>
```

--------------------------------

### Inactive Spinner Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/spinner/README.md

An example of an inactive spinner. The absence of the 'is-active' class makes the spinner invisible. This state can be toggled programmatically.

```html
<div class="mdl-spinner mdl-js-spinner"></div>
```

--------------------------------

### Install Icons with Bower

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/styles.md

Use Bower to install the Material Design Icons package. This command saves the package to your project's dependencies.

```markup
$ bower install material-design-icons --save
```

--------------------------------

### Simple Dialog with HTML and JavaScript

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/dialog/README.md

This example shows a basic MDL dialog with a title, content, and action buttons. It includes the necessary HTML structure and JavaScript to register the dialog with a polyfill if needed, and to open/close it.

```html
<body>
  <button id="show-dialog" type="button" class="mdl-button">Show Dialog</button>
  <dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Allow data collection?</h4>
    <div class="mdl-dialog__content">
      <p>
        Allowing us to collect data will let us get you the information you want faster.
      </p>
    </div>
    <div class="mdl-dialog__actions">
      <button type="button" class="mdl-button">Agree</button>
      <button type="button" class="mdl-button close">Disagree</button>
    </div>
  </dialog>
  <script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog');
    if (! dialog.showModal) {
      dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
      dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.close();
    });
  </script>
</body>
```

--------------------------------

### Slider Starting Value HTML

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/slider/snippets/slider-starting-value-demo.html

Include this snippet to display a slider that starts with a predefined value. Ensure the 'slider-starting-value.html' template is available in your includes directory.

```html
.demo-slider__slider-starting-value .mdl-slider { width: 30vw; max-width: 260px; } {% include "slider-starting-value.html" %}
```

--------------------------------

### Initialize and Size Demos with JavaScript

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/index.html

This JavaScript code initializes Material Design Lite demos by creating navigation links and dynamically sizing iframes based on their content height. It's used for managing the loading and display of demo components.

```javascript
'use strict'; var navList = document.getElementById('main-navigation'); var totalDemosPendingLoading = 0; sizeDemos(); function sizeDemos() { var demos = document.querySelectorAll('.styleguide-demo'); totalDemosPendingLoading = demos.length; for (var i = 0; i < demos.length; i++) { var demoTitle = demos[i].querySelector('h1').textContent; var anchorLink = 'demo-' + i; // Add list item var navAnchor = document.createElement('a'); navAnchor.classList.add('mdl-navigation__link'); navAnchor.href = '#' + anchorLink; navAnchor.appendChild(document.createTextNode(demoTitle)); navList.appendChild(navAnchor); var anchor = document.createElement('a'); anchor.id = anchorLink; demos[i].insertBefore(anchor , demos[i].querySelector('h1')); // Size iframe sizeDemo(demos[i]); } } function sizeDemo(rootDemoElement) { var iframe = rootDemoElement.querySelector('iframe'); if (iframe === null) { totalDemosPendingLoading--; return; } iframe.onload = function() { var contentHeight = iframe.contentDocument.documentElement.scrollHeight; iframe.style.height = contentHeight + 'px'; iframe.classList.add('heightSet'); totalDemosPendingLoading--; if (totalDemosPendingLoading <= 0) { document.body.classList.add('demosLoaded'); } }; }
```

--------------------------------

### Include Downloaded MDL Files

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_templates/started.html

Reference the local Material Design Lite CSS and JavaScript files in your HTML after downloading them. Ensure the paths are correct relative to your project structure.

```html
<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```

--------------------------------

### Radio Button Group Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/radio/README.md

A complete example of a radio button group used to control a camera's flash setting, demonstrating checked states and the ripple effect.

```html
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash1">
  <input checked class="mdl-radio__button" id="flash1" name="flash" type="radio"
   value="on">
  <span class="mdl-radio__label">Always on</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash2">
  <input class="mdl-radio__button" id="flash2" name="flash" type="radio" value="off">
  <span class="mdl-radio__label">Always off</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="flash3">
  <input class="mdl-radio__button" id="flash3" name="flash" type="radio" value="auto">
  <span class="mdl-radio__label">Automatic</span>
</label>
```

--------------------------------

### Mocha Test Runner Setup and Execution

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/test/index.html

Configures the Mocha test runner with the 'bdd' interface and 'html' reporter. It then sets up Chai's 'expect' and initiates the test run, handling both standard browser execution and mochaPhantomJS.

```javascript
// mocha.ui('bdd');
mocha.setup('bdd');
mocha.reporter('html');

// use chais-implementation of "expect"
expect = chai.expect;

window.addEventListener('load', function () {
  if (window.mochaPhantomJS) {
    mochaPhantomJS.run();
  } else {
    mocha.run();
  }
});
```

--------------------------------

### Buffering Progress Bar

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a buffering progress bar in Material Design Lite.

```html
              file: progress-buffering.html
              demo_file: progress-buffering-demo.html
```

--------------------------------

### Basic Grid Layout

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/grid/snippets/grid-demo.html

Demonstrates a simple MDL grid with cells. The grid and cells are styled for visual representation.

```html
<div class="demo-grid">
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col">4</div>
    <div class="mdl-cell mdl-cell--4-col">4</div>
    <div class="mdl-cell mdl-cell--4-col">4</div>
  </div>
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--6-col">6</div>
    <div class="mdl-cell mdl-cell--6-col">6</div>
  </div>
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--12-col">12</div>
  </div>
</div>
```

--------------------------------

### Indeterminate Progress Bar

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of an indeterminate progress bar in Material Design Lite.

```html
              file: progress-indeterminate.html
              demo_file: progress-indeterminate-demo.html
```

--------------------------------

### Default Progress Bar

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a default progress bar in Material Design Lite.

```html
              file: progress-default.html
              demo_file: progress-default-demo.html
```

--------------------------------

### Grid with Order

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/grid/snippets/grid-demo.html

Demonstrates how to reorder grid cells using order classes.

```html
<div class="demo-grid">
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--order-2-phone">Cell 1 (order 2)</div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--order-1-phone">Cell 2 (order 1)</div>
  </div>
</div>
```

--------------------------------

### Long Text Tooltip Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tooltip/README.md

Shows a tooltip with long text that automatically wraps.

```html
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
<span class="mdl-tooltip" for="xml">XML is an acronym for eXtensible Markup Language</span>
```

--------------------------------

### Waterfall Header Layout

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a waterfall header layout for Material Design Lite.

```html
              file: waterfall-header.html
              demo_file: waterfall-header-demo.html
              full_width: true
```

--------------------------------

### Scrolling Header Layout

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Example of a scrolling header layout for Material Design Lite.

```html
              file: scrolling-header.html
              demo_file: scrolling-header-demo.html
              full_width: true
```

--------------------------------

### Complete MDL Mini Footer Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/footer/README.md

A fully constructed MDL mini-footer with content in both left and right sections. The left section includes a heading and links, while the right section contains social media buttons.

```html
<footer class="mdl-mini-footer">
  <div class="mdl-mini-footer__left-section">
    <div class="mdl-logo">
      Mini-footer Heading
    </div>
    <ul class="mdl-mini-footer__link-list">
      <li><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>
  <div class="mdl-mini-footer__right-section">
    <button class="mdl-mini-footer__social-btn"></button>
    <button class="mdl-mini-footer__social-btn"></button>
    <button class="mdl-mini-footer__social-btn"></button>
  </div>
</footer>
```

--------------------------------

### Build and Test Locally

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/CONTRIBUTING.md

Build the project locally to ensure all tests pass before submitting a pull request.

```shell
gulp
```

--------------------------------

### Chip Examples

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Demonstrates various chip styles, including basic, deletable, button, contact, and deletable contact chips. Chips represent complex entities in small blocks.

```html
<div class="mdl-chip">
  <span class="mdl-chip__text">Basic Chip</span>
</div>
```

```html
<div class="mdl-chip">
  <span class="mdl-chip__text">Deletable Chip</span>
  <button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
</div>
```

```html
<div class="mdl-chip">
  <span class="mdl-chip__text">Button Chip</span>
  <button type="button" class="mdl-chip__action"><i class="material-icons">keyboard_arrow_right</i></button>
</div>
```

```html
<div class="mdl-chip">
  <img src="/assets/demos/avatar_1.jpg" class="mdl-chip__contact mdl-chip__contact--img">
  <span class="mdl-chip__text">Contact Chip</span>
</div>
```

```html
<div class="mdl-chip">
  <img src="/assets/demos/avatar_1.jpg" class="mdl-chip__contact mdl-chip__contact--img">
  <span class="mdl-chip__text">Deletable Contact Chip</span>
  <button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
</div>
```

--------------------------------

### MDL Typography Caption Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/typography/README.md

Use the 'mdl-typography--caption' class for a caption style, rendering at 12px.

```html
<span class="mdl-typography--caption">Regular 12px</span>
```

--------------------------------

### Snackbar Notification Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Displays transient popup notifications. Use for brief messages that do not require user interaction.

```html
<!-- Snackbar -->
<div id="toast" class="mdl-snackbar mdl-snackbar--action">
  <span class="mdl-snackbar__text">Hello, world!</span>
  <button type="button" class="mdl-snackbar__action">Action</button>
</div>
<script>
  document.querySelector('#toast').MaterialSnackbar.showSnackbar({
    message: 'Example notification',
    actionHandler: function(event) {
      alert('Action triggered!');
    },
    actionText: 'Action',
    timeout: 2000
  });
</script>
```

--------------------------------

### MDL Typography Title Example

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/typography/README.md

Use the 'mdl-typography--title' class for a title style, rendering at 20px.

```html
<p class="mdl-typography--title">Medium 20px</p>
```

--------------------------------

### Create Basic List Container

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/list/README.md

This snippet shows how to create the outer container for an MDL list using the `mdl-list` class.

```html
<ul class='mdl-list'>
</ul>
```

--------------------------------

### Default Spinner and Single Color Spinner

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/docs/_pages/components.md

Examples of a default spinner and a single-color spinner in Material Design Lite.

```html
            file: spinner-default.html
```

```html
            file: spinner-single-color.html
```

--------------------------------

### Complete MDL Tab Implementation

Source: https://github.com/google/material-design-lite/blob/mdl-1.x/src/tabs/README.md

This is a complete example of an MDL tab component, including the necessary classes for styling and functionality, and the 'is-active' class for the default visible tab.

```html
<div class="mdl-tabs mdl-js-tabs">
  <div class="mdl-tabs__tab-bar">
    <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
    <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
    <a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
  </div>
  <div class="mdl-tabs__panel is-active" id="tab1">
    <p>First tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab2">
    <p>Second tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab3">
    <p>Third tab's content.</p>
  </div>
</div>
```