Material Design

Párrafo Normal

Material design es una normativa de diseño enfocado en la visualización del sistema operativo Android, además en la web y en cualquier plataforma. Fue desarrollado por Google y anunciado en la conferencia Google I/O celebrada el 25 de junio de 2014.

Párrafo Citado

Google previamente realizó diseños para cambiar las interfaces de sus aplicaciones para móviles. El proyecto fue llamado internamente como Hera. Más adelante fue renombrado como Quantum Paper.

<blockquote>Contenido del párrafo citado</blockquote>

Tabla responsive

<div class="table"><table id="table">
   <thead>
      <tr><th>Titulo 1</th><th>Titulo 2</th></tr>
   </thead>
   <tbody>
      <tr><td>Contenido titulo 1</td><td>Contenido titulo 2</td></tr>
   </tbody>
</table></div>

Video responsive

Código para videos de youtube:

<div class="embed">
    <iframe src="https://www.youtube.com/embed/{{ID-VideoYoutube}}" allowfullscreen></iframe>
</div>

Código para videos de vimeo:

<div class="embed">
    <iframe src="https://player.vimeo.com/video/{{ID-VideoVimeo}}" allowfullscreen></iframe>
</div>

Código para cualquier reproductor de video:

<div class="embed">
    <iframe src="{{Source-VideoURL}}" allowfullscreen></iframe>
</div>

Botones

Botón Botón Botón Botón

<a class="button {{color}}" href="#url">Botón</a>

Reemplazar {{color}} por red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey o blue-grey. O escribe color para usar el color principal configurado.

Iconos y botones

 Botón  Botón  Botón  Botón

<a class="button {{color}}" href="#url">{{i:material}} Botón</a>

Reemplazar i:material por el código html del icono que puedes obtener desde la página oficial proporcionada por material.io.