Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Que es Materialize CSS y tus Primeros pasos con esta Herramienta

Existen muchos Frameworks para acelerar el trabajo de los desarrolladores Frontend, entre los mejores se encuentran Materialize CSS y Bootstrap los cuales mantienen una esencia moderna manteniéndose activas y soportadas por la comunidad de desarrolladores que lo componen, en este artículo vamos a hablar sobre Materialize CSS y puedas dar tus primeros pasos con este gran Framework.

imagen: materializecss.com

Que es Materialize CSS ?

Es un Framework para desarrolladores Frontend, que agiliza el trabajo para maquetar y crear vistas en un proyecto, este Framework trabaja bajo el concepto y diseño de Material Design de Google. Este Framework nos ofrece una set de utilidades y componentes listos para implementarlos en nuestro proyecto, entre los elementos que nos ofrece son, cardas, menús, botones, breadcrumbs, colecciones, iconos, paginación entre otros.

 

imagen: materializecss.com

Instalar Materialize CSS

Hasta la fecha de este artículo puedes desplegar Materialize CSS de 4 maneras, las mencionamos a continuación:

Descarga Manual de los archivos CSS y JS

Puedes descargar los archivos desde este enlace y luego istanciarlos en la vista en donde vas a utilizar Materialize CSS:


Puedes colocar el archivo materialize.min.css antes de cerrar la etiqueta </head> y el archivo materialize.min.js antes de cerrar la etiqueta </body> casi al final del documento.

Descarga para SASS

Si estas trabajando o gustas trabajar con SASS puedes descargar la versión en formato .SCSS desde este enlace y luego lo si deseas lo compilas a CSS puro, te recomendamos el articulo Que es SASS y tus Primeros Pasos con esta herramienta para que aprendas a compilar de SASS a CSS. Luego lo instancias en tu vista


Vía CDN

Si no quieres descargar los archivos y necesitas usar Materialize CSS de manera rápida, puedes instanciar los archivos desde una red de distribución de contenidos CDN en donde tienen alojados los archivos para ser usados rápidamente, para esto puedes copiar y pegar en tu visa las siguiente lineas:


Puedes ver que estamos instanciando la versión 1.0.0-rc.2 pero si quieres probar otras versiones las puedes encontrar aquí.

Vía NPM

Si estas trabajando en un entorno en donde usas el gestor de paquetes de Node JS (Node Package Manager) puedes abrir tu consola de comandos y ejecutar el siguiente comando


Al ejecutar el comando anterior obtendrás los archivos CSS y JS de la última versión de Materialize CSS.

Desplegando Materialize CSS

Ahora que ya tienes descargado Materialize CSS, vamos a ver la estructura de archivos de un proyecto a continuación:


Nuestra vista va ser el archivo index.html y dentro de ella instaciaremos Materialize CSS, abrimos el archivo index.html y agregamos lo siguiente


Ahora ya podemos agregar elementos a nuestra vista dentro de la etiqueta <body> por ejemplo agregamos unos botones:


Vamos al navegador y obtendremos nuestro primeros botones o elementos de Materialize CSS

En otro Post te explicaremos más al detalle sobre todos los elementos y opciones avanzadas que puedes usar en Materialize CSS.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil