Materialize Css

¿QUÉ ES MATERIALIZE CSS?Al igual que Foundation o Bootstrap, Materialize CSS es un framework para el desarrollo frontend responsivo que nos proporciona una serie de componentes CSS y ficheros JavaScript para trabajar. Menús, headers, botones, iconos, etc, así como una retícula o rejilla para maquetar y construir nuestra página web o aplicación. Vamos a ver estos componentes uno a uno. ESTRUCTURA DEL PROYECTO MATERIALIZE CSS Descárgate Materialize directamente desde su página y descomprime los archivos, o si tienes instalado NodeJS bájatelo escribiendo npm install materialize-css en consola. En cualquiera de los casos, solo usaremos los ficheros minificados CSS y JavaScript: materialize.min.css y materialize.min.js respectivamente. También usaremos las fuentes por defecto de materialize y sus iconos. Crea una carpeta y llámala materialize-css o como gustes, y dentro de esta crea un index.html y una carpeta /img. Finalmente la estructura de nuestro proyecto + el CSS y JS de Materialize quedaría así: 1 materialize-css/ 2 |--css/ 3 | |--materialize.min.css 4 | |--custom.css 5 | 6 |--img/ 7 | 8 |--fonts/ 9 | |--material-design-icons 10 | |--roboto 11 | 12 |--js/ 13 | |--materialize.min.js 14 | 15 |--index.html Abrimos nuestro fichero index.html y cargamos el css y el js de materialize, también debemos cargar jQuery ya que materialize funciona con él. Cárgalo antes que materialize.min.js y coloca ambos ficheros JavaScript justo antes del cierre de la etiqueta </body> para optimizar los tiempos de carga: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Materialize CSS Tutorial</title> 5 <meta charset="UTF-8"> Le decimos al navegador que nuestra web esta optimizada para moviles --> <meta name="viewport" content="width=device-width. una para el color y otra para la saturación. si ya vamos a mostrarle todo adaptado a su pantalla.js"></script> </body> </html> La etiqueta <meta name="viewport"> definimos el ancho y la escala del área usada por el navegador para mostrar el contenido.com/jquery- 19 2. <!-.min. aclarándolo u oscureciéndolo.lighten o .js"></script> 20 <script type="text/javascript" src="js/materialize. Debajo del css de materialize añadimos nuestro propio custom. Un color muy saturado se verá puro y rico: GRID O CUADRÍCULA En MaterializeCSS se usa el sistema estándar de cuadrículas de 12 columnas. manipulando dos clases.0. ¿para qué?.jquery.min. user-scalable=no"/> 7 8 <!-. Tenemos una clase .css" 10 media="screen.css" /> 12 </head> 13 14 15 <body> 16 17 <!-. sencilla y elegante. La segunda clase puede ser .0.Cargamos jQuery y materialize js --> 18 <script type="text/javascript" src="https://code.projection"/> 11 <link type="text/css" rel="stylesheet" href="css/custom. maximum- 6 scale=1. initial-scale=1. ¡Vamos a ver lo que nos brinda materialize CSS antes de meternos con nuestro portfolio! COMPONENTES DESTACADOS USO DEL COLOR Disponemos de una paleta de colores predefinidos de acuerdo con Material Design que dan estilos al texto y al fondo.min.Cargamos el CSS --> 9 <link type="text/css" rel="stylesheet" href="css/materialize.darken y con ella sacamos esa intensidad del color. envolviendo a las filas (row) que a su vez contienen las columnas. Las cuadrículas te ayudan a maquetar y diseñar las páginas de tus webs o aplicación de forma ordenada. La clase container se establece en un ~ 70% del ancho de la ventana.1.css aparte para no tocar el de materialize. Y además evitamos que el usuario haga zoom en el móvil con el dedo.1.container que no necesariamente forma parte de la cuadrícula pero que conviene usarse para disponer el contenido de forma centrada. . z-depth-1. L:3</div> 6 <div class="teal lighten-2 col s12 m2 l3">Columna (4)-> S:12. Observa este ejemplo: 1 <div class="container"> 2 <div class="row"> 3 <div class="teal lighten-5 col s12 m6 l3">Columna (1)-> S:12. medianas (medium) o grandes (large).col. L:3</div> 7 </div> 8 </div> Todo consiste en ir jugando con la retícula de 12 columnas. ahora dispongo de 4 bloques div. AÑADIENDO PROFUNDIDAD CON SOMBRAS En material design damos profundidad a los elementos en el eje Z usando sombras. M:2.m o . Esto se logra añadiendo la clase .s.Después como he mencionado antes. es decir. ayudando al usuario a percibir que elemento de la página está por encima de los otros. maquetamos filas con la clase . ocuparán toda la retícula: Ahora verás mi ejemplo en el formato de pantallas mediano (m6 y tres m2). M:2.row y dentro de las filas situamos las columnas usando la clase . Si empiezas a reducir la ventana de tu navegador hasta lo que podría ser la pantalla de un móvil. y ya en tamaño pequeño decido mostrar los 4 divs a 12 columnas. ocupando así el container completo. . L:3</div> 5 <div class="teal lighten-3 col s12 m2 l3">Columna (3)-> S:12. observarás como cambia el tamaño de los divs y se ponen en s12. L:3</div> 4 <div class="teal lighten-4 col s12 m2 l3">Columna (2)-> S:12.l para las pantallas pequeñas (small). así que le digo que en pantallas grandes los muestre todos a 3 columnas (l3). que pueden definirse como . disponible hasta en 5 niveles: 1 <div class="col s12 m2"> 2 <p class="z-depth-1 shadow-demo">z-depth-1</p> 3 </div> 4 <div class="col s12 m2"> 5 <p class="z-depth-2 shadow-demo">z-depth-2</p> 6 </div> 7 <div class="col s12 m2"> 8 <p class="z-depth-3 shadow-demo">z-depth-3</p> 9 </div> 10 <div class="col s12 m2"> 11 <p class="z-depth-4 shadow-demo">z-depth-4</p> 12 </div> 13 <div class="col s12 m2 l2"> 14 <p class="z-depth-5 shadow-demo">z-depth-5</p> 15 </div> BOTONES / BUTTONS Hay tres tipos de botones descritos en Material Design: . ya que el frame de CodePen está contenido en el espacio de mi blog. en los tamaños medianos me encapricho en repartirle 6 columnas al primero (m6) y dos columnas a los tres div restantes (m2). M:2. M:6. .tiny. <a class="waves-effect waves-light btn">Raised Button</a> 1 <a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi-content- 2 add"></i></a> 3 <a class="waves-effect waves-teal teal white-text btn-flat">Flat Button</a> SIDENAV / MENÚ LATERAL Menú lateral desplegable. Añadiendo la clase . Para usarlos coloca el nombre del icono dentro del class de una tag <i>: <i class="large mdi-action-grade"></i>. Lo que hace es centrar y ampliar la imagen en nuestra pantalla de una forma elegante que no inquieta al usuario con una brusca animación.input-field animamos el <label>: ICONOS Materialize incluye 740 de Material Design. Flat Buttons (botones planos). 3. Raised button (botón en relieve).materialboxed a una etiqueta <img> creas el efecto: TABS / PESTAÑAS . 2.small. cortesía de papi Google. FORMULARIOS Los formularios con material design gozan de transiciones muy amigables para el usuario. que es un botón estándar que sugiere acciones y trata de dar profundidad a una página en su mayoría plana (flat).large. como las ventanas modales. Floating button (botón circular flotante). . Con solo hacer scroll. MATERIAL BOX Material Box es una implementación del plugin Lightbox. para que cuando el usuario haga click se amplíe el tamaño de una imagen.1. Con solo añadir la clase . usado para funciones muy importantes y situado jerárquicamente por encima de los otros. Puedes manipular el tamaño de los iconos cambiando el font-size o usando las clases predefinidas . hacer click de nuevo o pulsar ESC el usuario sale del zoom de la imagen.medium o . que se usan dentro de elementos que ya tienen profundidad. Si ya tienes experiencia con las tabs sabrás que son una lista desordenada donde cada <li> tiene un enlace <a> con la referencia apuntando a un id <a href="#tab1">.svg" alt="Retratos Pixelart" class="logo responsive- 17 img"> 18 <h1 class="white-text">Retratos e ilustraciones con <strong>pixelart</strong></h1> 19 20 21 22 <a href="#portfolio" class="btn-floating btn-large waves-effect waves-light teal lighten- 23 1"> 24 <i class="mdi-navigation-expand-more"></i> 25 </a> </header> . CABECERA / HEADER Creamos el menú y una pequeña introducción sobre de qué va nuestro portfolio (situar el h1 para posicionamiento y demás). ese id será el de un contenedor <div> que mostraremos haciéndolo visible cuando pulsamos en su correspondiente tab: CREANDO NUESTRO PORTFOLIO CON MATERIALIZE CSS Vamos a coger algunos de los elementos explicados más arriba y crear un portfolio one page. Dejamos el correspondiente botón del menú desplegable y hacemos que active el menú pasándole al atributo personalizado de Materialize llamado data-activates. Aquí tienes la demo completa de lo que vamos a hacer. el id del menú que vamos a desplegar en dispositivos tablets y móviles: <header class="orange lighten-2 z-depth-1"> <nav class="top-nav orange lighten-2"> 1 <div class="nav-wrapper"> 2 <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi- 3 navigation-menu"></i></a> 4 <ul class="side-nav fixed grey darken-4" id="mobile-demo"> 5 <li><a href="#portfolio" class="waves-effect">Portfolio</a> 6 </li> 7 <li><a href="#sobremi" class="waves-effect">Sobre mí</a> 8 </li> 9 <li><a href="#habilidades" class="waves-effect">Habilidades</a> 10 </li> 11 <li><a href="#contacto" class="waves-effect">Contacto</a> 12 </li> 13 </ul> 14 </div> 15 </nav> 16 <img src="img/retratos-pixelart. Jugamos con las clases de Materialize dando el color de fondo y su matiz correspondiente. Puedes bajarte el proyecto completo desde Github clonándolo o con descarga directa pulsando en Download ZIP. en el ejemplo he usado la temática de un portfolio orientado a un artista de pixel art. js"></script> 4 <script> 5 $(document). colocamos los scripts necesarios para materialize: jQuery en este caso y materialize.min.sideNav(). En los estilos custom. una etiqueta precisa de HTML5 que describe el contenido principal de la página. 9 10 11 12 }).jpg" alt=""></div> 11 <div><img class="materialboxed" src="img/sample. En la sección portfolio mostramos nuestros proyectos realizados o trabajos. De paso hacemos la llamada de la función sideNav() de Materialize CSS. Es un efecto en el background de la sección que mueve este fondo a una velocidad diferente que el contenido de frente cuando hacemos scroll. usaremos material boxes añadiendo la clase .css que son nuestros estilos personalizados. </script> SECCIÓN PORTFOLIO Habrás observado que las secciones Porfolio.jpg" alt=""></div> 12 <div><img class="materialboxed" src="img/sample.jpg" alt=""></div> 8 <div><img class="materialboxed" src="img/sample.En el código.jpg" alt=""></div> 13 </div> 14 </div> 15 </div> 16 </section> SECCIÓN “SOBRE MÍ” Para darle un toque dinámico al background de esta sección usamos un Parallax. etc están contenidas en la etiqueta <main></main>.ready(function () { 6 7 //Menú responsivo 8 $(".button-collapse").js.jpg" alt=""></div> 9 <div><img class="materialboxed" src="img/sample.1. Sobre mí.jquery.com/jquery- 2 2. Sencillamente añadimos este código nada más empezar el contenido de nuestro section#sobremi: .js"></script> 3 <script type="text/javascript" src="js/materialize.1. que vuelve nuestro menú responsivo: <!-.materialboxed a cada etiqueta <img>.Cargamos jQuery y materialize js --> 1 <script type="text/javascript" src="https://code. justo antes de cerrar la etiqueta </body>.jpg" alt=""></div> 10 <div><img class="materialboxed" src="img/sample. he optado por mostrar las imágenes a tres columnas y flotando: 1 <section id="portfolio" class="portfolio teal lighten-3"> 2 <div class="container"> 3 <h4 class="teal-text">portfolio</h4> 4 <hr class="teal-text"> 5 <div class="row"> 6 <div class="col s12 m12 l12 portfolio-holder"> 7 <div><img class="materialboxed" src="img/sample.min. 8-Bits <i 12 class="mdi-navigation-more-vert right"></i></span> 13 <p> 14 <a href="#">twitter</a> 15 <a href="#">facebook</a> 16 </p> 17 </div> 18 <div class="card-reveal"> 19 <span class="card-title grey-text text-darken-4">Card Title <i class="mdi- 20 navigation-close right"></i></span> 21 <p> 22 Lorem ipsum dolor sit amet. que básicamente es una forma recomendada e interactiva de mostrar contenido.activator a un elemento lo convertimos en un botón que despliega u oculta esta tarjeta.jpg" alt=""> 3 </div> Y vamos a los scripts que tenemos abajo y llamamos a la función de Materialize que lo activa: 1 //Parallax 2 $('. Bloque de código completo de esta sección: <section id="sobremi" class="sobremi parallax-container"> <div class="parallax"><img src="img/parallax. Vamos a usar el componente Card.card-reveal nos muestra el contenido de la tarjeta y añadiendo la clase .jpg" alt=""> </div> 1 <div class="container"> 2 <h4 class="deep-orange-text text-darken-4">sobre mí</h4> 3 <hr class="deep-orange-text text-darken-4"> 4 <div class="row"> 5 <div class="col s12 center"> 6 <div class="card small blue-grey darken-1"> 7 <div class="card-image waves-effect waves-block waves-light"> 8 <img class="activator" src="img/sobremi. sed do eiusmod 23 tempor incididunt ut labore et dolore magna aliqua. consectetur adipiscing elit. para pantallas grandes lo mostramos a 3 columnas y en móviles lo ponemos a 12 columnas: 1 <section id="habilidades" class="habilidades pink lighten-3"> .jpg"> 9 </div> 10 <div class="card-content"> 11 <span class="card-title activator grey-text text-darken-4">Mr. 26 </p> 27 </div> 28 </div> 29 </div> 30 </div> </div> </section> HABILIDADES Aprovechamos los iconos que tiene Materialize y los sacamos a relucir un poco en esta sección.parallax'). 24 consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna 25 aliqua. En concreto la clase .parallax(). tarjeta. Lorem ipsum dolor sit amet.1 <div class="parallax"> 2 <img src="img/parallax. 25 </p> 26 </div> 27 </div> 28 </li> 29 <li> 30 <div class="col s12 m4"> 31 <div class="center"> 32 <i class="pink-text mdi-hardware-gamepad"></i> 33 <h5>Dolor</h5> 34 <p class="light center"> 35 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 36 dolore eu fugiat nulla pariatur. sed do 12 eiusmod tempor incididunt ut labore et dolore magna aliqua 13 </p> 14 </div> 15 </div> 16 </li> 17 <li> 18 <div class="col s12 m4"> 19 <div class="center"> 20 <i class="pink-text mdi-action-settings-ethernet"></i> 21 <h5>Ipsum</h5> 22 <p class="light center"> 23 Ut enim ad minim veniam. consectetur adipiscing elit. quis nostrud exercitation ullamco laboris 24 nisi ut aliquip ex ea commodo consequat. 37 </p> 38 </div> 39 </div> 40 </li> 41 </ul> 42 </div> 43 </div> </section> CONTACTO Código muy sencillo que nos deja un formulario de contacto visualmente atractivo usando las clases para formularios de Materialize: 1 <section id="contacto" class="contacto"> 2 <div class="container"> 3 <h4>contacto</h4> 4 <hr> 5 <div class="row"> 6 <div class="col s12 m7"> 7 <div class="row"> 8 <form class="col s12"> 9 <div class="row"> . <div class="container"> <h4 class="pink-text">habilidades</h4> 2 <hr class="pink-text"> 3 <div class="row"> 4 <ul> 5 <li> 6 <div class="col s12 m4"> 7 <div class="center"> 8 <i class="pink-text mdi-image-flash-on"></i> 9 <h5>Lorem</h5> 10 <p class="light center"> 11 Lorem ipsum dolor sit amet. <div class="input-field col s6"> 10 <i class="mdi-action-account-circle prefix"></i> 11 <input id="first_name" type="text" class="validate"> 12 <label for="first_name">Nombre</label> 13 </div> 14 <div class="input-field col s6"> 15 <input id="last_name" type="text" class="validate"> 16 <label for="last_name">Apellido</label> 17 </div> 18 </div> 19 <div class="row"> 20 <div class="input-field col s12"> 21 <i class="mdi-communication-email prefix"></i> 22 <input id="email" type="email" class="validate"> 23 <label for="email">E-Mail</label> 24 </div> 25 </div> 26 <div class="row"> 27 <div class="input-field col s12"> 28 <i class="mdi-communication-comment prefix"></i> 29 <textarea id="mensaje" class="materialize-textarea" 30 required></textarea> 31 <label for="mensaje">Mensaje</label> 32 </div> 33 </div> 34 35 <button class="btn waves-effect waves-light" type="submit" 36 name="action">Enviar 37 <i class="mdi-content-send right"></i> 38 </button> 39 </form> 40 </div> 41 </div> 42 <div class="col s12 m4 offset-m1 contact-holder"> 43 <h6 class="mdi-action-home">Dirección</h6> 44 <p>C/Megadrive.com/">Web</a> 6 </div> 7 </div> 8 </footer> . con las clases de Materialize CSS creamos un footer en un momento: <footer class="page-footer orange lighten-2"> 1 <div class="footer-copyright"> 2 <div class="container"> 3 © 2015 Funny Frontend 4 <a class="grey-text text-lighten-4 right" 5 href="http://funnyfrontend.com</p> 49 </div> 50 </div> 51 </div> </section> FOOTER En él mostramos el copyright y algún que otro enlace. Nº7</p> 45 <h6 class="mdi-hardware-phone-android">Móvil</h6> 46 <p>999 999 999</p> 47 <h6 class="mdi-action-open-in-browser">Web</h6> 48 <p>funnyfrontend. portfolio-holder img'. CONCLUSIONES FINALES Hemos visto algunas de las características y componentes de este Material Design framework. Si estás pensando en crear una web con este estilo con el framework frontend Materialize CSS tienes más que suficiente. 9 callback: 'showStaggeredList(". . ya que hay muy pocas webs que estén usando este estilo por ahora. Por último. tu diseño destacará sin duda sobre el resto.habilidades li'. cuando nos desplazamos por el menú lateral los saltos de los href del menú a nuestras section#id es muy brusco. ambas animaciones de Materialize CSS: 1 //Animaciones 2 var options = [{ 3 selector: '. 4 offset: 0. { 7 selector: '. por ejemplo en PhoneGap.scrollSpy(). 5 callback: 'fadeInImage(". que cada vez está cobrando más fuerza sobre el Flat Design. 8 offset: 0. También hemos animado el portfolio con el fadeInImage y las habilidades con el showStaggeredList. llamaremos también a la función ScrollSpy para solucionar este detalle: 1 //Scroll 2 $('section').portfolio-holder img")' 6 }. el offset (cantidad de píxeles del scroll) y callback que ejecuta una función cuando el usuario llega al punto especificado en el offset haciendo scroll.habilidades ul")' 10 }]. 11 scrollFire(options). También se puede usar este framework para crear aplicaciones móviles híbridas. en este mismo sitio usaremos el plugin que incorpora Materialize. Simplemente pasamos como parámetros el selector del bloque div que queremos animar.ANIMACIONES EN LA PÁGINA Recuerda que abajo situamos ciertos scrips como el de Parallax. ScrollFire que realiza animaciones según vamos haciendo scroll en la web.

Description

Comments