Descripción: Al igual que Foundation o Bootstrap, Materialize CSS es un framework para el desarrollo frontend responsivo que nos proporciona una serie...
¿QUÉ ES MATERIALIZE CSS? Al igual que Found Foundation ation o Bootstrap, Materialize CSS es un framework ara el !esarrollo fronten! resonsi"o que nos proporciona propor ciona una serie de componentes CSS y fcheros JavaScript para trabajar. en!s, headers, botones, iconos, etc, as" como una ret"cula o rejilla para maquetar y construir nuestra p#gina $eb o aplicaci%n. &amos a ver estos componentes uno a uno.
ESTRUCTURA #EL $R%&ECT% MATERIALIZE CSS 'esc#rgate ateriali(e directamente desde su p#gina p#gina y y descomprime los archivos, o si tienes instalado )odeJS b#jatelo escribiendo npm install materialize-css en consola. *n cualquiera de los l os casos, solo usaremos los fcheros minifcados CSS y JavaScript+ materialize.min.css y materialize.min.js respectivamente. ambi-n ambi-n usaremos usaremos las uentes por deecto de materiali(e y sus iconos. Crea una carpeta y ll#mala materialize'(ss o como gustes, y dentro de esta crea un in!e)*+tml y una carpeta /img. Finalmente la estructura de nuestro proyecto proyecto 0 el CSS y JS de ateriali(e quedar"a as"+ 1 materiali(e;css/ 2 <;;css/ 3 < <;;materiali(e.min.css 4 < <;;custom.css 5 < 6 <;;img/ 7 < 8 <;;onts/ 9 < <;;material;design;icons 1: < <;;roboto 11 < 12 <;;js/ 13 < <;;materiali(e.min.js 14 < 15 <;;inde=.html
Abrimos nuestro fchero fchero inde=.html y cargamos el css y el js de materiali(e, tambi-n debemos cargar j>uery ya que materiali(e unciona con -l. C#rgalo antes que materiali(e.min.js y coloca ambos fcheros JavaScript justo antes del cierre de la etiqueta ?/body@ para optimi(ar los tiempos de carga+ 1 2 3 4 5
?;; He decimos al navegador que nuestra $eb esta optimi(ada para moviles ;;@ ?meta nameEvie$port contentE$idthEdevice;$idth, initial;scaleE1.:, ma=imum; 6 scaleE1.:, user;scalableEno/@ 7 8 ?;; Cargamos el CSS ;;@ 9 ?linI typeEte=t/css relEstylesheet hreEcss/materiali(e.min.css 1: mediaEscreen,projection/@ 11 ?linI typeEte=t/css relEstylesheet hreEcss/custom.css /@ 12 ?/head@ 13 14 15 ?body@ 16 17 ?;; Cargamos j>uery y materiali(e js ;;@ 18 ?script typeEte=t/javascript srcEhttps+//code.jquery.com/jquery; 19 2.1.1.min.js@?/script@ 2: ?script typeEte=t/javascript srcEjs/materiali(e.min.js@?/script@ ?/body@ ?/html@
Ha etiqueta <meta name="viewport"> defnimos el ancho y la escala del #rea usada por el navegador para mostrar el contenido. adem#s evitamos que el usuario haga (oom en el m%vil con el dedo, para qu-K, si ya vamos a mostrarle todo adaptado a su pantalla. 'ebajo del css de materiali(e aLadimos nuestro propio custom.css aparte para no tocar el de materiali(e. M&amos a ver lo que nos brinda materiali(e CSS antes de meternos con nuestro portolio
C%M$%,E,TES #ESTACA#%S US% #EL C%L%R 'isponemos de una paleta de colores predefnidos de acuerdo con aterial 'esign que dan estilos al te=to y al ondo, manipulando dos clases, una para el color y otra para la saturaci%n. Ha segunda clase puede ser .lighten o .darken y con ella sacamos esa intensidad del color, aclar#ndolo u oscureci-ndolo. Gn color muy saturado se ver# puro y rico+
-RI# % CUA#R.CULA *n ateriali(eCSS se usa el sistema est#ndar de cuadr"culas de 12 columnas. Has cuadr"culas te ayudan a maquetar y diseLar las p#ginas de tus $ebs o aplicaci%n de orma ordenada, sencilla y elegante. enemos una clase .container que no necesariamente orma parte de la cuadr"cula pero que conviene usarse para disponer el contenido de orma centrada, envolviendo a las flas Nro$O que a su ve( contienen las columnas. Ha clase container se establece en un P 7:Q del ancho de la ventana.
'espu-s como he mencionado antes, maquetamos flas con la clase .row y dentro de las flas situamos las columnas usando la clase .col, que pueden defnirse como .s, .m o .l para las pantallas pequeLas NsmallO, medianas NmediumO o grandes NlargeO. bserva este ejemplo+ 1 ?div classEcontainer@ 2 ?div classEro$@ 3 ?div classEteal lighten;5 col s12 m6 l3@ Columna N1O;@ S+12, +6, H+3?/div@ 4 ?div classEteal lighten;4 col s12 m2 l3@ Columna N2O;@ S+12, +2, H+3?/div@ 5 ?div classEteal lighten;3 col s12 m2 l3@ Columna N3O;@ S+12, +2, H+3?/div@ 6 ?div classEteal lighten;2 col s12 m2 l3@ Columna N4O;@ S+12, +2, H+3?/div@ 7 ?/div@ 8 ?/div@
odo consiste en ir jugando con la ret"cula de 12 columnas, ahora dispongo de 4 bloques div, as" que le digo que en pantallas grandes los muestre todos a 3 columnas Nl3O, en los tamaLos medianos me encapricho en repartirle 6 columnas al primero Nm6O y dos columnas a los tres div restantes Nm2O, y ya en tamaLo pequeLo decido mostrar los 4 divs a 12 columnas, es decir, ocupar#n toda la ret"cula+ Ahora ver#s mi ejemplo en el ormato de pantallas mediano Nm6 y tres m2O, ya que el rame de CodeDen est# contenido en el espacio de mi blog. Si empie(as a reducir la ventana de tu navegador hasta lo que podr"a ser la pantalla de un m%vil, observar#s como cambia el tamaLo de los divs y se ponen en s12, ocupando as" el container completo.
A/A#IE,#% $R%0U,#I#A# C%, S%M1RAS *n material design damos proundidad a los elementos en el eje R usando sombras, ayudando al usuario a percibir que elemento de la p#gina est# por encima de los otros. *sto se logra aLadiendo la clase .z-depth-1, disponible hasta en 5 niveles+ 1 ?div classEcol s12 m2@ 2 ?p classE(;depth;1 shado$;demo@(;depth;1?/p@ 3 ?/div@ 4 ?div classEcol s12 m2@ 5 ?p classE(;depth;2 shado$;demo@(;depth;2?/p@ 6 ?/div@ 7 ?div classEcol s12 m2@ 8 ?p classE(;depth;3 shado$;demo@(;depth;3?/p@ 9 ?/div@ 1: ?div classEcol s12 m2@ 11 ?p classE(;depth;4 shado$;demo@(;depth;4?/p@ 12 ?/div@ 13 ?div classEcol s12 m2 l2@ 14 ?p classE(;depth;5 shado$;demo@(;depth;5?/p@ 15 ?/div@
1%T%,ES 2 1UTT%,S ay tres tipos de botones descritos en aterial 'esign+
3* Raise! 4utton Nbot%n en relieveO, que es un bot%n est#ndar que sugiere acciones y trata de dar proundidad a una p#gina en su mayor"a plana NTatO. 5* 0loatin6 4utton Nbot%n circular TotanteO, usado para unciones muy importantes y situado jer#rquicamente por encima de los otros. 7* 0lat 1uttons Nbotones planosO, que se usan dentro de elementos que ya tienen proundidad, como las ventanas modales. ?a classE$aves;eUect $aves;light btn@Vaised Button?/a@ 1 ?a classEbtn;Toating btn;large $aves;eUect $aves;light red@?i classEmdi;content; 2 add@?/i@?/a@ 3 ?a classE$aves;eUect $aves;teal teal $hite;te=t btn;Tat@Flat Button?/a@
SI#E,A8 2 ME,9 LATERAL en! lateral desplegable.
0%RMULARI%S Hos ormularios con material design go(an de transiciones muy amigables para el usuario. ALadiendo la clase .input-field animamos el
