CSS Zen Garden projesi

• CSS Zen Garden, CSS tabanlı tasarımın güzelliğini gösteren bir projedir
• HTML aynı kalır; yalnızca harici CSS dosyası değiştirilerek farklı tasarımlar deneyimlenebilir
• Katılımcılar CSS aracılığıyla web tasarımının gücünü gösterebilir, ilham verebilir ve bunu bir öğrenme kaynağı olarak kullanabilir
• Ağırlıklı olarak CSS 1 & 2 kullanılır; CSS 3 & 4 ise sınırlı şekilde kullanılmalıdır
• Gönderilen tasarımlar farklı tarayıcılarda tutarlı sonuçlar göstermeli ve en az IE9+ ile modern tarayıcılarda çalışmalıdır

---

CSS Zen Garden'ın önemi

• CSS Zen Garden, CSS'in gücünü göstermek ve tasarımcılarla geliştiricilere ilham vermek için oluşturulmuş bir projedir
• HTML aynı kalır; yalnızca harici CSS dosyası değiştirilerek farklı tasarımlar deneyimlenebilir
• Bu proje, CSS'in olanaklarını gösterir ve web tasarımının estetiğini vurgular

Nasıl katılınır

• Güçlü bir görsel tasarım anlayışı ve CSS becerileri gerekir; ancak yeni başlayanlar da örnek dosyalarla başlayabilir
• Stil sayfası serbestçe düzenlenebilir, ancak HTML değiştirilemez
• Tamamlanan çalışma bir web sunucusuna yüklenmeli ve bağlantısı gönderilmelidir

Katılımın faydaları

• Görünürlüğü artırabilir, ilham verebilir ve CSS'in şaşırtıcı olanaklarını gösteren bir kaynak olarak kullanılabilir
• Web tasarımcıları ve geliştiricilere ilham veren, aynı zamanda öğrenme materyali olarak değerlendirilebilen bir sitedir

Gereksinimler

• Ağırlıklı olarak CSS 1 & 2 kullanılmalı, CSS 3 & 4 ise sınırlı şekilde kullanılmalıdır
• Farklı tarayıcılarda tutarlı sonuçlar vermeli ve en az IE9+ ile modern tarayıcılarda çalışmalıdır
• Özgün çalışmalar gönderilmeli ve telif haklarına saygı gösterilmelidir

Telif hakkı ve lisans

• Gönderilen grafikler üzerindeki telif hakkı korunur; CSS ise Creative Commons lisansı ile sunulmalıdır
• Başkalarının öğrenebilmesi için CSS paylaşılmalıdır

[GN⁺]

Hacker News yorumları

• CSS ortaya çıkmadan önce web geliştiricileri grid oluşturmak için table öğelerini aşırı kullanıyor, görselleri dilimleyip table içine yerleştirerek yerleşim kuruyordu

  • CSS’ye karşı bir tepki vardı ve birçok geliştirici CSS öğrenmeyi reddediyordu
  • CSS’nin yalnızca "sıkıcı ve kutu gibi" tasarımlar yapabildiğine dair bir yanlış kanı vardı
  • Dave Shea, CSS Zen Garden ile CSS’nin neler yapabildiğini göstererek bu yanlış kanıyı ortadan kaldırdı
  • CSS ile etkileyici tasarımlar yapılabileceğini kanıtlayarak tartışmayı bitirdi

• Bu site eskiydi ama iyi anlamda eskiydi

  • 2000’lerin başında Microsoft ASP.NET’ten uzaklaşıp Linux üzerinde uygulama geliştirmeye başlamama vesile oldu
  • Alex Russell, Dojo JS aracılığıyla yeni bilgiler sunarak teknoloji haberlerinin önemini hatırlattı
  • Web.py, HTML, JS ve CSS’ten oluşan bir araç seti kullanıyordum; ardından jQuery, Backbone, Underscore, React, TS ve diğerleri geldi

• CSS Zen Garden’ın ana fikri, anlamlı HTML’i olabildiğince kullanarak sunum ile içeriği tamamen bağımsız şekilde işletebilmekti

  • Tasarım, CSS’nin sınırları içinde uygulanabiliyordu
  • Stili değiştirmek için çoğu zaman DOM’u doğrudan değiştirmek gerekiyordu
  • HTML ve Javascript düzeyinde, sunum ile içerik yapısına dair kararları birbirine karıştırmak zorunda kalınıyordu

• CSS’yi Zen Garden ve Eric Meyer üzerinden öğrenmiş biri olarak, Tailwind gibi modern CSS araçları bir anti-pattern gibi görünüyor

• Tailwind ve CSS-in-JS’in karanlık çağında ışık tutan bir şeydi

  • 20 yıl önce CSS Zen Garden’ın ne kadar önemli olduğunu fark etmek zordu

• Eski ama güzel bir şey

  • Düşük gelirli lise öğrencilerine web tasarımı öğretmenin temelini oluşturdu
  • Öğrencilerin web tasarım yarışmalarında CSS’yi açıklaması gerekiyordu ve birçok öğrenci masaüstü bilgisayar kazandı
  • Dave Shea, Eric Meyer, Andy Budd ve diğerlerine sorular gönderip yardım aldım

• İki tasarım gönderdim ve hâlâ CSS’yi yeniden kullanma talepleri alıyorum

• Bu site geçmişte büyük etki yarattı

  • Aynı HTML içeriği için CSS ve görseller gönderebiliyordunuz
  • Çok etkileyici tasarım örnekleri vardı

• Geçmişe dair bir nostalji... CSS Zen Garden’ı çok seviyordum ama bu, web sitelerinin ana amacının belge sunmak olduğu dönemin felsefesiydi

  • Medya açısından zengin dünya bu vizyonu geride bıraktı

• CSS Zen Garden’ı HN’de görmek güzel

  • Tailwind gibi CSS "framework"lerine yönelik bir memnuniyetsizlik var
  • Tailwind, CSS’nin nasıl çalıştığını öğrenmeden de "yeterince iyi" sonuçlar almayı sağlıyor
  • HTML, içerikten daha fazla CSS sınıfı içeren bir hâle geliyor
  • Derinlik ve ustalığın isteğe bağlı görülmesine doğru bir eğilim var