Estoy haciendo mis pinitos con Materialize CSS, framework desarrollado por Google que implementa Material (directrices de diseño UI) y que es una clara alternativa a Bootstrap. He querido hacer una instalación limpia, sin añadir módulos a través del npm, así que me he bajado la última versión (1.0.0) del paquete Materialize. Es un simple zip con los CSS y los JS para desarrollo y producción (*.min).
Aquí tienes la URL de la web donde me lo descargué:
https://materializecss.com/getting-started.html
La manera en la que he metido este framework en mi proyecto ha sido muy sencillo. La estructura de un proyecto Angular es la siguiente:
- Proyecto
- e2e
- node_modules
- src
- app
- assets
- enviroments
Lo que he hecho ha sido lo siguiente:
- Meter dentro de /assets/ la carpeta materialize/ del zip, descomprimida, lógicamente.
- Editar el fichero angular.json que está en Proyecto/ y añadir esto en la sección CSS (styles) y JS (scripts).
"styles": [
"src/assets/materialize/css/materialize.css",
"src/styles.css"
],
"scripts": [
"src/assets/materialize/js/materialize.js"
]
Con esto ya estaría todo. Muy limpio, ¿verdad?. Lo que sí que hay que tener en cuenta es poner bien la ruta donde se encuentra la hoja de estilos y la librería Javascript.
Ya solo queda editar los correspondientes .html y añadir los elementos html con los estilos acorde a la hoja de estilos de Material.