Create Websites with Google's Material Design (MDL Lite)

The Material Design Lite (MDL) grid component is a simplified method for laying out content for multiple screen sizes. It reduces the usual coding burden required to correctly display blocks of content in a variety of display conditions.

The MDL grid is defined and enclosed by a container element. A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size, each size having predefined margins and gutters. Cells are laid out sequentially in a row, in the order they are defined, with some exceptions:

• If a cell doesn't fit in the row in one of the screen sizes, it flows into the following line.
• If a cell has a specified column size equal to or larger than the number of columns for the current screen size, it takes up the entirety of its row.

You can set a maximum grid width, after which the grid stays centered with padding on either side, by setting its max-width CSS property.

Grids are a fairly new and non-standardized feature in most user interfaces, and provide users with a way to view content in an organized manner that might otherwise be difficult to understand or retain. Their design and use is an important factor in the overall user experience.

The Material Design Lite (MDL) badge component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.

You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:

• A "New messages" notification might be followed by a badge containing the number of unread messages.
• A "You have unpurchased items in your shopping cart" reminder might include a badge showing the number of items in the cart.
• A "Join the discussion!" button might have an accompanying badge indicating the number of users currently participating in the discussion.

A badge is almost always positioned near a link so that the user has a convenient way to access the additional information indicated by the badge. However, depending on the intent, the badge itself may or may not be part of the link.

Copy and Paste Code in Your HTML File MDL Buttons.

<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>

<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>

<!-- Raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised">
Button
</button>

<!-- Raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Button
</button>

<!-- Raised disabled button-->
<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
Button
</button>

<!-- Colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Button
</button>

<!-- Accent-colored raised button -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
Button
</button>

<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>

<!-- Flat button -->
<button class="mdl-button mdl-js-button">
Button
</button>

<!-- Flat button with ripple -->
<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
Button
</button>

<!-- Disabled flat button -->
<button class="mdl-button mdl-js-button" disabled>
Button
</button>

<!-- Primary-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--primary">
Button
</button>

<!-- Accent-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--accent">
Button
</button>

An overview of material icons—where to get them and how to integrate them with your projects.
Contents

• What are material icons
• Getting icons
• Icon font for the web
• Icon images for the web
• Icons for Android
• Icons for iOS

https://google.github.io/material-design-icons/

https://www.google.com/design/icons/

To use Both fonts add following link in the head section of HTML page

<link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather' rel='stylesheet' type='text/css'>

HTML Tables are important part of any website that lets you organize your data.

MDL Lite framework offers some necessary CSS classes that you need to add in your HTML tables. MDL tables looks great on all type of devices (Desktop, laptops, tablets and smart phones) and screen sizes (large, small).

The Material Design Lite (MDL) data-table component is an enhanced version of the standard HTML <table>. A data-table consists of rows and columns of well-formatted data, presented with appropriate user interaction capabilities.

To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the <head> section of the page, as described in the MDL Introduction.

HTML forms contain different form elements (input fields, buttons etc). Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.

The Material Design Lite (MDL) text field component is an enhanced version of the standard HTML <input type="text"> and <input type="textarea"> elements. A text field consists of a horizontal line indicating where keyboard input can occur and, typically, text that clearly communicates the intended contents of the text field. The MDL text field component provides various types of text fields, and allows you to add both display and click effects.

Creating beautiful forms are easy, you just need to apply some necessary classes to form elements. In this lecture you will learn to create a practical comment forms with three input fields and a submit button.

.

Material Design Lite offers more than 10 type buttons each with different display and click effect. In this lecture you will learn how to code buttons from scratch.

I have added 10 new lectures. You will learn how to use MDL Lite Responsive grid system and how to create fully responsive websites from scratch with MDL Lite framework.

The Material Design Lite (MDL) grid component is a simplified method for laying out content for multiple screen sizes. It reduces the usual coding burden required to correctly display blocks of content in a variety of display conditions.

The MDL grid is defined and enclosed by a container element. A grid has 12 columns in the desktop screen size, 8 in the tablet size, and 4 in the phone size, each size having predefined margins and gutters.

With MDL Lite Grid system it is very easy to create fully responsive websites for Desktops, Tablets and mobile phones.

In this lecture you will learn how to create a simple 2 column layout with MDL Lite grid system.

MDLLIte grid offers 8 columns grid for tablets and 4 columns for phones. For example you can use
mdl-cell--8-col-tablet class if you need full width column for tablet and mdl-cell--4-col-tablet class if you want 2 equal columns.

See the final fully responsive and mobile friendly website that you will learn to create in this video course.

In this video we will create mark up for header section of our final website, We will add page title and navigation menu too our site header.

Our main navigation menu will be hidden on small screen devices such as Tablets and pones, that's why we will create a sidebar navigation menu that will be visible on all type of small and large screen devices (Desktops, tablets and Phones).

In this lecture you will learn to create 2 columns for primary and sidebar content.

How to use Material design icons and MDL Lite forms search fields.

Our final responsive website will have 3 columns footer section, in this lecture you will learn how to create 3 columns footer layout and also add background color with single CSS class

Download all files of our final project.