Preview only show first 10 pages with watermark. For full document please download

Materialize Css

Descripción: 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. Me...

   EMBED

Share

Transcript

¿QUÉ ES MATERIALIZE CSS? Al igual que Found Foundation ation o Bootstrap, Materialize CSS es un framework ara el !esarrollo fronten! resonsi"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 deecto 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 ?'CD* html@ ?html@  ?head@  ?title@ateriali(e CSS utorial?/title@ utorial?/title@  ?meta charsetEGF;8@  ?;; He decimos al navegador que nuestra $eb esta optimi(ada para moviles ;;@  ?meta nameEvie$port contentE$idthEdevice;$idth, initial;scaleE1.:, ma=imum; 6 scaleE1.:, user;scalableEno/@ 7 8 ?;; Cargamos el CSS ;;@ 9  ?linI typeEte=t/css relEstylesheet hreEcss/materiali(e.min.css 1: mediaEscreen,projection/@ 11  ?linI typeEte=t/css relEstylesheet hreEcss/custom.css /@ 12  ?/head@ 13 14 15 ?body@ 16 17 ?;; Cargamos j>uery y materiali(e js ;;@ 18 ?script typeEte=t/javascript srcEhttps+//code.jquery.com/jquery; 19 2.1.1.min.js@?/script@ 2:  ?script typeEte=t/javascript srcEjs/materiali(e.min.js@?/script@  ?/body@ ?/html@ Ha etiqueta 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 portolio 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 classEcontainer@ 2 ?div classEro$@ 3  ?div classEteal lighten;5 col s12 m6 l3@ Columna N1O;@ S+12, +6, H+3?/div@ 4  ?div classEteal lighten;4 col s12 m2 l3@ Columna N2O;@ S+12, +2, H+3?/div@ 5  ?div classEteal lighten;3 col s12 m2 l3@ Columna N3O;@ S+12, +2, H+3?/div@ 6  ?div classEteal 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 proundidad 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 classEcol s12 m2@ 2  ?p classE(;depth;1 shado$;demo@(;depth;1?/p@ 3  ?/div@ 4  ?div classEcol s12 m2@ 5  ?p classE(;depth;2 shado$;demo@(;depth;2?/p@ 6  ?/div@ 7  ?div classEcol s12 m2@ 8  ?p classE(;depth;3 shado$;demo@(;depth;3?/p@ 9  ?/div@ 1:  ?div classEcol s12 m2@ 11  ?p classE(;depth;4 shado$;demo@(;depth;4?/p@ 12  ?/div@ 13  ?div classEcol 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 proundidad 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 proundidad, como las ventanas modales. ?a classE$aves;eUect $aves;light btn@Vaised Button?/a@ 1 ?a classEbtn;Toating btn;large $aves;eUect $aves;light red@?i classEmdi;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