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

• magick.css एक single-file, लगभग classless CSS framework है, जिसका लक्ष्य पढ़ने में आसान और जानकारी पहुँचाने वाले “जादूगर की नोटबुक” जैसे web document style देना है
• यह सभी screen size पर काम करता है और JavaScript के बिना इस्तेमाल किया जा सकता है, इसलिए static documents या हल्के HTML pages पर सीधे लागू करना आसान है
• इसे CDN, direct file include, या npm import के ज़रिए install किया जा सकता है, और normalize.css के साथ इस्तेमाल करने की configuration भी बताई गई है
• इसकी बुनियादी संरचना और पर केंद्रित एक पढ़ने-योग्य column है, और `` तथा sidenote से main text के बगल में अतिरिक्त व्याख्या जोड़ी जा सकती है
• यह अधिकांश HTML basic elements को style करता है, लेकिन sidenote और code line numbers जैसे ऐसे features जिनके लिए structure चाहिए, वे अलग classes के रूप में दिए गए हैं

---

magick.css के लक्ष्य और प्रकृति

• magick.css एक minimal और अधिकतर classless CSS framework है
• यह एक single file में आता है, और CSS के अंदर comments के ज़रिए design choices के कारणों को समझा जा सकता है
• visual रूप से यह elegant लेकिन playful जादुई माहौल बनाता है, और readability व information delivery को प्राथमिकता देता है
• यह सभी devices और screen sizes पर रूप और functionality बनाए रखता है और JavaScript के बिना काम करता है
• इसे LaTeX, पुराने TTRPG rulebooks, concrete.css, Tufte CSS, और brutalism की “usability as design” ethic से प्रेरणा मिली है

installation और उपयोग का तरीका

• सबसे जल्दी देखने के लिए HTML `` में दो CDN stylesheets जोड़ें

• repository से magick.css file डाउनलोड करके इसे सामान्य CSS की तरह include भी किया जा सकता है

• JavaScript project में npm से install करने के बाद import करें

npm install normalize.css magick.css

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

• इसकी 99% classless संरचना इसे मौजूदा HTML5 documents पर भी आसानी से लागू करने योग्य बनाती है

पढ़ाई-केंद्रित layout

• responsive column बनाने के लिए पूरे content को में wrap करने और लंबे लेख को में बाँटने की recommendation दी गई है
• सामान्य document structure में के अंदर, कई , और रखे जाते हैं
• इस structure का पालन किए बिना भी magick.css को केवल typography और styled components के लिए इस्तेमाल किया जा सकता है
• अतिरिक्त जानकारी को `` tag से दिखाया जाता है
• text के बीच extra context जोड़ना हो तो sidenote का उपयोग करें, और numbering अपने-आप हो जाती है

बुनियादी HTML elements की styling

• typography में headings, paragraphs, links, emphasis, underline, small text, inline code आदि शामिल हैं
• `` से नीचे के headings को magick.css style नहीं करता
  • इसका मानना है कि lower-level headings अक्सर hierarchy की जगह विशेष उपयोगों के लिए होते हैं
  • ज़रूरत होने पर users उन्हें खुद style कर सकते हैं
• lists को content में बाधा न डालने के लिए सरल रखा गया है
  • unordered lists
  • ordered lists
  • description lists
• tables के लिए साफ़ और संक्षिप्त styling इस्तेमाल की गई है ताकि focus data पर रहे
• forms और input elements को अकेले या form के भीतर इस्तेमाल किया जा सकता है
  • text input के उपयोग बहुत विविध होते हैं, इसलिए size या placement पर कड़ा मत नहीं रखा गया है
  • checkbox और radio button के label के input के बाद आने की अपेक्षा की जाती है
  • form को handwritten paper note जैसा feel देकर user का ध्यान खींचने के लिए style किया गया है

media, code, और quotes

• images और videos को अकेले रखा जा सकता है या `` के अंदर caption के साथ दिखाया जा सकता है
• standalone `` पर्याप्त जगह होने पर natural size में दिखता है, और खिंचता या विकृत नहीं होता
• और का उपयोग media को अधिक प्रमुख दिखाने और context जोड़ने के लिए किया जा सकता है
• code inline होने पर इस्तेमाल करें, और बड़े code blocks के लिए के अंदर `` का structure उपयोग करें
• code snippets को भी figure के रूप में दिखाया जा सकता है
• quotations के लिए `` का उपयोग होता है
  • source attribution को blockquote के अंदर `` से जोड़ा जा सकता है
  • कविता जैसे ऐसे text जिनमें formatting महत्वपूर्ण हो, उन्हें `` में wrap किया जा सकता है

अलग classes से इस्तेमाल होने वाले features

• कुछ features के लिए विशेष class चाहिए, इसलिए उन्हें magick.css के मूल classless व्यवहार से अलग रखा गया है
• text में sidenote जोड़ने के लिए reference position और sidenote body दोनों साथ में जोड़ने होते हैं

Sidenote Content.

• mobile devices पर sidenote main column के भीतर आ जाता है
• code या pre blocks में line numbers दिखाने के लिए हर line number वाले `` insert करने होते हैं
• line number insertion manual, JavaScript, या server-side processing में से किसी भी तरीके से किया जा सकता है

project links

• पसंद आए तो GitHub पर star दे सकते हैं
• दूसरे कामों में रुचि हो तो Discord join कर सकते हैं

[GN⁺]

Hacker News टिप्पणियाँ

• यह वाकई एक खूबसूरत design system है, और इसे दिखाने का तरीका भी शानदार है
  input field की handwriting style और organic serif का मेल, साथ ही balanced line height और weight तक पर ध्यान दिया गया है, यह अच्छा लगा
  जिन लोगों की रुचि हो उनके लिए code: https://github.com/wintermute-cell/magick.css/blob/master/ma...
  काश इसमें custom checkbox और radio button भी होते। अभी वही दो चीज़ें immersion तोड़ती हैं, बाकी सब सच में बेहतरीन है। हो सकता है यह आखिरकार मुझे वह ब्लॉग बनाने पर मजबूर कर दे जिसके बारे में मैं लंबे समय से सोच रहा था
• यह एक अच्छा उदाहरण है कि font मनचाहे style के साथ कितनी अच्छी तरह फिट बैठ सकता है
  यह इतना अच्छी तरह मेल खाता है कि लगभग ध्यान ही नहीं जाता
  • यह font मुझे इतना अच्छा नहीं लगता। ठीक-ठीक क्यों, यह नहीं पता, लेकिन पढ़ने में बहुत मुश्किल तो नहीं है, फिर भी दूसरे आम fonts जितना सहज नहीं लगता
  • style तो फिट बैठता है, लेकिन मुझे इसे पढ़ना बहुत कठिन लगता है
• simple example में एक छोटा typo है
  closing tag main नहीं बल्कि header है, इस पर ध्यान देना चाहिए
  • जोड़ना चाहूँगा कि अगर यह CSS दिखाने वाली साइट है, तो साथ में unminified CSS भी देना अच्छा होगा
    मैं जल्दी से देखना चाहता था कि यह कैसा दिखता है, लेकिन source तक पहुँचने के लिए कुछ अतिरिक्त steps से गुजरना पड़ा। कम से कम unprocessed form के लिए सीधे clickable link तो होना ही चाहिए
  • page के main content के लिए main tag इस्तेमाल करें, और comment section या tags जैसे related लेकिन secondary content के लिए अलग tag इस्तेमाल करें
  • semantics के हिसाब से HEADER और FOOTER, MAIN tag के पहले और बाद में होने चाहिए
• अगर इस style में LaTeX document जैसा एहसास भी मिला दिया जाए, तो यह मेरे personal site के लिए बिल्कुल वैसा ही माहौल बनाता है जैसा मैं चाहता था
  अजीब तरह से, ऐसा एहसास मुझे सच में बहुत आकर्षित करता है
  ऊपर से पुराने university professors की websites जैसी लगभग सिर्फ HTML वाली बेहद minimalist look भी शानदार लगती है
  काश personal blogs ज़्यादा लोकप्रिय होते
• अगर आपको इस तरह का style पसंद है, तो Tufte CSS भी पसंद आ सकता है: https://edwardtufte.github.io/tufte-css/
  • Tufte का image और text की घनिष्ठ एकीकरण पर ज़ोर देना मुझे पसंद है। मुझे यह एक समझदारी भरा style choice लगता है, भले ही कुछ TeX purists इसे मानने से हिचकें
    कम से कम मेरी writing में, चाहे technical writing हो या नहीं, image और text एक ही continuous narrative बनाते हैं। images को इधर-उधर rearrange करना और कहीं और रख देना उतना ही बेमानी है जितना paragraphs के साथ ऐसा करना
• काश script font को uppercase में इस्तेमाल न किया गया होता। readability के लिए यह घातक है
  सच कहूँ तो किसी भी चीज़ को पूरी तरह uppercase में लिखना बेहतर नहीं होता। यह underline की तरह typewriter era से आई emphasis technique है, जब उस समय सिर्फ एक ही font इस्तेमाल किया जा सकता था
  uppercase अक्षर एक-दूसरे से बहुत मिलते-जुलते हैं। उनमें letter height का variation नहीं होता, इसलिए आँखों के लिए पढ़ना कठिन हो जाता है। mixed case में y, p, j जैसे नीचे जाने वाले अक्षर और b, d, t जैसे ऊपर उठने वाले अक्षर होते हैं, जिससे variation आता है और पहचानना आसान होता है
  emphasis के लिए size, weight, italic इस्तेमाल करना बेहतर है
  • सही बात है, यह readability rule तोड़ता है, इसलिए जितना पढ़ा जा सकता है उससे कठिन बन जाता है
    लेकिन इसी वजह से एक अलग style भी बनता है
    फिर भी मुझे लगता है कि यह मुझे पसंद है
• काश और ज़्यादा minimal CSS frameworks होते जिनकी अपनी distinct personality होती
  अच्छे general-purpose frameworks तो आसानी से मिल जाते हैं, लेकिन अगर कोई स्पष्ट flavor चाहिए तो उसे ढूँढना कहीं ज़्यादा मुश्किल है
  • Tufte CSS आज़माने लायक है: https://edwardtufte.github.io/tufte-css/
• अगर remote fonts block हो जाएँ, तो text Comic Sans में render होता है। यह अच्छा नहीं दिखता
  • Comic Sans से नफ़रत अब थोड़ी पुरानी लगती है
    https://www.mcsweeneys.net/articles/im-comic-sans-asshole
  • अगर web page की font selection को ही block कर दूँ, तो यह मेरी पसंद के font में render होता है, लेकिन font weight कम हो जाता है और text size व line height थोड़ी बढ़ जाती है
    खासकर कम weight जब dark theme के साथ जुड़ता है, तो text पढ़ना काफ़ी असुविधाजनक हो जाता है
  • अभी एहसास हुआ कि मेरी current settings Google Fonts को block नहीं कर रहीं, और इससे थोड़ी झुंझलाहट हो रही है। आम तौर पर मैं ऐसी चीज़ों को /etc/hosts स्तर पर block करता हूँ
• हर CSS framework और design system को text input field से इतनी नफ़रत क्यों होती है?
  सामान्य समझदारी से हल निकालने के बजाय Google ने आखिरकार 800 लोगों पर user research किया और इस निष्कर्ष पर पहुँचा कि “text input field को text input field जैसा दिखना चाहिए”: https://medium.com/google-design/the-evolution-of-material-d...
• ज़्यादातर classes की ज़रूरत न पड़ने वाले CSS framework का विचार अच्छा है
  मैंने पहले ऐसा एक बनाया था, लेकिन शायद यह इतना अच्छा नहीं होगा: https://elementcss.neocities.org
  • सच कहूँ तो Element वही classless framework है जिसे मैं हमेशा इस्तेमाल करता हूँ। इसे बनाने के लिए धन्यवाद