Show HN: जादूगरों के लिए मिनिमलिस्ट CSS, 'magick.css'

 (css.winterveil.net)
7 पॉइंट द्वारा GN⁺ 2024-03-24 | 1 टिप्पणियां | WhatsApp पर शेयर करें

MAGICK.CSS की बुनियादी बातें

  • magick.css एक उपयोग में आसान और समझने में सरल मिनिमलिस्ट (ज़्यादातर) classless CSS framework है.
  • यह एक single file से बना है, और सभी optional चीज़ों पर comments दिए गए हैं.
  • इसका लक्ष्य पठनीयता और जानकारी पहुँचाने की क्षमता को अधिकतम करते हुए एक सुरुचिपूर्ण और जादू जैसा चंचल रूप हासिल करना है.

MAGICK.CSS का उपयोग कैसे करें

  • magick.css को normalize.css के साथ इस्तेमाल करना बेहतर है.
  • CDN के ज़रिए HTML <head> में दो पंक्तियाँ जोड़कर इसे प्रोजेक्ट में लागू किया जा सकता है.
  • या magick.css फ़ाइल डाउनलोड करके उसे HTML <head> में शामिल किया जा सकता है.
  • JS प्रोजेक्ट्स में इसे npm install से इंस्टॉल करके कोड में import कर उपयोग किया जा सकता है.
  • HTML5 documents के साथ इस्तेमाल करने पर 99% मामलों में classes की ज़रूरत नहीं पड़ती, और कुछ शानदार features का उपयोग किया जा सकता है.

लेआउट

  • पेज को responsive और पढ़ने में आसान कॉलम में व्यवस्थित करने के लिए सारी सामग्री को <main> टैग में लपेटा जा सकता है, और लंबे कंटेंट को हिस्सों में बाँटने के लिए <section> टैग का उपयोग किया जा सकता है.
  • <aside> टैग का उपयोग आसपास की जानकारी जोड़ने के लिए किया जा सकता है, और sidenotes के ज़रिए बिंदुओं को विस्तार दिया जा सकता है या अतिरिक्त संदर्भ जोड़ा जा सकता है.

टाइपोग्राफी

  • यह magick.css द्वारा दी गई टाइपोग्राफी के उदाहरण दिखाता है.
  • <h4> से नीचे के headings styled नहीं होते, इसलिए ज़रूरत पड़ने पर उपयोगकर्ता स्वयं style लागू कर सकता है.

संरचित सामग्री

  • lists और tables को सरल रखा गया है ताकि वे सामग्री से ध्यान न भटकाएँ.

फ़ॉर्म और इनपुट

  • interactive elements को स्वतंत्र रूप से या फ़ॉर्म के हिस्से के रूप में उपयोग किया जा सकता है.
  • buttons, text input, checkboxes, radio buttons, fieldsets आदि के उदाहरण दिए गए हैं.

मीडिया और फ़िगर

  • image और video जैसे media elements को स्वतंत्र रूप से उपयोग किया जा सकता है, या उन्हें figure के रूप में पेश कर सामग्री में संरचना और सुंदरता जोड़ी जा सकती है तथा caption के ज़रिए संदर्भ जोड़ा जा सकता है.

कोड, उद्धरण और पूर्व-स्वरूपित सामग्री

  • code को inline या अलग block के रूप में दिखाया जा सकता है, और उद्धरण <blockquote> टैग का उपयोग करके जोड़े जा सकते हैं.

अतिरिक्त सुविधाएँ

  • sidenotes और automatic numbering जैसी अतिरिक्त सुविधाओं का उपयोग किया जा सकता है, लेकिन ये special classes मांगती हैं, इसलिए इन्हें magick.css की मुख्य सुविधाओं में शामिल नहीं किया गया है.

GN⁺ की राय

  • magick.css उपयोगकर्ताओं को CSS की जटिलता कम करने और web page design को सरल बनाने का एक तरीका देता है.
  • यह framework खास तौर पर documents या blog जैसे text-centric websites के लिए उपयुक्त हो सकता है और उपयोगकर्ताओं को content पर ध्यान केंद्रित करने में मदद करता है.
  • हालांकि, जटिल interactive features या dynamic web applications बनाना चाहने वाले developers के लिए यह सीमित हो सकता है.
  • समान सुविधाएँ देने वाले अन्य CSS frameworks में Bootstrap, Foundation, Bulma आदि शामिल हैं, और हर framework को खास use case और पसंद के अनुसार चुना जा सकता है.
  • magick.css अपनाते समय प्रोजेक्ट की design requirements और framework की सीमाओं पर विचार करना चाहिए, और सरलता तथा ease of use के बीच अच्छा संतुलन रखना चाहिए.

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

1 टिप्पणियां

 
GN⁺ 2024-03-24
Hacker News प्रतिक्रियाएँ

  • यह इस बात का अच्छा उदाहरण माना गया कि जब फ़ॉन्ट शैली के साथ अच्छी तरह मेल खाता है, तो वह इतना स्वाभाविक लगता है कि अलग से ध्यान ही नहीं खींचता।

    "फ़ॉन्ट इस बात का शानदार उदाहरण है कि वह शैली को कैसे पूरा करता है; यह इतना अच्छी तरह फिट बैठता है कि लगभग नज़र ही नहीं आता।"

  • डिज़ाइन सिस्टम और उसे प्रस्तुत करने के तरीके को सुंदर बताया गया, और line height व weight जैसे बारीक विवरणों पर दिया गया ध्यान भी पसंद आया। कोड में रुचि रखने वालों के लिए लिंक भी दिया गया। साथ ही, custom checkbox और radio button न होने से immersion टूटने की थोड़ी निराशा जताई गई, और कहा गया कि इससे ब्लॉग बनाने की प्रेरणा मिली।

    "सुंदर डिज़ाइन सिस्टम और बारीकियों पर ध्यान देने वाली प्रस्तुति की सराहना। custom checkbox और radio button की अनुपस्थिति खटकी। ब्लॉग बनाने की प्रेरणा मिली।"

  • एक साधारण उदाहरण में छोटी typo की ओर इशारा किया गया, जिसमें कहा गया कि header नहीं बल्कि main को बंद किया जाना चाहिए।

    "उदाहरण कोड में header की जगह main को बंद किया जाना चाहिए — ऐसी typo की ओर इशारा।"

  • LaTeX दस्तावेज़ जैसा एहसास देने वाली व्यक्तिगत साइटों के आकर्षण का ज़िक्र किया गया, और पुराने विश्वविद्यालय प्रोफेसरों की बेहद मिनिमल वेबसाइट शैली को शानदार बताया गया। साथ ही इच्छा जताई गई कि व्यक्तिगत ब्लॉग और लोकप्रिय हों।

    "LaTeX दस्तावेज़ शैली और अत्यंत मिनिमल वेबसाइटों के आकर्षण का उल्लेख। व्यक्तिगत ब्लॉग अधिक लोकप्रिय हों — ऐसी इच्छा।"

  • यह सिफारिश की गई कि शायद Tufte CSS पसंद आए, और इसके साथ संबंधित लिंक भी साझा किया गया।

    "Tufte CSS की सिफारिश करने वाली राय और संबंधित लिंक।"

  • कहा गया कि बड़े अक्षरों में script font पढ़ने-योग्यता के लिए घातक है, और ज़ोर देने के लिए capital letters से बचते हुए size, weight और italic का उपयोग करने की सलाह दी गई।

    "बड़े अक्षरों वाले script font की readability समस्या की ओर इशारा। ज़ोर देने के विकल्प के रूप में size, weight और italic के उपयोग की सलाह।"

  • फ़ॉन्ट को बहुत पढ़ने में आसान, प्यारा, लेकिन ज़रूरत से ज़्यादा नहीं बताया गया — यानी आकर्षक होने के बावजूद संतुलित।

    "फ़ॉन्ट की readability और आकर्षण पर सकारात्मक प्रतिक्रिया।"

  • यह राय भी आई कि जब remote font ब्लॉक हो जाते हैं, तो टेक्स्ट Comic Sans में render होता है, जिससे अच्छा प्रभाव नहीं पड़ता।

    "remote font ब्लॉक होने पर Comic Sans में render होने को लेकर नकारात्मक राय।"

  • इच्छा जताई गई कि और अधिक minimalist CSS framework उपलब्ध हों, खासकर क्योंकि अलग पहचान वाली शैलियाँ ढूँढना मुश्किल है।

    "अलग पहचान वाले minimalist CSS framework की माँग का संकेत।"

  • डिज़ाइन पसंद आने की बात कही गई, और चीनी अनुवाद देखने के बाद यह जिज्ञासा जताई गई कि चीनी पढ़ सकने वाले लोग इसे कैसे देखते हैं। यह भी कहा गया कि अंग्रेज़ी की तुलना में फ़ॉन्ट विकल्प सीमित लगते हैं, और यह भी नोट किया गया कि तस्वीरें भी अलग इस्तेमाल की गई हैं।

    "डिज़ाइन के प्रति पसंद और चीनी अनुवाद की पठनीयता को लेकर जिज्ञासा। फ़ॉन्ट विकल्पों की सीमितता और अलग तस्वीरों के उपयोग का उल्लेख।"