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