mol-normalize

Este proyecto es para normalizar los elementos nativos de HTML entre distintos navegadores a la vez que sirve de base para proyectos pequeños.

Se pueden configurar los estilos con las propiedades personalizadas (variables) de CSS, que actúan directamente sobre las etiquetas nativas sin necesidad de escribir ninguna clase a ningún elemento.

Tiene algunas reglas que ayudan a la accesibilidad, como validaciones de tamaños de textos mínimos, uso de unidades relativas para que los navegadores se adapten al tamaño de texto que elija la persona usuaria, o los calculos de los colores que se efectuan automáticamente con solo definir el color principal.

¡Y pesa tan solo 12 KB en disco!

Visita el proyecto en github

#uso

No se necesita volver a compilar. Simplemente utiliza el archivo minificado y con las propiedades de CSS puedes variar el resultado tanto en modo claro como oscuro.

Solamente 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.

Los elementos que tienen color están mezclados con el color primario para darle homogeneidad a la paleta de tonalidades.

// tema oscuro
:root {
  --m-color-fondo: rgb(18, 14, 24);
  --m-color-texto: rgb(255, 255, 255);
  --m-color-primario: rgb(0, 255, 187);
}

// tema claro
@media (prefers-color-scheme: light) {
  :root {
    --m-color-texto: rgb(18, 14, 24);
    --m-color-fondo: rgb(255, 255, 255);
    --m-color-primario: rgb(0, 135, 9);
  }
}

Las 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.

--m-documento-texto: 18px;
--m-documento-interlineado: 1.375em;
--m-documento-espaciado: 1rem;

Se 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.

--m-texto-tipografia: sans-serif;
--m-texto-peso: 400;

--m-titulo-tipografia: sans-serif;
--m-titulo-tamanio: 1rem;
--m-titulo-interlineado: 1.25em;
--m-titulo-peso: 500;
--m-titulo-margen: 1.25em 0 0;

--m-codigo-tipografia: monospace;
--m-codigo-peso: 400;
--m-codigo-tamanio: 0.9em;
--m-codigo-espaciado: 0.025em;

Por último, con estas variables se pueden configurar un poco los estilos en los formularios y elementos interactivos.

--m-formulario-borde-tamanio: 1px;
--m-formulario-borde-estilo: solid;
--m-formulario-redondeado: 3px;
--m-formulario-espaciado: var(--m-documento-espaciado);

--m-campo-altura: 44px;
--m-campo-borde-tamanio: 1px;
--m-campo-borde-estilo: solid;
--m-campo-espaciado: .5em;
--m-campo-redondeado: 3px;

--m-boton-borde-tamanio: 0;
--m-boton-borde-estilo: solid;
--m-boton-espaciado: .5em 1em;
--m-boton-redondeado: 999rem;

--m-enfoque-borde-estilo: solid;
--m-enfoque-borde-tamanio: 4px;
--m-enfoque-espaciado: 2px;

#textos

h1 título

h2 subtítulo

h3 subtítulo

h4 subtítulo

h5 subtítulo

h6 subtítulo

p parrafo Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tincidunt lectus a pharetra sodales. Phasellus ullamcorper elementum metus, ut consectetur libero lobortis eget. Nam mattis eros in ante tristique dignissim. Mauris elementum tempus dolor, eu luctus dolor consequat ac. Nullam et libero ac nibh rutrum faucibus quis gravida lectus.

bold texto negritas
strong texto importante
i texto italica
em texto enfatizar
mark texto remarcado
abbr abreviaciones y acrónimos
ins texto insertado
~~del~~ texto eliminado
dfn definiciones
small texto pequeño
_sub subíndice
^sup superíndice
cite cita
q cita breve

blockquote cita larga Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus velit nulla, scelerisque quis aliquam eget, rhoncus tincidunt lacus. Aliquam blandit est lacinia fringilla pulvinar. Morbi sodales eros leo, sed ultrices nunc rutrum et. Morbi at magna ante. Pellentesque tincidunt lectus a pharetra sodales.

pre texto preformateado

code texto de código
kbd entrada de teclado
samp muestra de salida
var variable

#enlaces

lorem ipsum enlace pequeño dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enlace largo dentro de un texto largo para podervercomosecomportaeltextocuandolotienequeromperperonotieneespacioscomoenlasurllarguisimasdedocumentosyeso, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

#listas

dl lista de definiciones dd término: dd descripción
dt término: dd descripción

ul lista desordenada
li elemento de lista
li elemento de lista
- ul lista anidada
- li elemento de lista

ol lista ordenada
li elemento de lista
1. ol lista anidada
2. li elemento de lista

#tablas

caption título de la tabla
	th títulos	th nombres	th variables
th otra variable	td valores de las variables	td valores de las variables	td valores de las variables
th otra variable	td definiciones de los nombres	td definiciones de los nombres	td definiciones de los nombres

#contenedores

details summary. Colapsables

Cualquier otro contenido dentro de details, después del summary. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Colapsable 2

figcaption. Descripción del contenido dentro de figure.