Proyecto CSS Zen Garden

• CSS Zen Garden es un proyecto que muestra la belleza del diseño basado en CSS
• El HTML se mantiene igual, y se pueden experimentar distintos diseños cambiando solo el archivo CSS externo
• Los participantes pueden demostrar el poder del diseño web a través de CSS, inspirar a otros y usarlo como material de aprendizaje
• Se usan principalmente CSS 1 y 2, y CSS 3 y 4 deben usarse de forma limitada
• Los diseños enviados deben mostrar resultados consistentes en distintos navegadores y funcionar al menos en IE9+ y navegadores modernos

---

La importancia de CSS Zen Garden

• CSS Zen Garden es un proyecto pensado para mostrar el poder de CSS e inspirar a diseñadores y desarrolladores
• El HTML se mantiene igual, y se pueden experimentar distintos diseños cambiando solo el archivo CSS externo
• Este proyecto muestra las posibilidades de CSS y destaca la belleza del diseño web

Cómo participar

• Se necesita un diseño visual sólido y habilidades de CSS, aunque los principiantes también pueden empezar con archivos de ejemplo
• La hoja de estilos puede modificarse libremente, pero no se puede cambiar el HTML
• La obra terminada debe subirse a un servidor web y se debe enviar el enlace

Beneficios de participar

• Puede servir para aumentar la visibilidad, brindar inspiración y mostrar las sorprendentes posibilidades de CSS
• Es un sitio que puede inspirar a diseñadores y desarrolladores web, y usarse como material de aprendizaje

Requisitos

• Se deben usar principalmente CSS 1 y 2, y CSS 3 y 4 deben usarse de forma limitada
• Debe mostrar resultados consistentes en distintos navegadores y funcionar al menos en IE9+ y navegadores modernos
• Se debe enviar una obra original y respetar los derechos de autor

Derechos de autor y licencia

• Los gráficos enviados conservan sus derechos de autor, y el CSS debe ofrecerse bajo una licencia Creative Commons
• El CSS debe compartirse para que otras personas puedan aprender de él

[GN⁺]

Comentarios de Hacker News

• Antes de que apareciera CSS, los desarrolladores web abusaban de los elementos de tabla para crear grids y recortaban imágenes para colocarlas dentro de tablas como forma de implementar layouts

  • Había resistencia a CSS, y muchos desarrolladores se negaban a aprenderlo
  • Existía la idea equivocada de que con CSS solo se podían hacer diseños "aburridos y encajonados"
  • Dave Shea disipó esas ideas equivocadas al mostrar las posibilidades de CSS a través de CSS Zen Garden
  • Demostró que se podían crear diseños increíbles con CSS y cerró el debate

• Este sitio ya es viejo, pero lo era en el buen sentido

  • A inicios de los 2000, fue una de las razones por las que dejé Microsoft ASP.NET y empecé a desarrollar apps en Linux
  • Alex Russell aportó información nueva a través de Dojo JS y me hizo recordar la importancia de las noticias tecnológicas
  • Usaba un toolkit compuesto por Web.py, HTML, JS y CSS; después llegaron jQuery, Backbone, Underscore, React y TS

• El punto principal de CSS Zen Garden era que, aprovechando al máximo un HTML semántico, la presentación y el contenido podían funcionar de manera completamente independiente

  • Era posible implementar diseños dentro de las limitaciones de CSS
  • Para cambiar el estilo, muchas veces había que modificar directamente el DOM
  • A nivel de HTML y Javascript, a menudo había que mezclar las decisiones de presentación con las de estructura del contenido

• Como alguien que aprendió CSS gracias a Zen Garden y a Eric Meyer, las herramientas modernas de CSS como Tailwind me parecen un antipatrón

• Fue una luz en la era oscura de Tailwind y CSS-in-JS

  • Es difícil darse cuenta de la importancia que tuvo CSS Zen Garden hace 20 años

• Es algo viejo, pero bueno

  • Fue la base para enseñar diseño web a estudiantes de preparatoria de bajos ingresos
  • Los estudiantes tenían que explicar CSS en competencias de diseño web, y muchos ganaron computadoras de escritorio
  • Envié preguntas a Dave Shea, Eric Meyer, Andy Budd y otros, y recibí ayuda

• Envié dos diseños y todavía sigo recibiendo solicitudes para reutilizar mi CSS

• Este sitio tuvo un gran impacto en el pasado

  • Se podían enviar CSS e imágenes para el mismo contenido HTML
  • Había ejemplos de diseño realmente impresionantes

• Qué recuerdos... Me encantaba CSS Zen Garden, pero pertenecía a una filosofía de una época en la que el propósito principal de un sitio web era ofrecer documentos

  • Un mundo rico en medios dejó esa visión atrás

• Me alegra ver CSS Zen Garden en HN

  • Tengo quejas sobre los "frameworks" de CSS como Tailwind
  • Tailwind permite obtener resultados "lo suficientemente buenos" sin aprender cómo funciona CSS
  • El HTML termina con más clases de CSS que contenido
  • Existe una tendencia a considerar la profundidad y la maestría como algo opcional