Material Design Lite -
Material Design Lite -

Google announced last June its commitment to material design for the web. Google, since last year sought the unification of design in both desktop and web environments. Material Design Lite is a component library based on the style guide material design. We will present and analyze its components.

A brief introduction to philosophy

The metaphor of the material

Material Design Lite -
The metaphor of the material is the definition of the relationship between space and movement. The material is based on a touch reality, inspired by the paper and ink. The components of our website will be a reality, as we could find on our desktop.

Bold, graphic and intentional

Material Design Lite -
The elements must maintain scales, colors, fonts, images, etc. that allow pleasantly appear.The emphasis on user actions makes the main functionality is immediately evident.This provides benchmarks for the user.

The movement provides meaning

Material Design Lite -
The movement of the elements allows the user to feel a parallel between what they see on screen and in real life.The move is significant and appropriate, as it serves to focus and maintain continuity.Feedback should be subtle but clear and transitions to be efficient but consistent time.



The code to implement Material Design Lite, can be downloaded from GitHub or directly from the web. This library offers a set of CSS and JS can customize resources. Material Design Lite has an extensive library of components for use in our website projects and applications.

  • Material Design Lite is created for screens adaptable depending on its resolution.
  • At interfaces they are can define primary and secondary color.
  • Ready to be customized, adding new CSS classes.
  • Material Design Lite uses BEM .
  • Customizing primary and secondary colors. From the website we offer a series of combinations of common color.
  • Many customizable components.


  • Buttons .Two main, circular or rectangular styles.With possibility of applying different colors, sizes or effects.
    Buttons example Material Design Lite - TinoShare.comButtons example

    Code of the first radio button on the left

    < button class = "mdl-button-js-button mdl mdl-button - fab mdl-button - colored" >
      < i class = "Material-icons" > I'ma </ button i >
    </ button >
    <! - Same button ripple effect ->
    < button class = "mdl-button-js-button mdl mdl-button - fab mdl-js-ripple-effect mdl-button - colored" >
      < i class = "Material-icons" > I'ma </ button i >
    </ button >
  • Cards .One of the stars of material.They allow us to show information, images, retro feed the user after an action, etc.
    Cards Material Design Lite - TinoShare.comMaterial Design Lite cards
  • Layout. Ready for supplying information on the screen. It also offers several provisions of the menu bar search, fixed, transparent, etc.very complete!.
  • Getmdl menu Material Design Lite - TinoShare.comExamples of menu layout
  • Tables . Improved tables to configure them easily. Moreover, it is a pity that has not added an adaptive version smaller screens.Material Design Lite - TinoShare.comAnd your code
    < table class = "mdl-data-table mdl-js-data-table mdl-data-table - selectable mdl-shadow - 2DP" >
      < thead >
        < tr >
          < th class = "mdl-data-table__cell - non-numeric" > Material </ th >
          < th > Quantity </ th >
          < th > Unit price </ 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" > Plywood (Birch) </ td >
          < td > 50 </ td >
          < td > $ 1.25 </ td >
        </ tr >
        < tr >
          < td class = "mdl-data-table__cell - non-numeric" > Laminate (Gold on Blue) </ td >
          < td > 10 </ td >
          < td > $ 2.35 </ td >
        </ tr >
      </ tbody >
    </ table >
  • Pull-down menus. Add a list of actions. The items can be displayed enabled or disabled. We can also guide the direction in which our pulldown menu.
  • Badges. Certainly a good way to tell the user anything.
  • Forms. Inputs, sliders, checkboxes, radio buttons, toggle icon, switch, etc. They all customizable.For example, in the ‘ input ‘it allows us to add error handling and customization options.
  • Material Design Lite - TinoShare.comSome elements that we can use

In short, Material Design Lite offers a wealth of useful resources created by Google. Thanks to libraries like this, we can easily developments following a style guide.

Have you already used this library ?, Tell us more about it! :).

is strongly seasoned and hard-working Graphic Designer with extraordinary creative thinking and project design abilities. With 7 years experience in print and digital, including art direction, web/mobile design and consultation, illustration, packaging and copywriting/editing for clients in fashion, pharmaceutical, furniture, automotive, food & beverage, design, hospitality, financial, broadcast and NGO. I love sharing ideas and writing articles.