{"id":26562819,"url":"https://github.com/centrogeo/sisdai-css","last_synced_at":"2025-08-05T04:16:07.268Z","repository":{"id":270648481,"uuid":"883481138","full_name":"CentroGeo/sisdai-css","owner":"CentroGeo","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-04T21:52:03.000Z","size":3925,"stargazers_count":3,"open_issues_count":5,"forks_count":1,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-08-05T00:11:51.230Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CentroGeo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-05T03:18:45.000Z","updated_at":"2025-07-21T19:00:21.000Z","dependencies_parsed_at":"2025-01-02T05:56:04.779Z","dependency_job_id":"9d0b6bc0-59f4-4995-b3db-a0f905022b2b","html_url":"https://github.com/CentroGeo/sisdai-css","commit_stats":null,"previous_names":["centrogeo/sisdai-css"],"tags_count":237,"template":false,"template_full_name":null,"purl":"pkg:github/CentroGeo/sisdai-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CentroGeo","download_url":"https://codeload.github.com/CentroGeo/sisdai-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CentroGeo%2Fsisdai-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268830409,"owners_count":24314066,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-05T02:00:12.334Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-22T15:28:52.232Z","updated_at":"2025-08-05T04:16:07.216Z","avatar_url":"https://github.com/CentroGeo.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sisdai-css\n\nEl proyecto sisdai-css es una biblioteca de estilos de Sass alineada al Sistema de Diseño y Accesibilidad para la \nInvestigación ([Sisdai](https://sisdai.conahcyt.mx/)). El Sisdai es un proyecto de investigación desarrollado por el \nCentro de Investigación en Ciencias de Información Geoespacial, A.C. \n([CentroGeo](https://www.centrogeo.org.mx/)) y coordinado por el Consejo Nacional de Humanidades, Ciencias y Tecnologías\n([Conahcyt](https://conahcyt.mx)) del Gobierno de México.\n\nPara leer la documentación de la biblioteca, puedes visitar el sitio [sisdai-css.conahcyt.mx](https://sisdai-css.conahcyt.mx) \no levantar la documentación localmente siguiendo las instrucciones escritas en la sección [Uso local del proyecto](#uso-local-del-proyecto) de este\ndocumento.\n\nCualquier persona puede hacer uso de esta biblioteca al clonarla e instalarla en su equipo a través del \n**protocolo HTTPS** o bien instalándola mediante [npm](https://www.npmjs.com/~centrogeomx).\n\n## Utilidades\n\n* Normaliza la forma en que se visualizan los elementos de HTML entre distintos navegadores como Firefox, Chrome, Opera, Safari, Edge\n* Estandariza estilos desde las etiquetas de HTML\n* Agrega clases para ayudar a la accesibilidad\n* Contiene un archivo de `_variables` general para homogeneizar, tipografías, pesos, tamaños, espacios y colores\n* Contiene un archivo de `_mixins` general para reutilizar los mediaquery de los límites declarados para la correcta visualización en celulares y pantallas más grandes\n\n## Instalación y uso\n\nSi tu desarrollo está creado con el [proyecto-base](https://github.com/CentroGeo/sisdai-proyecto-base), ya\ntiene incluida una versión estable de sisdai-css y sisdai-componentes y no requiere ningún paso de instalación ni importación. En\nese caso puedes ir a la sección [Actualización](#actualización).\n\n### Agrega las tipografías\n\nEsta biblioteca utiliza las tipografías de Montserrat y Atkinson Hyperlegible de Google fonts.\n\nAgrega las siguientes líneas dentro del `\u003chead\u003e \u003c/head\u003e` del archivo de html en el siguiente orden:\n\n1. Ligas de las tipografías de Google Fonts.\n2. Ligas de la tipografía para los íconos (aún en desarrollo).\n\n``` html\n  \u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n  \u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin\u003e\n  \u003clink href=\"https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible\u0026family=Montserrat:wght@400;500;600\u0026display=swap\" rel=\"stylesheet\"\u003e\n```\n\n### Instala la biblioteca\n\nEn la carpeta principal de tu proyecto Vue puedes instalar la última versión de sisdai-css mediante dos opciones:\n\n**Opción A.** Desde el repositorio del [sisdai-css en npm](https://www.npmjs.com/package/@centrogeomx/sisdai-css).\n\nEn la línea de comando escribe\n\n```bash\nnpm i @centrogeomx/sisdai-css\n```\n\n**Opción B.** Desde el repositorio de [sisdai-css en github](https://github.com/CentroGeo/sisdai-css).\n\nEn la línea de comando escribe\n\n```bash\nnpm install git+https://github.com/CentroGeo/sisdai-css\n```\n\n### Importa la biblioteca\n\nPuedes importar la biblioteca de manera general en el archivo `main.js` de tu proyecto Vue\n\n```js\n// src/main.js\n\nimport '@centrogeomx/sisdai-css'\n\n```\n\nÓ en el archivo de css o sección de estilos de tu proyecto \n\n```css\n/* archivo css */\n@import '@centrogeomx/sisdai-css';\n```\n\n*Opcionalmente se pueden importar las variables y mixins para utilizar las mismas referencias que la biblioteca en los estilos particulares de cada proyecto\n\n```scss\n/* archivo scss */\n@use '@centrogeomx/sisdai-css/src/_variables' as variables;\n@use '@centrogeomx/sisdai-css/src/_mixins' as mixins;\n```\n\n### Uso de la biblioteca\n\nMuchos de los estilos de la biblioteca se muestran sin agregar ninguna clase, utilizando las etiquetas adecuadas para el HTML semántico. \n\n```html\n  \u003ch1\u003e Estilo estandarizado de título principal \u003c/h1\u003e\n```\n\nExisten además clases para dar estilo a elementos, las cuales se encuentran agrupadas por módulos dependiendo de su uso.\n\n```html\n  \u003cp class=\"h1\"\u003eEs la jerarquía de texto más alta, se ubica generalmente al inicio de la página y describe el contenido de la misma\u003c/p\u003e\n```\n\n## Actualización\n\nSi necesitas utilizar otra versión, ubícate en la carpeta del proyecto en donde necesitas la actualización e instala la versión que requieres nuevamente usando una de estas dos opciones\n\n**Opción A.** Para versiones publicadas en el repositorio de [sisdai-css en npm](https://www.npmjs.com/package/sisdai-css).\n\n```bash\nnpm i @centrogeomx/sisdai-css@vN.N.N\n```\n\n**Opción B.** Para cualquier versión desde el repositorio de [sisdai-css en github](https://github.com/CentroGeo/sisdai-css)\n```bash\nnpm install git+https://github.com/CentroGeo/sisdai-css#vN.N.N\n```\n\ndonde N.N.N indica el número de versión, por ejemplo v1.0.0\n\nConsulta el archivo `CHANGELOG.md` del repositorio de [sisdai-css](https://github.com/CentroGeo/sisdai-css) para conocer las nuevas características y cambios que sufre la biblioteca en cada una de sus versiones.\n\n\n## Listado de elementos\n\nEl código se encuentra separado por carpetas dependiendo del tipo de etiqueta o funcionalidad de los elementos que contenga.\nEn general las clases fundamentales para estructurar las vistas, definir la tipografía, color, así como cada etiqueta nativa de html tiene su propia carpeta.\nSe separaron los elementos compuestos, componentes y clases requeridas para visualizaciones en carpetas y archivos específicos para cada uno y así asegurar por \njerarquía que unos estilos se puedan sobreescribir a otros.\n\n| Módulo           | Descripción                                                                                                                                                                              |\n|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| Accesibilidad    | Clases para reescribir el estilo de elementos requeridos por el menú de accesibilidad                                                                                                    |\n| Auxiliares       | Clases auxiliares para desarrollo, estilos de texto, bordes, alineación y visualización en distintos dispositivos                                                                        |\n| Botón            | Clases que se aplican al elemento `\u003cbutton\u003e`                                                                                                                                             |\n| Color            | Variables de CSS para las paletas de color en modo claro y modo oscuro para todos los elementos del sistema Sisdai                                                                       |\n| Componentes*     | Estilos de componentes declarados en la biblioteca [sisdai-componentes](https://github.com/CentroGeo/sisdai-componentes)                                                            |\n| Compuestos       | Estilos de múltiples elementos que combinados crean un nuevo estilo de elemento compuesto                                                                                                |\n| Detalle          | Estilos las etiquetas `\u003cdetails\u003e` `\u003csummary\u003e`                                                                                                                                            |\n| Formulario       | Estilos de todas las etiquetas que conforman y se utilizan dentro de formularios                                                                                                         |\n| Hipervínculo     | Estilos de la etiqueta de hipervínculo `\u003ca\u003e`                                                                                                                                             |\n| Imagen           | Estilos de las etiquetas relacionadas con imágenes `\u003cimg\u003e`, `\u003cfigure\u003e` y `\u003cfigcaption\u003e`                                                                                                  |\n| Lista            | Estilos de las etiquetas de listas `\u003cul\u003e`, `\u003col\u003e`, `\u003cli\u003e`, `\u003cdl\u003e`, `\u003cdt\u003e` y `\u003cdd\u003e` y clases de estilos para listas especiales                                                            |\n| Pictograma       | Enlace y mapeado de la tipografía Sisdai-Pictogramas  `.pictograma-`                                                                                                                     |\n| Separador        | Estilos de la etiqueta `\u003chr /\u003e` que puede ser complementada con el auxiliar de borde                                                                                                     |\n| Retícula         | Clases de contenedores y retícula con filas y columnas                                                                                                                                   |\n| Tabla            | Estilos para las etiquetas relacionadas con tablas `\u003ctable\u003e`, `\u003ccaption\u003e`, `\u003cthead\u003e`, `\u003ctfoot\u003e`, `\u003ctbody\u003e`, `\u003ctr\u003e`, `\u003cth\u003e` y `\u003ctd\u003e`                                                      |\n| Tipografía       | Estilos de las etiquetas de títulos, párrafos y texto en general.                                                                                                                        |\n| Visualizaciones* | Estilos de elementos utilizados en las bibliotecas [sisdai-graficas](https://github.com/CentroGeo/sisdai-graficas) y [sisdai-mapas](https://github.com/CentroGeo/sisdai-mapas) |\n \n\u003e *Estilos que se utilizan en otras bibliotecas del Sisdai\n\n## Uso local del proyecto\n\n### Pasos previos recomendados\n\nPara desarrollar este proyecto se usa [node.js](https://nodejs.org/en) como\nentorno de ejecución de JavaScript. La opción recomendada para instalarlo es\n[vía nvm](https://github.com/nvm-sh/nvm) que es el manejador de versiones de\nnode. Siguiendo este camino, también se instalará el manejador de paquetes\n[npm](https://www.npmjs.com/). Las instrucciones de instalación\ny dependencias del proyecto se muestran aquí usando tanto npm, como nvm.\n\n### Dependencias\n\n- [node.js (^20)](https://nodejs.org/en/download/)\n- [npm (^10)](https://www.npmjs.com/get-npm)\n\n### Instalación\n\nClona este repositorio utilizando **solo el protocolo HTTPS**, es decir.\n\n```bash\ngit clone https://github.com/CentroGeo/sisdai-css.git\n```\n\nEntra a la carpeta del proyecto\n\n``` sh\ncd sisdai-css\n```\n\nInstala las dependencias del proyecto\n\n``` sh\nnpm install\n```\n\nOpcionalmente instala las dependencias de la documentación\n\n``` sh\nnpm run docs:install\n```\n\nOpcionalmente levanta en local la documentación\n```sh\nnpm run docs\n```\nó\n```sh\nnpm run docs:dev\n```\n\n## Licencia\n\n**SOFTWARE LIBRE Y ESTÁNDARES ABIERTOS**\n\nSisdai y sisdai-css están alineadas a las disposiciones establecidas por\nla Coordinación de Estrategia Digital Nacional (\nDOF:06/09/2021) en donde se estipula que las \"políticas y disposiciones tienen\ncomo objetivo fortalecer el uso del software\nlibre y los estándares abiertos, fomentar el desarrollo de aplicaciones\ninstitucionales con utilidad pública, lograr la\nautonomía, soberanía e independencia tecnológicas dentro de la APF\". En el\nartículo 63 se explicita que \"cuando se trate\nde desarrollos basados en software libre, se respetarán las condiciones de su\nlicenciamiento original [...]\".\n\nConsiderando lo anterior, sisdai-css se publica bajo la licencia\n[LGPLv3](https://www.gnu.org/licenses/lgpl-3.0.html). Dicha licencia se puede\nconsultar en el archivo _LICENSE_ de este repositorio.\nEsta licencia se encuentra disponible en inglés porque aunque el Sisdai privilegia\nel idioma español se respeta la versión original de acuerdo al proyecto\n[GNU](https://www.gnu.org/licenses/licenses.html).\n\n## Contribuir\n\nPor el momento sólo quienes sean\nparte de un equipo de investigación del capítulo de un [ENI](https://eni.conahcyt.mx)\npodrán levantar issues en este repositorio. El equipo del [Sisdai](https://sisdai.conahcyt.mx) se encargará de mantenerlo.\n\n___\n\n### ¿Cómo agregar un nuevo estilo?\n\n#### Estructura\n\nLas clases se encuentran agrupadas en módulos, dependiendo el tipo de elemento en el que se utilizará. Si no existiera \nuna carpeta adecuada, se crea una nueva dentro de `src/` con el nombre del elemento. \n\n```bash\nsisdai-css/\n└── src\n    └── *nuevoelemento* # carpeta del elemento\n        ├── _index.scss # archivo con import de todos los archivos del nuevo elemento\n        ├── base.scss # estilos generales\n        └── subelemento.scss # sub elementos o casos particulares\n```\n\nPara agregar el nuevo elemento a la biblioteca se debe importar en el archivo principal `sisdai.scss`.\nHay que recordar que el orden en el que se importen los estilos tiene jerarquía. El último archivo importado es el \nque le dará estilo al elemento.\n\n```bash\nsisdai-css/\n└── src\n    ├── [...]\n    └── sisdai.scss\n```\n\nColócalo antes de los auxiliares y los archivos de accesibilidad\n\n```scss\n/* src/sisdai.scss */\n\n@use 'nuevoelemento';\n\n@use 'auxiliares';\n@use 'accesibilidad';\n```\n\nPara facilitar el mantenimiento de la biblioteca se debe prestar atención en las variables declaradas en `_variables.css`\ny hacer uso de ellas sobre todo en márgenes y colores; \nlas tipografías deben estar declaradas en unidades _rem_ para que se actualicen conforme el tamaño general de la tipografía del sitio.\n\nAdemás, se deben utilizar en la medida de lo posible los `_mixins.scss` de mediaquery \no en su defecto utilizar las variables en el @media screen and (max-width: calc(map-get($breakpoints, 'esc')))\npara controlar los puntos de cambio de diseño de celular, escritorio y navegación.\n\n\n```bash\nsisdai-css/\n└── src\n    ├── _mixins.scss\n    ├── _variables.scss \n    └── [...]\n\n```\n\n```scss\n@use '_variables' as variables;\n@use '_mixins' as mixins;\n\n```\n\n#### Validaciones con Stylelint\n\nEl proyecto está construido con los estándares de [Stylelint](https://stylelint.io/user-guide/rules) para mejorar las convenciones y evitar errores comunes.\nDespués de agregar los estilos del nuevo elemento, asegúrate de que se cumplan las mismas reglas.\n\nPara verificar el proyecto con Stylelint puedes correr en la terminal el comando \n```bash\nnpm run pruebas:stylelint\n```\n\nAparecerá una lista de errores, en caso de que existan, con sugerencias para solucionarlos. \nCuando no aparezca nada en tu lista, estás lista para continuar.\n\n#### Validaciones con Sass\n\nPara verificar que el proyecto corra con la última version de Sass, puedes correr en la terminal el comando \n```bash\nnpm run pruebas:sass\n```\n\nAparecerá una lista de errores, en caso de que existan, con sugerencias para solucionarlos. \nCuando no aparezca nada en tu lista, estás lista para continuar.\n\n#### Agregar el nuevo elemento a la documentación\n\nEn la carpeta `docs` existe un proyecto de Vue para desplegar la documentación.\nParecido a los módulos en los que se agrupan los estilos, existen vistas en la\ndocumentación en donde se demuestra como se ve el nuevo estilo, clase o componente\ny se describe brevemente su funcionalidad.\n\nEn caso de necesitar una nueva vista, hay que agregarla en las rutas \ny en la navegación.\n\n#### Compilación y actualización\n\nPara las personas colaboradoras de este proyecto, la documentación se puede\ncompilar para su despliegue en desarrollo usando:\n\n```bash\nnpm run docs:build\n```\n\nY para compilar el archivo de estilos comprimido para producción:\n\n```bash\nnpm run build\n```\n\nEl **build** actualiza los archivos de la carpeta de distribución `dist` que se utilizan para actualizar la **CDN** y que puedes utilizar como archivos locales copiándolos y pegándolos en tus proyectos.\n\n----------------\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcentrogeo%2Fsisdai-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcentrogeo%2Fsisdai-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcentrogeo%2Fsisdai-css/lists"}