#mol-normalize
normaliza las etiquetas nativas de HTML
visita el github del proyecto
el init de proyectos web
- se pueden configurar los estilos directamente con el uso de propiedades personalizadas (variables) de CSS
- actúa directamente sobre las etiquetas nativas, homologandolo todo y ahorrandote escribir clases y ids
- tiene reglas tipográficas básicas para ayudar a la legibilidad y la accesibilidad
- calcula el color de estados :hover y :focus de los elementos interactivos en base al color primario declarado
- pesa tan solo 9 KB en disco
- ¡y no se necesita volver a compilar!
#uso
simplemente utiliza el archivo minificado que puedes encontrar en mol/normalize.min.css y si necesitas cambiar un color, una tipografía o algun tamaño, crea un archivo de variables para que sobreescribas el valor de la propiedad
#muestra
a.k.a. así se ven las etiquetas:
h1 título
h2 subtítulo
h3 subsubtítulo
h4 subsubsubtítulo
h5 subsubsubsubtítulo
h6 subsubsubsubsubtítulo
p parrafo de ejemplo que no diga lorem ipsum porque ya chole con ese texto. además para decir cualquier tontería ni nos necesitan pagar, lo hacemos de gusto
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 . aqui tambien debe haber un texto de al menos dos parrafos para que se vea ademas el interlineado, que es igual que el del párrafo, pero bueno, es mejor ver todo claro clarisimo aunque sea repetitivo
pre texto preformateado
code texto de código
kbd entrada de teclado
samp muestra de salida
var variable
este es un enlace pequeño dentro de un párrafo. y para ver el enlace largo dentro de un texto, como para referencias de documentos.. vale la pena poner una palabra larga aunque no exsta como haslidufyalisudfyalisudghfalskdhflaksjdhflaksjdhflaisudfyliasudfalsjkdfglasjdfliuasgdfiuaysgdwiuyegriwjdbciauehfawñiejbgrliawudgcsilas, que bueno, se separa en lineas pero ese hueco que queda... mmm.. no se, no se
- 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
- ol lista anidada
- li elemento de lista
| th títulos | th nombres | |
|---|---|---|
| th otra variable | td valores de las variables | td valores de las variables |
| th otra variable | td definiciones de los nombres | td definiciones de los nombres |
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
- e
- j
- e
- l
- e
- s