Material Desing Framework

Materialize CSS , este Framework nos permitirá crear páginas web utilizando los estilos de Material Design de Google.

https://materializecss.com/

Materialize CSS es muy parecido a Bootstrap 4 o Foudation, aunque no es muy popular. Su base es el Material design que son los estilos o mas que estilos la filosofía del diseño que Google impuso. Por qué digo filosofía, porque no es solo diseño como colores, tamaños, fuentes, etc. sino es la facilidad que le brindamos al usuario para la navegación, en este caso del sitio web, en resumidas cuentas, que sea intuitiva

Con Materialize CSS podremos desarrollar menú de navegación, botones, slider, tarjetas, formularios, alertas y mas y mas. La idea es que los cabezones de Materialize ya se estresaron creando estas secciones, así que veamos como utilizarlas en nuestros proyectos web.

En todo el curso vamos abarcar la instalación de Materialize Css, los estilos, componentes, interactividad con Javascript y formularios.

Para este curso vamos a trabajar con Visual Studio Code y Firefox Quantum: Developer Edition
https://code.visualstudio.com/
https://www.mozilla.org/es-ES/firefox/developer/

Instalacion

Creamos una carpeta para el proyecto y la abrimos con Visual Studio Code.
Creamos un archivo .html que será una plantilla que usaremos en los demás archivos
Creamos una estructura básica de html5

Vamos a ver que nos pide Materialize. Tenemos dos alternativas, una es descargar los archivos de css y javascript y la otra y la recomendada es ocupar el CDN

El CDN no es mas que los estilos css alojados en un servidor externo, lo mismo que los de JavaScript. Al ser leidos de un servidor externo cargara mucho mas rápido la pagina

Copiamos el código de los archivos Css y lo pegamos en el head de nuestra pagina

Copiamos el código de los archivos de JavaScript y lo pegamos al final del body, antes de la etiqueta de cierre

Tambien copiamos los archivos de iconos que vienen de un servidor externo y lo pegamos encima de los de Css

Esta será nuestra plantilla
Podemos crear un container con un h1 para probar nuestro trabajo

Para probar, damos click al botón derecho y pulsamos a Open Whith Live Server. Que es una extensión que podemos descargar en el Visual Studio Code. Y nos abre nuestro trabajo en un servidor local Ahora vamos a cambiar el color del texto. Incorporamos una clase al h1

Hola Mundo!