ATM Iris es una herramienta creada para facilitar la creación de componentes web en el front-end mediante hojas de estilo en cascada.
Al instalar este paquete en un proyecto, los desarrolladores pueden acceder fácilmente a estilos consistentes y coherentes que garantizan una apariencia uniforme para todos los sitios web.
Además de simplificar el proceso de diseño y desarrollo, ATM Iris ayuda a mantener la imagen de marca corporativa en todo momento, lo que repercute en una mejor experiencia de usuario.
Antes de instalar ATM Iris, es encesario instalar Angular Material.
ng add @angular/materialPrebuild Indigo/Pink
Typography NO
Animations YES
Después, es necesario instalar Material Icons.
npm install material-icons@latest
Instala la última versión usando:
npm i atm-iris@latest
Añade la hoja de estilo global llamada atm-styles.scss que se muestra a continuación, al fichero angular.json del siguiente modo:
"styles": [
"node_modules/atm-iris/styles/atm-styles.scss",
"src/styles.scss"
],Al instalar Angular Material o Material icons se añaden de forma automática en el index.html del proyecto varias entradas en el cabecera para poder obtener las fuentes e iconos desde el CDN del proveedor.
Además de no hacerlo de esta forma porque dependemos de otro servidor externo o es posible que el cliente tenga el acceso a internet limitado, los recursos ya se encuentran cargados en el proyecto.
Estas referencias hay que eliminarlas.
Una vez creado el proyecto, busca en tu archivo index.html y elimina los siguientes links generados de manera automática:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Para más información, visita el Storybook de Iris y... ¡averigua cómo crear y dar estilos a todos tus componentes!