Materializar - Un Marco de Diseño de Material CSS

De Google Diseño de materiales está dirigido a funcionar bien en la Web y también en aplicaciones móviles. Está ganando popularidad entre los desarrolladores y si también quiere adoptarla, hay muchas formas de implementar Material Design en su sitio. Puedes usar Polímero o Angular, o puedes usar Materializar.

Materializar es un Marco CSS basado en principios de diseño de materiales con soporte Sass para un mejor desarrollo. Lleva el estilo predeterminado para un uso fácil y tiene documentación detallada.

Puede encontrar una gran cantidad de componentes útiles dentro de: diálogo, modal, selector de fecha, botones de material, paralaje, tarjetas y más. También tiene muchas opciones de navegación que puede elegir, como desplegable, deslizar en el menú y pestañas. Materializar también utiliza un Sistema de 12 rejillas con 3 consultas de medios de tamaño de pantalla predeterminadas: un ancho máximo de 600px es un dispositivo móvil, un dispositivo de tableta 992px y más de 992px se considera un dispositivo de escritorio.

Empezando

Hay dos formas de comenzar a materializar: usar CSS estándar o Hablar con descaro a. Ambas fuentes se pueden descargar aquí. También puede obtenerlos con bower usando el siguiente comando:

 Bower instalar materializar 

Después de obtener las fuentes, asegúrese de vincularlas correctamente en su archivo de proyecto o compile la fuente si está utilizando la versión Sass.

Caracteristicas

En esta sección, explicaré algunas características que Materialise ofrece..

1. Sass Mixins

Este marco lleva Sass Mixins, que agrega automáticamente todos los prefijos del navegador cuando escribe ciertas propiedades CSS. Es una gran característica tener que asegurar compatibilidad en todos los navegadores, Con la menor molestia, y código, como sea posible..

Echa un vistazo a las siguientes propiedades de animación:

 -webkit-animación: 0.5s; -moz-animación: 0.5s; -o-animación: 0.5s; -ms-animación: 0.5s; animación: 0.5s; 

Esas líneas de código se pueden reescribir con una sola línea de mezcla de Sass como:

 @incluir animación (.5s); 

Hay alrededor de 19 mixins principales disponible. Para ver la lista completa, diríjase a la categoría Sass en el MEZCLAS lengüeta.

2. Flujo de texto

Mientras que otras estructuras de frontend utilizan texto fijo, Materialise implementa texto verdaderamente sensible. El tamaño del texto y la altura de la línea también se escalan de forma receptiva para mantener la legibilidad. Cuando se trata de pantallas más pequeñas, la altura de la línea se escala más grande.

Para usar Flow Text, simplemente puede agregar el texto de flujo clase en el texto deseado. Por ejemplo:

 
Este es el texto de flujo.
 

Echa un vistazo a la demostración aquí en la sección de texto de flujo.

3. Efecto de ondulación con ondas.

Material Design también viene con comentarios interactivos, un ejemplo notable es el efecto dominó. En Materializar, este efecto se llama. Olas. Básicamente, cuando los usuarios hacen clic o tocan / tocan un botón, una tarjeta o cualquier otro elemento, aparece el efecto. Las ondas se pueden crear fácilmente agregando efecto de ondas clase en sus elementos.

Este fragmento te da el efecto de ondas..

 Enviar 

Las ondas son grises por defecto. Pero en una situación en la que tenga un fondo de color oscuro, es posible que desee cambiar el color. Para agregar un color diferente, solo agrega ondas- (color) al elemento. Reemplace el "(color)" con un nombre de un color.

 Enviar 

Puedes elegir entre 7 colores: Luz, rojo, amarillo, naranja, púrpura, verde y verde azulado.. Siempre puede crear o personalizar sus propios colores si esos colores no se ajustan a sus necesidades.

4. Sombra

Para proporcionar relaciones entre los elementos, Material Design recomienda utilizar la elevación en las superficies. Materializar cumple este principio con su z-profundidad- (número) clase. Puede determinar la profundidad de la sombra cambiando el (número) de 1 a 5:

 
 
Profundidad de la sombra 3
  
 

Todas las profundidades de sombra se demuestran con la imagen de abajo..

5. Botones e iconos

En Material Design hay tres tipos principales de botones: botón levantado, fab (botón de acción flotante) y botón plano.

(1) Botón elevado

El botón levantado es el botón por defecto. Para crear este botón, simplemente añada un btn Clase a tus elementos. Si quieres darle el efecto de onda al hacer clic o presionar, sigue con esto:

 Botón 

Alternativamente, también puede darle al botón un icono a la izquierda o la derecha del texto. Para el ícono, necesitarás agregar personalización. etiqueta con el icono de nombre de la clase y la posición. Por ejemplo:

 Descargar 

En el fragmento anterior utilizamos mdi-file-file-download Clase para el icono de descarga. Hay alrededor de 740 iconos diferentes puedes usar. Para verlos, diríjase a la página de Sass en la pestaña Iconos.

(2) Botón flotante

Se puede crear un botón flotante añadiendo flotante clase y su icono deseado. Por ejemplo:

En Diseño de materiales, el botón plano se usa a menudo dentro del cuadro de diálogo. Para crearlo, simplemente añada btn-flat a tu elemento como tal:

 Disminución 

Además, los botones se pueden desactivar con la discapacitado clase y hecho más grande usando btn grande clase.

6. rejilla

Materializar utiliza un estándar. Cuadrícula de respuesta de 12 columnas sistema. La capacidad de respuesta se divide en tres partes: pequeño (s) para móvil, medio (m) para tableta y grande (l) para escritorio.

Para crear columnas, use s, mo l para indicar el tamaño, seguido del número de cuadrícula. Por ejemplo, cuando desea crear un diseño de tamaño medio para un dispositivo móvil, debe incluir un s6 clase en su diseño. s6 representa pequeño-6 lo que significa 6 columna en pequeño dispositivo.

También debe incluir un columna clase en el diseño que creas y lo pones dentro de un elemento que tiene la fila clase. Esto es para que el diseño pueda ser colocado en columnas correctamente. Aquí hay un ejemplo:

 
 
Tengo 12 columnas o ancho completo aquí
 
4 columnas (un tercio) aquí
 
4 columnas (un tercio) aquí
 
4 columnas (un tercio) aquí
 
 

Aquí están los resultados:

Por defecto, col s12 es de tamaño fijo y optimizado para todos los tamaños de pantalla, básicamente lo mismo que col s12 m12 l12. Pero si desea especificar el tamaño de las columnas para diferentes dispositivos. Todo lo que necesitas hacer es listar los tamaños adicionales así:

 
 
Mi ancho siempre tiene 12 columnas por todas partes.
 
Tengo 12 columnas en el móvil, 6 en la tableta y 9 en el escritorio
 
 

Esto es lo que parece:

Estas son solo algunas de las características de Materialise. Para obtener más información sobre sus otras funciones, diríjase a la página de documentación.