98.css – पुराने यूज़र इंटरफ़ेस को वफादारी से पुनर्निर्मित करने वाला डिज़ाइन सिस्टम

 (jdan.github.io)
3 पॉइंट द्वारा GN⁺ 2024-11-07 | 1 टिप्पणियां | WhatsApp पर शेयर करें

  • Intro

    • 98.css, Windows 98 शैली का इंटरफ़ेस बनाने के लिए एक CSS लाइब्रेरी है.
    • यह लाइब्रेरी accessibility को मुख्य लक्ष्य मानती है और HTML के semantic उपयोग को प्रोत्साहित करती है.
    • यह JavaScript के बिना HTML को style करती है और विभिन्न frontend framework के साथ compatible है.

  • Components

    • Button
      • command button ऐसा control है जो user के क्लिक करने पर application से कोई विशेष काम करवाता है.
      • डिफ़ॉल्ट रूप से इसकी चौड़ाई 75px और ऊंचाई 23px होती है, और क्लिक करने पर border दबा हुआ दिखाई देता है.
    • Checkbox
      • checkbox स्वतंत्र या non-exclusive चयन को दर्शाता है.
      • accessibility बढ़ाने के लिए checkbox और label को साथ में इस्तेमाल किया जाता है.
    • OptionButton
      • option button एक radio button है, जिससे सीमित विकल्पों में से एक चुना जा सकता है.
      • एक ही group के option button को group करने के लिए वे समान name attribute साझा करते हैं.
    • GroupBox
      • group box एक आयताकार frame है, जिसका उपयोग controls के set को व्यवस्थित करने के लिए किया जाता है.
      • इसे fieldset tag से implement किया जाता है, और इसमें label जोड़ा जा सकता है.
    • TextBox
      • text box एक आयताकार control है, जिसमें user text दर्ज या edit कर सकता है.
      • multiple line support के लिए textarea element का उपयोग किया जाता है.
    • Slider
      • slider में adjustment range को परिभाषित करने वाली bar और current value दिखाने वाला indicator शामिल होता है.
      • vertical slider बनाने के लिए is-vertical class का उपयोग किया जाता है.
    • Dropdown
      • dropdown list box, सूची में से एक single item चुनने की सुविधा देता है.
      • इसे select और option element से implement किया जाता है.

  • Window

    • Title Bar
      • title bar विंडो के ऊपरी किनारे पर स्थित होती है और विंडो की सामग्री की पहचान कराती है.
      • इसे title-bar, title-bar-text, title-bar-controls class के साथ implement किया जाता है.
    • Window contents
      • विंडो को window class से बनाया जाता है, जो उसकी सीमा को परिभाषित करती है.
      • window-body class का उपयोग विंडो की सामग्री को render करने के लिए किया जाता है.
    • Status Bar
      • status bar विंडो के निचले हिस्से में होती है और वर्तमान स्थिति या अन्य जानकारी दिखाती है.
      • इसे status-bar class से implement किया जाता है.
    • TreeView
      • tree view control ऑब्जेक्ट्स को उनके hierarchical संबंध के अनुसार indented outline के रूप में दिखाता है.
      • इसे ul element और tree-view class के साथ implement किया जाता है.
    • Tabs
      • tab control, file cabinet या notebook के dividers जैसा होता है.
      • इसे menu element और [role=tablist] attribute के साथ implement किया जाता है.
    • TableView
      • table view को table element का उपयोग करके render किया जाता है.
      • sunken-panel class border और overflow container उपलब्ध कराती है.

  • Issues, Contributing, etc.

    • 98.css, MIT license का पालन करता है.
    • GitHub issues page पर bug report किया जा सकता है या नए bug की जानकारी दी जा सकती है.
    • open source योगदान का स्वागत है, और code review भी प्रदान किया जाता है.

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

1 टिप्पणियां

 
GN⁺ 2024-11-07
Hacker News की राय

  • एक उपयोगकर्ता ने ऐसा प्रोजेक्ट बनाया जिसमें अलग-अलग operating system के डिफ़ॉल्ट color themes शामिल हैं, और modern systems पर भी यह अच्छी तरह काम करे और देखने में अच्छा लगे, इसके लिए icons और symbols को SVG में फिर से बनाया गया

    • प्रोजेक्ट को Show HN पर पोस्ट किया गया था, लेकिन उसे ज़्यादा ध्यान नहीं मिला
    • उनका मानना है कि प्रोजेक्ट का शीर्षक शायद आकर्षक नहीं था

  • एक अन्य उपयोगकर्ता ने कहा कि यह प्रोजेक्ट burnout से उबरने का एक प्रोजेक्ट था, और उन्होंने हाल ही में इस बारे में अपने विचार लिखे

  • एक उपयोगकर्ता ने कई operating system से जुड़े CSS styles इकट्ठा किए हैं

    • इसमें The Sims, Windows 98, Windows XP, Windows 7, Edward Tufte style शामिल हैं

  • 98.css को Hacker News पर एक classic माना जाता है, और इस पर कई बार चर्चा हो चुकी है

    • HyperCard Simulator और Decker भी देखने लायक हैं

  • non-native DPI settings पर यह style ठीक से काम नहीं कर सकता, और browser console में एक खास code चलाकर इसे physical pixels के हिसाब से मिलाया जा सकता है

  • एक उपयोगकर्ता ने उल्लेख किया कि Windows 95 और Windows 98 में यह MS Sans Serif जैसा नहीं लगता

  • एक अन्य उपयोगकर्ता ने कहा कि botoxparty.github.io/XP.css और khang-nd.github.io/7.css को देखना उपयोगी होगा

  • 90 के दशक के उत्तरार्ध में Microsoft ने Windows desktop themes और colors के अनुरूप CSS colors उपलब्ध कराए थे, जिससे web UI को उपयोगकर्ता के desktop से मेल कराया जा सकता था

  • एक उपयोगकर्ता का तर्क है कि आज की UX/UI research और improvements की तुलना में पुराने styles बेहतर थे

    • वे ऐसे buttons, tabs और text fields को पसंद करते हैं जो साफ़ तौर पर दिखाई दें

  • एक उपयोगकर्ता ने 98.css source का उपयोग करके एक Obsidian theme बनाई थी, लेकिन वह अब बंद हो चुकी है