Show HN: CSS minimalista para magos, 'magick.css'

• magick.css es un framework CSS casi sin clases que se distribuye en un solo archivo y apunta a un estilo de documentos web como “notas de mago”, fácil de leer y bueno para transmitir información
• Funciona en todos los tamaños de pantalla y puede usarse sin JavaScript, por lo que es fácil de aplicar de inmediato a documentación estática o páginas HTML ligeras
• Puede instalarse mediante CDN, incluyendo el archivo directamente o vía import con npm, y se explica una configuración para usarlo junto con normalize.css
• La estructura básica apunta a una columna legible centrada en y, y permite agregar explicaciones complementarias junto al cuerpo con `` y sidenote
• Da estilo a la mayoría de los elementos HTML básicos, pero las funciones que requieren estructura, como las sidenotes y la numeración de líneas de código, se ofrecen con clases aparte

---

Objetivos y carácter de magick.css

• magick.css es un framework CSS minimalista y en su mayor parte classless
• Está contenido en un solo archivo, y los comentarios dentro del CSS permiten seguir el motivo de cada decisión
• Visualmente busca crear una atmósfera mágica, elegante pero juguetona, priorizando la legibilidad y la capacidad de comunicar información
• Mantiene su forma y funcionalidad en todos los dispositivos y tamaños de pantalla, y funciona sin JavaScript
• Está inspirado en LaTeX, antiguos manuales de reglas de TTRPG, concrete.css, Tufte CSS y la ética brutalista de “usability as design”

Instalación y formas de uso

• Para verlo lo más rápido posible, agrega 2 hojas de estilo vía CDN dentro de HTML ``

• También puedes descargar el archivo magick.css del repositorio e incluirlo como cualquier CSS normal

• En proyectos con JavaScript, se instala con npm y luego se importa

npm install normalize.css magick.css

import 'normalize.css'
import 'magick.css'

• Su configuración 99% classless hace que sea fácil de aplicar incluso a documentos HTML5 existentes

Layout centrado en la lectura

• Para crear una columna responsive, se recomienda envolver todo el contenido con y dividir los textos largos con
• Una estructura de documento común es colocar , varios , y dentro de
• Aunque no sigas esa estructura, también puedes usar magick.css solo para tipografía y componentes estilizados
• La información adicional se expresa con la etiqueta ``
• Si quieres agregar contexto extra en medio del texto, puedes usar sidenote, y la numeración se asigna automáticamente

Estilo de elementos HTML básicos

• La tipografía cubre títulos, párrafos, enlaces, énfasis, subrayado, texto pequeño, código inline y más
• magick.css no da estilo a headings por debajo de ``
  • Considera que los headings de nivel inferior suelen usarse para fines especiales más que para jerarquía
  • Si hace falta, el usuario puede darles estilo manualmente
• Las listas se mantienen simples para no distraer del contenido
  • listas no ordenadas
  • listas ordenadas
  • listas de descripción
• Las tablas usan un estilo claro y conciso para que la atención se centre en los datos
• Los formularios y elementos de entrada pueden usarse solos o dentro de un form
  • Como los campos de texto tienen usos muy variados, no se imponen opiniones fuertes sobre tamaño o disposición
  • Se espera que la label de checkboxes y radio buttons vaya después del input
  • Los forms están estilizados para llamar la atención del usuario con una sensación de libreta de papel escrita a mano

Medios, código y citas

• Las imágenes y videos pueden colocarse por separado o dentro de `` para mostrarse con caption
• Un `` independiente se muestra en su tamaño natural cuando hay espacio suficiente, sin estirarse ni deformarse
• Usar y permite destacar más los medios y agregar contexto
• Para código inline se usa , y para bloques de código grandes se usa una estructura donde envuelve a ``
• Los fragmentos de código también pueden mostrarse como figure
• Para citas se usa ``
  • La atribución de la fuente se agrega con `` dentro de blockquote
  • Los textos cuyo formato es importante, como la poesía, pueden envolverse con ``

Funciones que se usan con clases aparte

• Algunas funciones requieren clases especiales, por lo que se separan del funcionamiento classless principal de magick.css
• Para insertar una sidenote en el cuerpo, hay que agregar juntos la posición de referencia y el contenido de la sidenote

Sidenote Content.

• En dispositivos móviles, la sidenote se mueve dentro de la columna principal
• Para mostrar números de línea en bloques de código o pre, hay que insertar `` que contengan cada número de línea
• La inserción de números de línea puede hacerse manualmente, con JavaScript o con procesamiento del lado del servidor, según se prefiera

Enlaces del proyecto

• Si te gusta, puedes darle una estrella en GitHub
• Si te interesa otro trabajo, puedes unirte a Discord

[GN⁺]

Opiniones de Hacker News

• Es un sistema de diseño realmente hermoso, y la forma en que lo presentan también es genial.
  Me gusta cómo la tipografía manuscrita del área de entrada combina con las serif orgánicas, y cómo cuidaron hasta detalles como una altura de línea y un peso bien equilibrados.
  Código para quienes tengan interés: https://github.com/wintermute-cell/magick.css/blob/master/ma...
  Me gustaría que también tuviera checkboxes y radio buttons personalizados. Por ahora, solo esos dos rompen la inmersión; el resto está excelente. Quizá por fin me anime a hacer ese blog en el que vengo pensando desde hace tiempo.
• Es un buen ejemplo de lo bien que una fuente puede encajar con el estilo buscado.
  Combina tan bien que casi ni se nota.
  • No me parece que esta fuente se vea tan bien. No sé exactamente por qué, pero aunque no es muy difícil de leer, no se lee tan cómodamente como otras fuentes comunes.
  • Va con el estilo, pero siento que es demasiado difícil de leer.
• Hay un pequeño error tipográfico en el ejemplo simple.
  Hay que notar que la etiqueta de cierre es header, no main.
  • Además, si es un sitio que demuestra CSS, estaría bueno incluir también el CSS sin minificar.
    Quería ver rápido cómo estaba hecho, pero tuve que pasar por varios pasos más para ver el original. Al menos sería útil tener un enlace clicable directo a la versión sin procesar.
  • Para el contenido principal de la página se usa la etiqueta main, y para contenido relacionado pero secundario, como la sección de comentarios o las etiquetas, se usan etiquetas separadas.
  • Semánticamente, HEADER y FOOTER deberían ir antes y después de la etiqueta MAIN, respectivamente.
• Si a este estilo se le mezcla una sensación de documento LaTeX, queda exactamente con el ambiente que quería para un sitio personal.
  Por alguna razón, esa estética me atrae muchísimo.
  Además, ese aspecto extremadamente minimalista, casi puro HTML, como los sitios web de antiguos profesores universitarios, también se ve genial.
  Ojalá los blogs personales fueran más populares.
• Si te gusta este estilo, quizá también te guste Tufte CSS: https://edwardtufte.github.io/tufte-css/
  • Me gusta que Tufte enfatice la integración estrecha entre imágenes y texto. Me parece una elección de estilo razonable que algunos puristas de TeX no quieren admitir.
    Al menos en mis textos, sean técnicos o no, las imágenes y el texto forman una narrativa continua. Reordenar las imágenes y moverlas a otro lugar tiene tan poco sentido como hacer eso con los párrafos.
• Ojalá no usaran la tipografía script en mayúsculas. Es fatal para la legibilidad.
  En realidad, es mejor no escribir nada completamente en mayúsculas. Es una forma de énfasis heredada de la era de las máquinas de escribir, como el subrayado, porque en ese entonces solo se podía usar una fuente.
  Las letras en mayúscula se parecen demasiado entre sí. Al no haber variación en la altura de las letras, al ojo le cuesta más leerlas. Al mezclar mayúsculas y minúsculas, aparecen letras con descendentes como y, p, j, y ascendentes como b, d, t, lo que crea variación y facilita reconocerlas.
  Para enfatizar, conviene usar tamaño, peso o cursiva.
  • Sí, esto rompe una regla de legibilidad, así que es más difícil de leer de lo que podría ser.
    Pero gracias a eso también logra un estilo distintivo.
    Aun así, creo que me gusta.
• Me gustaría que hubiera más frameworks CSS minimalistas con estilos con personalidad.
  Es fácil encontrar frameworks genéricos bastante buenos, pero si quieres algo con un sabor marcado, es mucho más difícil.
  • Vale la pena probar Tufte CSS: https://edwardtufte.github.io/tufte-css/
• Si se bloquean las fuentes remotas, el texto se renderiza en Comic Sans. No se ve bien.
  • El odio a Comic Sans ya se siente un poco pasado de moda.
    https://www.mcsweeneys.net/articles/im-comic-sans-asshole
  • Si bloqueo la selección de fuentes de la página web, se renderiza con mi fuente preferida, pero el peso de la fuente baja y el tamaño del texto y la altura de línea aumentan un poco.
    En especial, cuando el peso bajo se combina con el tema oscuro, leer el texto se vuelve bastante incómodo.
  • Me molesta un poco darme cuenta de que mi configuración actual no está bloqueando Google Fonts. Normalmente bloqueo estas cosas a nivel de /etc/hosts.
• ¿Por qué todos los frameworks CSS y sistemas de diseño odian tanto los campos de entrada de texto?
  En lugar de resolverlo con sentido común, Google terminó haciendo una investigación con 800 usuarios para llegar a la conclusión de que “los campos de entrada de texto deberían verse como campos de entrada de texto”: https://medium.com/google-design/the-evolution-of-material-d...
• Me gusta la idea de un framework CSS que casi no necesita clases.
  Hace tiempo hice uno, aunque probablemente no sea tan bueno como este: https://elementcss.neocities.org
  • Confieso que Element es mi framework sin clases de siempre. Gracias por crearlo.