CSS Zen Garden प्रोजेक्ट

 (csszengarden.com)
2 पॉइंट द्वारा GN⁺ 2025-04-28 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • CSS Zen Garden एक डेमो प्रोजेक्ट है जो दिखाता है कि एक ही HTML दस्तावेज़ सिर्फ CSS-आधारित डिज़ाइन से बिल्कुल अलग दृश्य अनुभव दे सकता है
  • डिज़ाइन सूची में से stylesheet चुनने पर HTML वैसा ही रहता है और सिर्फ बाहरी CSS बदलने से पेज का rendering बदल जाता है
  • प्रतिभागी sample HTML/CSS डाउनलोड करके लोकल में काम करते हैं, लेकिन submission के समय वे सिर्फ stylesheet में बदलाव कर सकते हैं
  • तैयार CSS फ़ाइल और संबंधित assets को अपने वेब सर्वर पर अपलोड करके लिंक के रूप में submit किया जाता है, और चुने गए काम CSS Zen Garden सर्वर पर deploy किए जाते हैं
  • प्रयोगात्मक फीचर्स की तुलना में व्यावहारिक CSS को प्राथमिकता दी जाती है, और valid CSS के साथ IE9+ तथा नवीनतम Chrome·Firefox·iOS·Android browsers में काम करना आवश्यक है

एक ही HTML को पूरी तरह अलग दिखाने वाला CSS प्रयोग

  • CSS Zen Garden, CSS की अभिव्यक्ति क्षमता दिखाने के लिए एक डेमो है
  • उपयोगकर्ता डिज़ाइन सूची में से अपनी पसंद का विकल्प चुनकर मौजूदा पेज पर संबंधित stylesheet लागू कर सकते हैं
  • इसका मुख्य constraint यह है कि HTML बदले बिना सिर्फ बाहरी CSS फ़ाइल बदली जाती है
    • उसी document structure को बनाए रखते हुए सिर्फ visual result बदलता है
    • यह दिखाता है कि डिज़ाइन और coding वेब की visual possibilities को कितनी दूर तक बढ़ा सकते हैं
  • इसे भागीदारी और प्रेरणा बढ़ाने वाले, तथा CSS से वास्तव में लागू किए जा सकने वाले नतीजों को साझा करने वाले learning project के रूप में देखा जा सकता है

भाग लेने का तरीका और submission flow

  • प्रतिभागी मजबूत visual design और CSS skill के आधार पर इस पेज को फिर से डिज़ाइन करते हैं
    • example files में comments हैं, इसलिए CSS शुरुआती भी इन्हें starting point की तरह इस्तेमाल कर सकते हैं
    • advanced tutorials और tips CSS Resource Guide में उपलब्ध हैं
  • काम sample HTML और CSS डाउनलोड करके उसकी लोकल कॉपी पर किया जा सकता है
  • submit करने के लिए तैयार CSS फ़ाइल और संबंधित assets को अपने नियंत्रण वाले वेब सर्वर पर अपलोड करने के बाद submission link के जरिए भेजना होता है
    • अधूरा काम submit करना अनुशंसित नहीं है
    • चुने गए submissions को CSS Zen Garden टीम डाउनलोड करके सर्वर पर deploy करती है
  • भागीदारी का पुरस्कार पहचान, प्रेरणा, और CSS की संभावनाएँ दिखाने वाली shared resource में योगदान देने में है

CSS आवश्यकताएँ और लाइसेंस

  • आवश्यकताएँ नवीनतम प्रयोगात्मक फीचर्स की बजाय functional और practical CSS पर केंद्रित हैं
    • जहाँ संभव हो, CSS 1 & 2 के उपयोग को प्राथमिकता दी जाती है
    • CSS 3 & 4 को व्यापक रूप से supported elements तक सीमित रखना चाहिए या मजबूत fallback देना चाहिए
    • CSS को validation पास करना चाहिए
    • नवीनतम user agents और mobile environments को देखते हुए, हर platform पर pixel-perfect एक जैसा layout पाना मुश्किल हो सकता है
    • डिज़ाइन कम से कम IE9+, नवीनतम Chrome, Firefox, iOS, Android browsers में काम करना चाहिए
  • submissions मौलिक artwork होने चाहिए और copyright कानून का सम्मान करना चाहिए
    • आपत्तिजनक सामग्री को न्यूनतम रखना चाहिए
    • garden-थीम वाले डिज़ाइन पहले से बहुत हैं, इसलिए अलग और रोचक visual themes को प्रोत्साहित किया जाता है
  • graphics का copyright submitter के पास रहता है, लेकिन CSS को साइट के समान Creative Commons BY-NC-SA 3.0 लाइसेंस के तहत जारी करना होगा ताकि दूसरे लोग सीखने के लिए इसका उपयोग कर सकें

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-04-28
Hacker News की राय

  • अगर आपने उस दौर में web development नहीं किया था जब यह बनाया जा रहा था, तो एक संदर्भ है जो आसानी से नज़र नहीं आता
    CSS से पहले layout बनाने के लिए table elements का grid की तरह दुरुपयोग किया जाता था, और images को टुकड़ों में काटकर हर cell में रखा जाता था। आज हमें इतना तो याद है, लेकिन उस समय CSS के खिलाफ विरोध काफी हद तक भुला दिया गया लगता है
    कई web developers मौजूदा स्थिति से संतुष्ट थे और CSS सीखना नहीं चाहते थे, और यह मिथक लंबे समय तक बना रहा कि “CSS से सिर्फ उबाऊ, चौकोर designs ही बन सकते हैं।” Dave Shea ने CSS Zen Garden के ज़रिए शानदार designs इकट्ठे करके दिखाए और उस दावे को लगभग खत्म ही कर दिया; जीत इतनी एकतरफा थी कि अब यह भी भूल जाना मज़ेदार है कि कभी ऐसी बहस हुई थी

    • शुरुआती CSS आज की तुलना में बहुत ज़्यादा सीमित था। border-radius भी लगभग 2011 के आसपास ही आया, और अपेक्षाकृत सरल https://90s.dev/ जैसी site को भी आधुनिक CSS में https://90s.dev/style.css के हिसाब से करीब 420 lines चाहिए
      nesting और खेल बदल देने वाले :has का भरपूर इस्तेमाल करने के बाद भी ऐसा है। उस समय CSS की बुनियादी सीमाओं के कारण, मुझे याद है कि ऐसे shapes लागू करने के लिए जिन्हें सहज रूप से नहीं बनाया जा सकता था, CSS और HTML structure दोनों बदलने पड़ते थे
    • शुरुआती दौर में table इस्तेमाल करने की वजह यह थी कि कई browsers में CSS से चीज़ों को ठीक से align कराना दुःस्वप्न था। महंगा दुःस्वप्न, और सिर्फ उन अच्छी funding वाले startups के लिए ठीक था जिनके पास HTML को बार-बार उलट-पुलट करने की गुंजाइश थी
    • सही समय धुंधला है, लेकिन एक दौर था जब नया-नया आया CSS ज्यादा जटिल layouts बनाने के लिए पर्याप्त नहीं था। flexbox नहीं था, grid की तो बात ही छोड़िए
      मेरे हिसाब से CSS Zen Garden उसी समय यह दिखाने के लिए था कि CSS से कितनी दूर तक जाया जा सकता है
    • table elements से grid बनाने में असल में इतना गलत क्या था, यह मैं कभी समझ नहीं पाया। कुछ applications में ही मायने रखने वाली “semantic HTML” वाली बात के अलावा खास कुछ समझ नहीं आता
    • CSS के खिलाफ विरोध याद नहीं है, लेकिन यह याद है कि font styling के लिए थोड़ा CSS इस्तेमाल करते हुए भी layout के लिए table इस्तेमाल करने वाली sites आम थीं। वह विरोध नहीं, व्यावहारिकता थी
      अगर stable और predictable grid चाहिए होता था तो table layout इस्तेमाल होता था, खासकर घने और जटिल layouts में। navigation ही table layout में हो, ऐसा भी आम था, और उस समय लक्ष्य pixel perfect होना था
      2000 के आसपास spacer elements याद हैं? आखिर वे टिक नहीं पाए, और pixel GIF ज्यादा आम और predictable था
      2014 में flexbox के लोकप्रिय होने से पहले CSS float layout प्लेट घुमाने जैसा था। खाली div और content वाले div अलग-अलग behave करते थे, जो तकलीफदेह था; वह समय वापस नहीं मिलेगा, लेकिन कम से कम पैसे मिले
      शुरुआती CSS आसानी से बढ़िया “Zen Garden” layouts देता था, यह विचार मेरे अनुभव से मेल नहीं खाता। हालांकि मैं मज़ेदार art sites नहीं, बल्कि information media sites बना रहा था

  • यह site पुरानी है, और अच्छे अर्थ में पुरानी है
    2000s में यह मेरे लिए culture shock थी, और इसने मुझे Microsoft ASP.NET से हटकर Linux पर apps बनाने की ओर ले गया। मुझे एहसास हुआ कि inline style parameters वाले “server controls” पूरी तरह गलत तरीका थे, कहें तो “anti-internet” तरीका
    Dojo JS बनाने वाले Alex Russell ने एक conference में ऐसा नज़रिया दिखाया, और मैं हैरान रह गया कि Microsoft channels से tech news लेते रहने के दौरान कितनी जानकारी मुझसे छूट गई थी
    कई सालों तक मेरे tools Web.py, HTML, JS, CSS जैसे ही रहे, फिर jQuery, Backbone, Underscore आए, और बाद में React और TypeScript ने फिर से नए “full-stack” को भारी-भरकम बना दिया जैसा लगता है

    • समझ नहीं आता कि ऐसी app ASP.NET में बनाने से रोकता क्या था। ASP.NET ऐसी चीज़ें रोकता नहीं था, और stylesheet बनाना व JS files अलग करना भी संभव था
      विडंबना यह है कि पुरानी चीज़ फिर से नई हो गई। Next.js की तरफ view state दोबारा बनाया जा रहा है, Tailwind inline styling करता है, और shadcn React components इस्तेमाल करता है—कुल मिलाकर लगभग एक पूरा चक्कर लग चुका है
    • अब Svelte है, जिसे थोड़ा “smart” full-stack कहा जा सकता है
    • वह अब भी online मौजूद है। पुराने अवशेष जैसा है, लेकिन https://www.ajaxtoolkit.net/ पर देखा जा सकता है। drag panel के बिना enterprise software होता ही नहीं था
      कुछ समय तक semantic markup और CSS आगे रहे, लेकिन आजकल के trends जांचने में भी रुचि नहीं बची। “JavaScript के अंदर HTML” (JSX) के आसपास ही मैंने दिलचस्पी छोड़ दी
    • मैंने ASP और PHP से शुरुआत की थी, लेकिन ASP.NET का स्वभाव ज्यादा यह था कि Visual Studio developers को घटिया web apps बनाने में मदद करे, और यह व्यापक अर्थों में web के अनुकूल नहीं था
      Linux पर जाने की जरूरत भी नहीं थी। IT department Linux desktop की अनुमति नहीं देता था, इसलिए सब Windows पर बनाया और Windows व Linux servers दोनों पर deploy किया

  • मुझे लगता है कि CSS Zen Garden का मूल यह था कि semantic HTML का पूरा उपयोग करने पर presentation और content को अलग करके पूरी तरह स्वतंत्र रूप से संभाला जा सकता है
    आज भी Zen Garden के स्तर तक यह संभव है, लेकिन सच कहें तो यह CSS की सीमाओं के भीतर ही चलना है। यह ज्यादा “CSS यह कर सकता है, इसलिए ऐसा design बनाते हैं” जैसा है, न कि “हमें ऐसा design चाहिए, इसलिए यह CSS इस्तेमाल करते हैं”
    बहुत से style choices ऐसे हैं जिनके लिए DOM को सीधे बदलना ही पड़ता है, और कुछ चीज़ें pure CSS से नहीं हो सकतीं। W3C discussions में भी मैंने “एक और div wrap कर दो तो हो जाएगा, फिर नई CSS property की जरूरत क्यों है” जैसी बातें देखी हैं
    image insert या replace करना सरल है, लेकिन style की जा सकने वाली SVG replacement असंभव है क्योंकि SVG nodes को सीधे HTML में डालना पड़ता है। आखिरकार HTML और JavaScript स्तर पर presentation और content structure के फैसले मिल जाते हैं, और छोटा design change भी पूरे stack को छूने लगता है

    • CSS community का वादा हमेशा यह रहा कि structure और presentation को अलग किया जा सकता है
      30 साल GUI लिखने के बाद, अब मुझे यकीन है कि वह रेखा खींचने की जगह गलत है। इसके बजाय intent को isolate करना चाहिए। मेरे project के Composites वही भूमिका निभा रहे हैं, और अगले हफ्ते उन्हें release करने को लेकर मैं बहुत उत्साहित हूं
    • यहां XSLT की एंट्री होती है
    • उल्टा, आजकल CSS बहुत powerful है, इसलिए हवा में महल नहीं बल्कि medium की विशेषताओं को ध्यान में रखने वाले कई designs सिर्फ CSS और HTML से भी साफ-सुथरे तरीके से implement किए जा सकते हैं

  • Zen Garden और Eric Meyer जैसे संसाधनों से CSS सीखने वाले के नाते Tailwind जैसे आधुनिक CSS टूल anti-pattern जैसे लगते हैं

    • पूरी तरह सहमत। Tailwind में वाकई बहुत सारी समस्याएँ हैं
      HTML स्टाइल जानकारी से ढक जाता है। HTML पढ़ना content और semantics देखने का काम होना चाहिए, न कि pl-16 pr-8 bg-olive-500 text-gray-700 को decode करके “शायद card header होगा” समझने का
      आजकल कहा जा सकता है कि लोग HTML पढ़ते ही नहीं, लेकिन जब ऐसे framework का इस्तेमाल करने वाला developer HTML को भयानक अव्यवस्था बना दे, तो उसे पढ़ेगा कौन। Framework classes बहुत ज़्यादा हो जाएँ तो HTML में content से ज़्यादा noise हो जाता है, इसलिए HTML पढ़ना खत्म होता है, और फिर developers और ज़्यादा classes और styles जोड़ते हैं—यह एक self-reinforcing cycle बन जाता है
      Web developers style duplication भी बहुत करते हैं। .button जैसी चीज़ के बजाय text-white rounded bg-gray-aaa जैसे combinations सैकड़ों जगह बिखरे रहते हैं। यह Tailwind की समस्या है या developers की, पता नहीं, लेकिन बड़े projects में समान UI elements के पूरे समूह की styling बदलनी हो तो किस element की कौन-सी inline style ढूँढनी है, यह whack-a-mole बन जाता है
    • ऐसे CSS tools उन लोगों को आकर्षक लगते हैं जिन्होंने web development तात्कालिक तरीके से सीखी है। शुरुआत में दिमाग में मौजूद design बनाना चाहते थे, इसलिए “header, text, image” से शुरू करके “center align कैसे करूँ?”, “रंग कैसे बदलूँ?”, “elements के बीच spacing?” जैसी चीज़ों से सीखा
      फिर CSS ideas का toolbox तो जल्दी बन जाता है, लेकिन CSS को सही से काम कराने वाली details छूट जाती हैं। position: absolute और transform से अजीब समस्याओं को bypass करना आता था, लेकिन block formatting context या box model की बारीकियाँ नहीं पता थीं
      अगर CSS knowledge सिर्फ कमजोर CSS knowledge पर चिपकाए गए band-aids का ढेर हो, तो बस ईंधन जलाने जैसा है। तब composable styles का toolbox लाकर कई CSS pitfalls से बचाने वाला तरीका आकर्षक लग सकता है
      मेरी सोच बदली HTML/CSS को बुनियाद से सिखाने वाली एक छोटी online book-format series ने। उसने सब कुछ first principles से समझाया और बताया कि चीज़ें ऐसी क्यों हैं; सिर्फ “div को center align करने के 10 तरीके” देकर खत्म नहीं किया। एक afternoon में पढ़कर web development को देखने का मेरा तरीका बदल गया, लेकिन किताब का नाम बिल्कुल याद नहीं। खास तौर पर यह वाक्य याद है: “display: block Word document जैसा है, और display: flex लोगों की उम्मीद के तरीके के ज़्यादा करीब है”
    • Tailwind code सचमुच बदसूरत है। मुझे पसंद नहीं। जब यह आया था, मैं बड़े sites पर काम कर रहा था, और CSS file की कुछ lines और एक class name के बजाय हजारों pages पर सैकड़ों style properties चिपकाने का विचार CSS की आधी खूबियों को उलट देने जैसा बड़ा regression लगा
    • सैकड़ों लोगों वाली company के standard के तौर पर मुझे लगता है यह ठीक काम करता है। अगर landing page पर हर चीज़ को one-off style करना चाहते हैं, तो वैसा ही करें

  • Tailwind और CSS-in-JS के अंधेरे दौर में थोड़ी-सी रोशनी जैसा है
    आज यह महसूस करना मुश्किल है कि करीब 20 साल पहले CSS Zen Garden कितना महत्वपूर्ण था

    • CSS-in-JS, Styled Components या Emotion तरीके की तरह, मुख्यतः code organization के लिए solution है। यह CSS के काम करने के तरीके को मूल रूप से नहीं बदलता
    • इसने मुझे CSS से प्यार करवा दिया, यह पक्का है। इसका मतलब यह नहीं कि मैं नहीं समझता कि बड़े projects में Tailwind आकर्षक क्यों है
    • जब CSS पहली बार सीख रहा था, तब उनकी किताब खरीदी थी। सच में वह अलग दौर था

  • पहले इस site ने मुझ पर बहुत बड़ा असर डाला था
    जो लोग नहीं जानते, उनके लिए: एक ही HTML content के लिए सिर्फ CSS और images से design submit किया जा सकता था। खास तौर पर प्रभावशाली examples ये थे
    https://csszengarden.com/202/
    https://csszengarden.com/189/
    https://csszengarden.com/177/
    https://csszengarden.com/136/
    https://csszengarden.com/206/
    एक design ऐसा भी था जिसमें scroll करने पर position: fixed वाली तलवार “page को बीच से काटती” थी, लेकिन लगता है अब वह list में नहीं है। एक और design याद है जिसमें page का सबसे ऊपर हिस्सा समुद्र-स्तर था, और नीचे scroll करने पर समुद्र के अंदर अंत में octopus, submarine या diver में से कोई एक होता था

    • मेरे लिए भी यही। उन designs को देखकर याद आता है कि आजकल web design कितना उबाऊ हो गया है

  • मैंने वहाँ दो designs डाले थे, और आज भी CSS reuse करने की अनुमति माँगने वाले emails मिलते हैं

  • आज HN पर CSS Zen Garden देखकर सच में बहुत अच्छा लगा। वह दौर अच्छा था
    लेकिन अब थोड़ा बड़बड़ाना पड़ेगा
    Tailwind और उसके जैसे CSS “frameworks”, और कुल मिलाकर आधुनिक software development में मुझे सबसे ज़्यादा चिंता इस बात की है कि लोग आधारभूत सिस्टम को न समझने पर धीरे-धीरे गर्व करने लगे हैं
    Tailwind तेज़ और सतही समाधान देता है। Utility classes को page पर चिपका दें, तो CSS असल में कैसे काम करता है यह सीखे बिना भी “काफी ठीक दिखने वाला” नतीजा मिल जाता है। HTML, content से ज़्यादा CSS classes वाला बिखरा हुआ ढांचा बन जाए, इसकी परवाह नहीं की जाती
    रवैया ऐसा है: “कैसे काम करता है, इससे क्या फर्क पड़ता है? सुंदर page बन गया न। सफलता!”
    यह सिर्फ Tailwind की समस्या नहीं है, बल्कि industry का बड़ा trend है। अज्ञानता का जश्न मनाना, और असली समझ बनाए बिना सिर्फ नतीजों की जल्दी करना
    कब से न जानना गर्व की बात बन गया? Depth और skill को optional, बल्कि कभी-कभी अवांछनीय मानना दुखद है

    • ज़्यादातर HTML कितना खराब होता है, यह देखकर झटका लगता है। अभी Twitter देखा, मेरी timeline में एक post में सिर्फ text का एक paragraph, एक image, और करीब 10 linked icons थे, लेकिन HTML ही 254 lines, 21.8kB था, और उसमें 104 nested divs और 860 से ज़्यादा classes थीं
      text content के characters से ज़्यादा classes थीं, और सिर्फ class names ही करीब 9kB थे। और यह timeline की हर post में दोहराया जाता है
      कुछ divs, कुछ classes और हर icon के लिए एक class, plus CSS की कुछ lines काफी होनी चाहिए। सच में, एक post के class name characters से भी कम characters में timeline की सभी posts को style किया जा सकता है
      समझ नहीं आता कि professional developers इतना बेहूदा फूला हुआ HTML कैसे बना सकते हैं
    • Software development समय के साथ abstraction layers जोड़ने का काम है। Assembly में कितने अच्छे हैं?
    • बात समझता हूँ, लेकिन मुझे नहीं लगता कि यह Tailwind पर लागू होता है। Tailwind classes सीधे CSS properties से map होती हैं, इसलिए अगर आप CSS नहीं समझते, तो असल में बहुत कुछ कर ही नहीं सकते

  • ऐसा लगता है जैसे अतीत से आया हो। मुझे CSS Zen Garden पसंद था, लेकिन उसका लक्ष्य और philosophy उस दुनिया के लिए थी जहाँ websites का मुख्य उद्देश्य documents उपलब्ध कराना था
    Rich media की दुनिया ने शायद 2000s के मध्य तक उस web vision को पीछे छोड़ दिया

    • Rich media से ज़्यादा मुझे लगता है कि web 100% marketing-driven हो गया है। नीचे scroll करें तो लगातार ads ही ads हैं
    • यह तो गंभीर downgrade है
      https://blog.danieljanus.pl/2019/10/07/web-of-documents/
    • आपने कहा “वह दुनिया जहाँ websites का मुख्य उद्देश्य documents उपलब्ध कराना था”, लेकिन हम अभी भी उसी दुनिया में रह रहे हैं। यह तंज नहीं है
      कुछ map applications को छोड़ दें, तो web का ज़्यादातर हिस्सा अभी भी कुछ पढ़ने के बारे में है, और इसके लिए इतनी सारी फालतू चीज़ों की ज़रूरत नहीं है। यह सिर्फ इसलिए ज़्यादा complex हो जाता है क्योंकि developers simplicity की जगह complexity पसंद करते हैं
    • क्या “modern media” सच में rich है? मुझे तो लगता है कि information density और signal-to-noise ratio उल्टा खराब ही हो रहे हैं

  • Garden के वापस आने की खुशी है। जब CSS-based web design cutting-edge था और लोग गहराई से nested tables की जगह गहराई से nested divs इस्तेमाल करने लगे थे, उस दौर में CSS Zen Garden और Spoono मेरी पसंदीदा websites में थे
    किताब भी अच्छी थी