ADVERTENCIA
El presente proyecto dejará de tener mantenimiento a partir de diciembre del 2022 para después ser archivado y eliminado. Esto en concordancia con los lineamientos de SALSA y de la Estrategia Digital Nacional. Este proyecto se encontrará ahora dentro del grupo de repositorios oficiales de SALSA. Se recomienda a la persona usuaria hacer los cambios pertinentes para usar el proyecto refactorizado y en su última versión, que se puede encontrar en aquí.
Biblioteca de estilos en scss con sass para el Sitema de Diseño basado en los requerimientos de los Ecosistemas Nacionales Informáticos del Conacyt. Desarrollado por la Dirección de análisis de datos y sistemas de información geográfica.
Esta biblioteca utiliza las tipografias de Montserrat y Atkinson Hyperlegible de Google fonts y una tipografía de íconos publicada a través de Fontastic.
Agrega las siguientes lineas en el <head> </head> de tu archivo de html, que en orden de aparición son primero los links de las tipografías de Google Fonts, seguido de la tipografía para los íconos (aun en desarrollo) y al final la liga de la hoja de estilos (también en desarrollo)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://file.myfontastic.com/JS4TgqY9L4s8WsKQDkt5qA/icons.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/conacyt-dai/dadsig-css/dist/eni.min.css" rel="stylesheet">-
Instala la biblioteca
npm i github:conacyt-dai/dadsig-css
-
Importala la libreria
@import 'dadsig-css/src/eni.scss';
2.2 Opcional* Se pueden importar las variables para utilizar las mismas referencias que la biblioteca en los estilos particulares de cada proyecto
@import 'dadsig-css/src/_variables.scss';
-
Prerequisitos:
Familiaridad con la terminal o línea de comandos
Tener Node.js instalado
-
Clona el repositorio con la siguiente linea en la terminal
git clone git@github.com:conacyt-dai/dadsig-css.git
Si por alguna razón no pudiste clonar, puedes leer la documentación de Githug acerca de cómo clonar un repositorio
-
Instala las dependencias del proyecto
npm install
Y del proyecto de la documencación
npm run install:docs
-
Levantar el entorno local
npm start
Ese comando debe compilar y dejar vigilando los cambios de la carpeta
src/que contiene los estilos en scss, levantar un entorno local de la carpeta de documentación del proyectodocs/ -
Abre tu navegador con la siguiente dirección
http://localhost:3000
Para obtener el archivo de distribución actualizado, compila el proyecto con
npm run buildEl buld actualiza los archivos de la carpeta de distribución dist que se utilizan para actualizar la CDN y que puedes utilizar como archivos locales copiandolos y pegandolos en tus proyectos.