WebDesigners, WebMasters & Developers • 4 min de lectura

Material Design usando Materialize

Materialize

Material Design es un lenguaje de diseño creado por Google. De acuerdo con material.io, Material Design tiene como objetivo combinar:

…los principios clásicos del buen diseño con la innovación y posibilidad de la tecnología y la ciencia. Su objetivo es desarrollar un único sistema subyacente que permita una experiencia unificada a través de plataformas y tamaños de dispositivos. Los preceptos móviles son fundamentales, pero el tacto, la voz, el ratón y el teclado son todos métodos de entrada first-class.

¿Por qué usar el Material Design?

Material Design proporciona una experiencia de usuario perfecta en todos los dispositivos. Las transiciones y animaciones sensibles, junto con el padding y los efectos de profundidad como sombras e iluminación, hacen que se sienta elegante y fácil de usar. Google utiliza Material Design en casi todas sus aplicaciones (como Keep y Calendar).

¿Cómo puedes usar Material Design en tus aplicaciones web?

Materialize es una biblioteca de componentes de front-end con capacidad de respuesta similar a Bootstrap. Ofrece todo lo que Bootstrap tiene que ofrecer, pero la diferencia es que Materialize sigue los principios del diseño de Material Design. Aquí tienes un ejemplo de plantilla.

Theme Materialize

Lista de las características que ofrece Materialize:

  • Grid
  • Tables
  • Badges, buttons, breadcrumbs
  • Cards, chips, collections
  • Footer, forms
  • Navbar
  • y mucho más…

Cómo empezar con Materialize

A diferencia de Bootstrap, Materialize no requiere popper.js. Sólo requiere jQuery. Esto es todo lo que necesitas para empezar. Añade esto a tu HTML y estarás listo para empezar!

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Compiled and minifed jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

Colores

Usando Materialize, puedes cambiar el color de cualquier elemento HTML simplemente dándole un nombre de clase del color que quieras. Por ejemplo, si quieres darle a la etiqueta de tu párrafo el color rojo, haz lo siguiente:

<p class=”red”>Lorem Ipsum</p>

Además, también puedes aclarar u oscurecer un color dándole otro nombre de clase lighten-1 u darken-1. Por ejemplo, <h1 class=»blue lighten-1″>Texto de muestra</h1>. El 1 puede ser reemplazado con números hasta 5 para aclarar y hasta 4 para oscurecer. Los números más altos aplicarían tonos más claros u oscuros del color.

Botones

Para materializar un botón, sólo hay que darle el nombre de la clase btn. También puedes añadirle una animación genial dándole otro efecto de waves-effect. Si necesitas un botón más grande, se puede usar la clase btn-large . Por ejemplo:

<button class=”btn”>
  Click
</button> <!-- Materialized button without click animation -->
<button class="btn waves-effect">
  Click
</button> <!-- Materialized button with click animation -->
<button class="btn-large">
  Click
</button> <!-- Large Button -->

Sombras

En Material Design, todo debe tener una cierta profundidad z-depth que determina cuán lejos o cerca de la página está el elemento.

Para aplicar un efecto de sombra a un elemento, se puede utilizar la clase z-depth-2 (2 puede ser reemplazada por los números 1-5). Por ejemplo:

<div class="z-depth-2"><!-- Really cool stuff --></div>

Conclusión

Esto es solo lo básico de este tema. Hay mucho más disponible para usar en Materialize (como transiciones, tarjetas, carrusel y modales). Puedes aprender a usar todos los componentes en los documentos. Los nombres de las clases son muy sencillos y la cuadrícula o grilla es muy útil para crear rápidamente columnas que sean responsive.

Anímate a seguir investigando !!!!

 

Comentarios

Artículos Relacionados