Taller Práctico Materialize.CSS
@yavallejo
http://www.aprendiendoando.com/
https://github.com/aprendiendoando
MaterializeCSS
Un framework web front-end moderno y responsivo basado en Material Design
Material Design
Creado y diseñado por Google, Material Design es un lenguaje de diseño que combina los principios clásicos del diseño exitoso junto con la innovación y la tecnología.
Descargamos
Nuestro proyecto base
Configuración HTML
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>Plantillas
Css
Css - Color
Css - Grid
Css - HElpers
Css - Media
-
Imágenes
-
Videos
Css - Shadow
En material design, todo debe tener cierta profundidad en el eje z que determine que tan cerca o lejos está un elemento de una página.
Css - table
Css - Typography
La fuente estándar de Material Design es Roboto. Hemos incluído los archivos de origen en nuestro framework.
Componentes
Iconos
Componentes - Badges
Componentes - Buttons
Componentes - Cards
Componentes - Collections
Componentes - footer
Componentes - Forms
Componentes - Navbar
Componentes - Preloader
Componentes - Paginación
Javascript
Collapsible
Collapsibles son elementos de acordeón que se expanden cuando se hace clic en ellos. Estos le permiten ocultar el contenido que no es inmediatamente relevante para el usuario
Dialogs
Los diálogos son contenidos que no son visibles originalmente en una página pero que muestran información adicional si se requiere. Las transiciones deben hacer que los diálogos mostrados tengan coherencia y no molesten al usuario.
Dropdown
Añada una lista desplegable a cualquier botón. Sólo asegúrese de que el atributo data-activates coincida con el id en la etiqueta <ul>
Media
Los componentes multimedia incluyen cosas que tienen que ver con objetos multimedia de gran tamaño, como imágenes, vídeos, sonido, etc.
Modals
Use los modales para cuadros de diálogo, mensajes de confirmación y otros contenidos que puedan ser mostrados así.
Parallax
Parallax es un efecto en el contenido de fondo o imagen, en este caso, se mueve a una velocidad diferente que el contenido de frente mientras se desplaza. Echa un vistazo al demo para tener una mejor idea de ello.
Pushpin
Pushpin es nuestro plugin de posicionamiento fijo. Puede ver nuestros ejemplos en vivo: El menú de contenidos a la derecha.
ScrollFire
ScrollFire es un plugin de jQuery que ejecuta funciones de devolución de llamada dependiendo de la distancia a la página que has desplazar.
Scrollspy
Scrollspy es un plugin para jQuery que rastrea ciertos elementos y que la pantalla del usuario se centra actualmente en elemento.
SideNav
Esta es una diapositiva menú. Puede agregar un menú desplegable a tu barra lateral utilizando nuestro componente plegable.
Tabs
Las pestañas son una estructura que consiste en una lista desordenada de fichas que tienen # correspondientes a identificadores de ficha. Luego, cuando se hace clic en cada ficha, sólo el contenedor con la correspondiente Identificación de pestaña se hará visible.
Transitions
Hemos hecho algunas funciones de animación personalizada que hará la transición su contenido. Se recomienda usar esto con nuestro ScrollFire Plugin para hacer su transición contenido en como te pergamino.
Waves
Waves es una biblioteca externa que hemos incluido en Materialize que permite crear el efecto de tinta esbozado en Material Design
Mobile
Materialize.Css
By Yan Vallejo
Materialize.Css
Esta es la presentación del curso donde hablaremos de materialize un framework CSS el cual nos permite obtener maravillosos diseños con material design en muy poco tiempo
