Aprendiendo material design lite en pocos minutos….

Consejo rápido:  Aprendiendo material design lite en pocos minutos , este framework está en aumento por su gran capacidad de diseño tal como ya habíamos hablado en otro tutorial , vamos a ver sus clases y como iniciarlo con unas cuantas líneas y además de cambiar sus colores tanto desde el css y desde su paleta de colores .

Antes de comenzar cave recalcar que la información proporcionada esta siendo sacada desde su página de autor getmdl.io y no pretende sustituir a ningún contenido ..

Comenzando.

Debemos utilizar sus hojas de estilos ya sea desde sus CDN Hosted o descargando sus ultimas versiones de estilos…

Utilizando sus hosted : Con tan solo colocar estas líneas entre head ya tenemos sus estilos enlazados a nuestra página html.

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>

El enlace a material.min.js proporciona acciones de javascript que podemos utilizar mas adelante para validar formularios o crear efectos dentro de nuestra web.

El enlace a fonts.googleapis.com sirve para respresentar los iconos dentro de nuestras web’s  y las fuentes podrán ser cambiadas véase una referencia de más fuentes aquí .

El enlace a material.indigo-pink.min.csss se basan en un color primario de acento, estos colores son posibles  de personalizar. Sus CDN albergan una serie de combinaciones de colores comunes de diseño para mdl . Puede realizar sus propias combinaciones dede  esta herramienta  donde existe una vista previa del estilo deseado.

Ok ya realizo su experimento, pues bién si desea utilizar ese estilo deseado solo basta con copiar el enlace o descargarlo y alojarlo en su hosting, véase imagen.

material design lite

Grid

Este es uno de los pasos mas importantes que debemos ver y considerar ya que nuestra web responsive se verá afectada dependiendo las grid que asignemos hay que recalcar que google apoya el sistema reesponsive en las web´s  y si queremos ser enlazados tenemos que cumplir con este primer objetivo véase esta publicación.

MDL tiene un sistema de grid similar a la de bootstrap, pero sólo tiene tres tamaños – teléfono (de 0 a 480 píxeles), la tableta (480px a 840px) y el escritorio (840px +).  Escritorio MDL tiene 12 columnas , la tableta tiene 8 columnas y el teléfono tiene sólo 4 columnas .

See the Pen vLwxgQ by bloguero ecuador (@bloguero) on CodePen.

Cabecera de navegación

MDL tiene algo nuevo e innovador en barra de navegaciones de cabeceras, mientras  se minimiza la pantalla , su menú queda con gráficos personalizados y si la expandimos la ventana, se crea una barra horizontal . Existen difernetes tipos de esilos para contener menus y sub-menus.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”vGEJgG” default_tab=”result” user=”bloguero”]See the Pen vGEJgG by bloguero ecuador (@bloguero) on CodePen.[/codepen_embed]

Footer

A diferencia de Bootstrap que en realidad no tienen componentes separados de pie de página, MDL tiene dos opciones, un mini-footer y un mega-footer .

Este diseño de footer es bastante bueno, para el demo utilizaremos el mega footer además  que  en realidad su personalización es bastante sencilla recuerda utilizar sus clases para crearlo.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”LNEjzV” default_tab=”result” user=”bloguero”]See the Pen LNEjzV by bloguero ecuador (@bloguero) on CodePen.[/codepen_embed]

La diferencia  en las pequeñas ventanas, se ve como las columnas colapsan y pasa a la activación de linea a linea con una viñeta al final para mostrar el sub-menú.

Tabs

MDL utiliza una sintaxis  para crear pestañas seleccionables con un contenido diferente. Una serie de enlaces para el intercambio entre las pestañas, y una serie de divs, seleccionable por id, para almacenar el contenido. aquí requerimos de JavaScript para trabajar.

Se inicializa con la siguiente sintaxis:

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
</div>

Su cabecera es inicializada similar a una tabla html, a diferencia de sus clases e id.

<div class="mdl-tabs__tab-bar">
 <a href="#participantes" class="mdl-tabs__tab is-active">Participantes</a>
 <a href="#paises" class="mdl-tabs__tab">Paises</a>
 <a href="#callejones" class="mdl-tabs__tab">Callejones</a>
</div>

Utilizando las listas desordenadas y almacenando sus id de la siguiente manera.

<div class="mdl-tabs__panel is-active" id="participantes">
    <ul>
      <li>Eddard</li>
      <li>Catelyn</li>
      <li>Robb</li>
    </ul>
</div>

Se ve mas orgánico con javascript ahí les dejo el demo.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”PNwKBJ” default_tab=”result” user=”bloguero”]See the Pen PNwKBJ by bloguero ecuador (@bloguero) on CodePen.[/codepen_embed]

Botones

MDL ofrece dos botones: circulares y rectangulares. Google tiene una guía sobre cómo y en qué situaciones puede utilizar los diferentes tipos de botones. Todos los botones de MDL apoyan el efecto de animación de ondulación que lo hace ver mas orgánico y agradable. vemos como se inicializan y su demostración tan solo están de copiar y pegar..

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”bpNodm” default_tab=”result” user=”bloguero”]See the Pen bpNodm by bloguero ecuador (@bloguero) on CodePen.[/codepen_embed]

Recuerda inicializarlo correctamente ademas de usar sus efectos javascript y su clase  .mdl-js-ripple-effect es para hacerle un efecto de ondulación , esta clase  .material-icons sirve para utilizar iconos desde sus hosted que pueden ser utilizados y personalizados como mas le convenga.

Tabla

Las tablas son generalmente difíciles de hacer sensible. Bootstrap ha superado este problema al hacer una barra de desplazamiento que aparece cuando la tabla no se ajusta a la pantalla. los desarrolladores de MDL no han añadido la capacidad de respuesta a las tablas todavía, pero lo que han hecho es añadir estilos sorprendentes que hacen que las tablas se vean muy bien.

En arranque también se puede hacer tablas rayadas, bordeadas y condensados. MDL ofrece un estilo por defecto (que a su vez, se ve muy limpio) y un diseño con filas seleccionables.

Se inicializa como un tabla normal añadiendo su respectiva clase de mdl además ofrece mas clases para poder obtener mejores resultados.

<table class="mdl-data-table">
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Pais</th>
            <th>dominio</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>Bloguero</td>
            <td>Ecuador</td>
            <td>.com</td>
        </tr>
    </tbody>
</table>

Mas ejemplos aquí:

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”QNwqqX” default_tab=”result” user=”bloguero”]See the Pen QNwqqX by bloguero ecuador (@bloguero) on CodePen.[/codepen_embed]

Otra característica interesante que trae a la mesa de MDL es la opción para alinear los contenidos en función de su tipo por el uso de clases. Esto funciona de forma similar a las hojas de cálculo de Excel, texto en el medio, los números a la derecha , etc.

Formularios

MDL apoya muy poco los elementos de entrada, para los pocos que son compatibles, pueden tener las animaciones de mdl haciéndolos muy vistosos a la hora de interactuar con ellos. También han integrado verificación y comparación de patrones. Esto les permite mostrar un mensaje de error y se ponen rojos cuando los datos no son válidos esto gracias a javasript.

Su formulario es usual y se inician los elementos en cada input ejm.

/*inicializamos un div  con mdl-textfield*/
<div class="mdl-textfield">
  /*una etiqueta que gracias a javascript cambia a rojo el color del texto
  cuando haya errores de pattern
  */
  <label for="input_password" class="mdl-textfield__label">Password with verification</label>
  /*el input con clase e id correspondientes
  pattern apoya el ingreso de solo numeros tambien se puede modificar por mas caracteres
  */
  <input type="password" pattern="[0-9]*" class="mdl-textfield__input" id="input_password" />
  /*este span con su clase  mdl-textfield__error aparece cuando el error
  de ingreso no sea valido */
  <span class="mdl-textfield__error">Digits only</span>
</div>

vea su efecto en acción:

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”wGBrXZ” default_tab=”result” user=”bloguero”]See the Pen wGBrXZ by bloguero ecuador (@bloguero) on CodePen.[/codepen_embed]

Conclusión

En general Material de Diseño Lite se perfila como un buen framework frontend. Existe más material que e dejado de lado y e mencionado lo mas importante , crear una aplicación web con este framework podría resultar con un estilo muy bueno para su página .El hecho de que está hecho por Google le da la confianza de que siempre va a cumplir con la última especificación de diseño.

Si no encuentra MDL para diseño como  atractivo, existen mas frameworks frontend para trabajar ,espero que este pequeño tutorial le sirva de ayuda para sus proyectos.

Relacionado