{"id":21358178,"url":"https://github.com/flkt-crnpio/mol-normalize","last_synced_at":"2025-10-26T12:30:57.198Z","repository":{"id":42026064,"uuid":"241746411","full_name":"flkt-crnpio/mol-normalize","owner":"flkt-crnpio","description":"npm i mol-normalize . normalizador con funciones para ajustar el color primario, la tipografía y media queries para cambiar el tamaño de los títulos.","archived":false,"fork":false,"pushed_at":"2025-01-09T01:07:36.000Z","size":209,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-09T02:21:22.958Z","etag":null,"topics":["css","mol-project","normalize-css","sass","scss"],"latest_commit_sha":null,"homepage":"https://flkt-crnpio.github.io/mol-normalize/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flkt-crnpio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2020-02-19T23:07:42.000Z","updated_at":"2024-12-30T19:46:41.000Z","dependencies_parsed_at":"2025-01-09T02:20:59.102Z","dependency_job_id":"155c9f7c-0614-474f-a4cb-cbbe87250d6b","html_url":"https://github.com/flkt-crnpio/mol-normalize","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flkt-crnpio%2Fmol-normalize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flkt-crnpio%2Fmol-normalize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flkt-crnpio%2Fmol-normalize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flkt-crnpio%2Fmol-normalize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flkt-crnpio","download_url":"https://codeload.github.com/flkt-crnpio/mol-normalize/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238327798,"owners_count":19453685,"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","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":["css","mol-project","normalize-css","sass","scss"],"created_at":"2024-11-22T05:14:55.422Z","updated_at":"2025-10-26T12:30:56.851Z","avatar_url":"https://github.com/flkt-crnpio.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mol normalize\n\n(≧ ▽ ≦)ノ weeeenaaaaaaas!!!\n\neste proyecto es para normalizar los elementos nativos de HTML entre distintos navegadores a la vez que sirve de base para proyectos pequeños.\n\nse pueden configurar los estilos directamente con el uso de propiedades personalizadas (variables) de CSS, que actúan directamente sobre las etiquetas nativas sin necesidad de escribir ninguna clase a ningún elemento.\n\ny pesa tan solo 12 KB en disco!\n\n**llame ya!**\n\n*( no llamen... nunca contesto )*\n\n## uso\n\n＼(￣▽￣)／ no se necesita volver a compilar! \n\nsimplemente utiliza el archivo minificado y con las propiedades de CSS puedes variar el resultado tanto en modo claro como oscuro.\n\n### --variables-de-color\n\nsolamente tiene tres variables de color, una para el fondo general, otra para el texto y un color primario para los elementos interactivos. Para que funcione correctamente, se requiere que tanto el texto como el color primario tengan suficiente contraste contra el fondo.\n\nlos elementos que tienen color están mezclados con el color primario para darle homogeneidad a la paleta de tonalidades.\n\n```scss\n// variables css color tema oscuro\n:root {\n  --m-color-fondo: rgb(18, 14, 24);\n  --m-color-texto: rgb(255, 255, 255);\n  --m-color-primario: rgb(0, 255, 187);\n}\n\n// variables css color tema claro\n@media (prefers-color-scheme: light) {\n  :root {\n    --m-color-texto: rgb(18, 14, 24);\n    --m-color-fondo: rgb(255, 255, 255);\n    --m-color-primario: rgb(74, 34, 255);\n  }\n}\n```\n\n### --variables-del-documento\n\nlas variables del documento interactúan con múltiples etiquetas, es importante que para el tamaño de texto se utilicen en unidades absolutas, para el interlineado y el espaciado se requieren unidades relativas.\n\n```css\n  --m-documento-texto: 18px;\n  --m-documento-interlineado: 1.375em;\n  --m-documento-espaciado: 1rem;\n```\n\n### --variables-de-texto\n\nse pueden utilizar distintas familias tipográficas y estilos para el texto, títulos y código, pero es importante declarar el tamaño del texto para cada caso en unidades relativas.\n\n```css\n  --m-texto-tipografia: sans-serif;\n  --m-texto-peso: 400;\n  \n  --m-titulo-tipografia: sans-serif;\n  --m-titulo-tamanio: 1rem;\n  --m-titulo-interlineado: 1.25em;\n  --m-titulo-peso: 500;\n  --m-titulo-margen: 1.25em 0 0;\n\n  --m-codigo-tipografia: monospace;\n  --m-codigo-peso: 400;\n  --m-codigo-tamanio: 0.9em;\n  --m-codigo-espaciado: 0.025em;\n```\n\n### --variables-de-formularios\n\npor último, con estas variables se pueden configurar un poco los estilos en los formularios y elementos interactivos.\n\n```css\n  --m-formulario-borde-tamanio: 1px;\n  --m-formulario-borde-estilo: solid;\n  --m-formulario-redondeado: 3px;\n  --m-formulario-espaciado: var(--m-documento-espaciado);\n\n  --m-campo-altura: 44px;\n  --m-campo-borde-tamanio: 1px;\n  --m-campo-borde-estilo: solid;\n  --m-campo-espaciado: .5em;\n  --m-campo-redondeado: 3px;\n  \n  --m-boton-borde-tamanio: 0;\n  --m-boton-borde-estilo: solid;\n  --m-boton-espaciado: .5em 1em;\n  --m-boton-redondeado: 999rem;\n\n  --m-enfoque-borde-estilo: solid;\n  --m-enfoque-borde-tamanio: 4px;\n  --m-enfoque-espaciado: 2px;\n```\n\n## notas\n\n(っ´ω`)ﾉ(╥ω╥) los inputs de type range, checkbox y radio, se muestran tal cual los presenta cada navegador. No se alteró su estilo porque para lograr homologarlos es necesario el uso de otros elementos y/o tecnologías.\n\n## \n\n \t( . .)φ__  flkt.crnpio@gmail.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflkt-crnpio%2Fmol-normalize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflkt-crnpio%2Fmol-normalize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflkt-crnpio%2Fmol-normalize/lists"}