Material Design Lite, Simple Card

Les quiero dejar la primera experiencia utilizando #MaterialDesignLite, para este ejemplo utilicé un componente simple de #card.

1. Configurar un simple #html con lo esencial para que los estilos respeten #MaterialDesign. (utilicé los vínculos a los archivos en el CDN de referencia, luego hay varias opciones para dejarlo local)

Dentro del #head:
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.css">
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

2. Una simple configuración de estilos para darle un toque personal a la #card:
<style>
    .demostracion-mdl-card {
    width: 450px;
  }
    .demostracion-mdl-card > .mdl-card__title {
    color: #fff;
    height: 150px;
    background: url('./imagenes/android_1.jpg') center / cover;
  }
    .demostracion-mdl-card > .mdl-card__menu {
    color: #fff;
  }
</style>

3. La declaración de #card en el #body:
Verán algunos elementos incluidos como el titulo, el texto de soporte, las acciones y el menú:

<div class="mdl-card mdl-shadow--2dp demostracion-mdl-card">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Contenido Móvil</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Contenido para iniciar el desarrollo móvil en aplicaciones nativas Android
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Ver
    </a>
  </div>
  <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
  </div>
</div>

Ahora podemos ordenar la estructura de la #card para el ejemplo:

¿Y se imaginan que ocurre si quitamos el soporte de #Material del  #head?

Muy simple de implementar, fácil y rápido.. no dejen de visitar getmdl, y por supuesto miren las plantillas si quieren rápidamente ver ejemplos avanzados.

Aquí les dejo el snippet de código:

Cargando ....

Material Design Lite, Simple Card por Nicolas Bortolotti se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.