98.css - Windows 98 UI को दोबारा बनाने वाली CSS लाइब्रेरी

 (jdan.github.io)
1 पॉइंट द्वारा GN⁺ 3 시간 전 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • 98.css semantic HTML और accessibility के आधार पर Windows 98 जैसा दिखने वाला वेब इंटरफेस लागू करने वाला CSS design system है
  • JavaScript के बिना HTML पर सिर्फ styles लागू करता है, इसलिए React और vanilla JavaScript समेत अलग-अलग frontend environments में इस्तेमाल किया जा सकता है
  • buttons, input fields और selection controls से लेकर windows, tabs, trees, tables और progress bars तक व्यापक Windows 98 UI components देता है
  • label linking, aria-label और ARIA roles को support करता है, और default appearance बनाए रखते हुए spacing या colors जैसे styles को override भी किया जा सकता है
  • इसे unpkg, npm और GitHub Releases से install किया जा सकता है और यह MIT license के तहत distributed है, इसलिए modifications और open source contributions संभव हैं

प्रोजेक्ट संरचना और installation

  • 98.css Windows 98 interface को ईमानदारी से recreate करने वाली CSS library है
  • यह semantic HTML पर आधारित है: buttons के लिए <button>, input elements के लिए <label>, और icon buttons के लिए aria-label इस्तेमाल करता है
  • इसके मुख्य लक्ष्यों में accessibility शामिल है, और keyboard navigation व assistive technologies के उपयोग को ध्यान में रखता है
  • JavaScript के बिना केवल CSS से HTML को style करता है, इसलिए किसी खास frontend framework पर निर्भर नहीं है
  • सबसे तेज़ इस्तेमाल का तरीका unpkg से stylesheet लोड करना है
<link rel="stylesheet" href="https://unpkg.com/98.css">;
  • इसे GitHub Releases या npm से भी install किया जा सकता है
npm install 98.css
  • default appearance बनाए रखते हुए button spacing या input label color जैसे individual styles को स्वतंत्र रूप से override किया जा सकता है

बुनियादी selection controls

  • Buttons

    • standard button का size 75×23px है और इसमें raised outer/inner borders व default 12px horizontal spacing होती है
    • <button>, input[type=submit], input[type=reset] को support करता है
    • default class active window में Enter key दबाने पर चलने वाली default action को दर्शाती है
    • click करने पर raised border pressed-in रूप में बदल जाता है, और disabled button border बनाए रखते हुए label को faded दिखाता है
    • focus button content के अंदर 4px position पर dotted border से दिखाया जाता है

  • Checkboxes और radio buttons

    • checkbox independent या non-exclusive selection दिखाता है, और select होने पर sunken panel के अंदर check icon दिखता है
    • checkbox के बाद input के id की ओर इशारा करने वाले for attribute वाला <label> अनिवार्य है
    • इस linking से assistive technologies input को पहचान सकती हैं
    • Tab key navigation और पूरे label पर click support करता है
    • standard checked, disabled attributes से selected और disabled states specify किए जाते हैं
    • कई inputs को field-row container में wrap कर consistent spacing लागू की जाती है
    • radio button limited set में से केवल एक item चुनने वाला control है और input[type=radio] से बनाया जाता है
    • एक ही name attribute देकर इन्हें mutually exclusive group में बांधा जाता है, और checkbox की तरह labels व field-row इस्तेमाल किए जाते हैं

  • Group boxes

    • fieldset कई controls को rectangular frame में group करता है और sunken outer border व raised inner border से carved box जैसा look बनाता है
    • अंदर legend रखने पर group label दिखाया जा सकता है

Text input और value selection

  • Text boxes

    • single-line input input[type=text] से, और multi-line input textarea से बनाया जाता है
    • input और उससे सही तरह linked label को field-row में साथ wrap कर horizontal layout बनाया जाता है
    • field-row-stacked इस्तेमाल करने पर label को input element के ऊपर vertical रूप से रखा जा सकता है
    • standard HTML के disabled, value attributes से disabled state और initial value specify किए जाते हैं

  • Sliders

    • slider adjustment range और current value दिखाता है और input[type=range] से render होता है
    • has-box-indicator class default indicator को box-style indicator से replace करती है
    • slider को is-vertical class लगे div में wrap करने पर इसे vertical direction में दिखाया जा सकता है
    • vertical slider length input की width और container div की height से adjust की जाती है

  • Dropdowns

    • select और option से list में से एक item चुनने वाला dropdown बनाया जाता है
    • पहला item default selected होता है, और किसी दूसरे option में selected attribute specify करके initial selection बदला जा सकता है

Windows 98 style windows

  • Title bar

    • title bar window के top पर full width में रखा जाता है, content की पहचान करता है और आम window command buttons शामिल करता है
    • यह तीन classes title-bar, title-bar-text, title-bar-controls से बना होता है
    • command button के aria-label में Minimize, Maximize, Restore, Help, Close इस्तेमाल किए जा सकते हैं
    • aria-label button का intent assistive technologies तक पहुंचाता है और command के अनुरूप icon style भी लागू करता है
    • अलग से minimize, maximize, restore, help, close classes भी उपलब्ध हैं
    • aria-label text और visual style को अलग करके multilingual/localization प्रक्रिया में rendering या accessibility issues न हों, इसका ध्यान रखता है
    • जिस window को maximize नहीं किया जा सकता, उसके Maximize button पर disabled specify किया जाता है
    • title-bar inactive से कई windows में inactive state वाले title bar को दिखाया जाता है

  • Window body और status bar

    • window class raised outer/inner borders और spacing देती है, और container width specify करके window size बदला जा सकता है
    • title bar के नीचे का actual content window-body में रखा जाता है
    • window के नीचे status bar current state या keyboard state जैसी contextual information दिखाता है
    • पूरे container के लिए status-bar, और हर text area के लिए status-bar-field इस्तेमाल होता है
    • status bar का उपयोग करके Task Manager, Notepad, File Explorer जैसे interfaces बनाए जा सकते हैं

Hierarchy, tabs और table interfaces

  • Tree view

    • ul.tree-view objects के बीच logical hierarchy को indented list के रूप में दिखाता है
    • nested child ul जोड़ने पर dotted borders और indentation लागू होते हैं, और internal li में अपनी पसंद का content रखा जा सकता है
    • expand/collapse हो सकने वाली hierarchy child list को details element के अंदर रखकर बनाई जाती है

  • Tabs

    • tab list menu[role=tablist] से, और हर tab li[role=tab] से लिखा जाता है
    • active tab पर aria-selected="true" specify किया जाता है
    • 98.css में tab switching logic नहीं है, इसलिए state changes user JavaScript से manage करने होंगे
    • tab content role="tabpanel" specified window area में रखा जाता है
    • menu में multirows class जोड़ने पर multiple rows वाले tabs बनाए जा सकते हैं

  • Table view

    • HTML table को div.sunken-panel में wrap करके उपयुक्त borders और scrollable area बनाया जाता है
    • table.interactive body rows पर mouse hover होने पर pointer cursor दिखाता है
    • selected row पर highlighted class लागू की जाती है, और actual row selection behavior अलग script से implement किया जाता है

Progress state और generic borders

  • Progress bar

    • लंबे task का completion ratio progress-indicator के अंदर progress-indicator-bar रखकर और width से specify किया जाता है
    • default form solid bar है, और segmented class जोड़ने पर यह segmented progress bar में बदल जाता है

  • Field borders

    • text boxes, checkboxes, dropdowns, spin boxes और list boxes sunken outer/inner borders वाले field style का उपयोग करते हैं
    • normal fields अंदर button highlight color का इस्तेमाल करते हैं, और read-only या disabled text fields button surface color का उपयोग करते हैं
    • status fields में केवल sunken outer border लागू होता है, और इन्हें status bars या dynamically changing read-only content में उपयोग किया जाता है
    • forms के अलावा work areas और dynamic content में भी इस्तेमाल हो सकें, इसके लिए तीन generic classes दी गई हैं
      • field-border: normal work area
      • field-border-disabled: disabled work area
      • status-field-border: dynamic status content
    • ये classes केवल borders, background color और minimum spacing define करती हैं, इसलिए आमतौर पर additional padding खुद specify करना पड़ता है

License और contribution

  • 98.css MIT license के तहत distributed है
  • bugs की जांच और reports GitHub Issues पर की जा सकती हैं
  • pull requests स्वीकार किए जाते हैं और code review दिया जाता है; खास तौर पर open source में पहली बार contribution करने वालों का स्वागत है

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

1 टिप्पणियां

 
GN⁺ 3 시간 전
Hacker News की राय

  • यह प्रोजेक्ट burnout recovery की प्रक्रिया में बनाया गया था, और आज भी इसके लिए खास लगाव है
    https://notes.jordanscales.com/98-css-reflections

    • बचपन में SimGolf पर वाकई बहुत समय बिताया था; फिर कई साल तक भूल गया और लंबे समय बाद nostalgia महसूस हुआ
    • यह छोटी वेबसाइट https://www.mathsheets.net/ पर बिल्कुल फिट बैठा
      usability और nostalgia का संतुलन इतना बढ़िया था कि इसे दूसरे projects में भी और इस्तेमाल करने का मन हुआ
    • https://chiptune.app के लिए Winamp theme बनाते समय 98.css को starting point बनाया था, और इसे modify व extend करना बहुत आसान था
    • पिछले कुछ महीनों से BeOS से प्रेरित retro-style CSS library https://beta.mtechnic.me बना रहा हूं
      research करते हुए 98.css के creator का portfolio भी मिला; music taste तक बिल्कुल एक जैसा था, इसलिए जिज्ञासा हुई कि क्या retro libraries बनाने वालों की पसंद-नापसंद सबकी मिलती-जुलती होती है
    • 98.css को लंबे समय से खुद actively develop न करके, repository में अच्छे pull requests देखकर, author user के computer पर cryptocurrency mine करने वाला व्यक्ति तो नहीं है यह verify करके उसे पूरे commit अधिकार दे देने वाला management तरीका शानदार है

  • Flat design हास्यास्पद है, फिर भी किसी को इससे बहुत पैसा कमाने के बाद सभी भेड़ों की तरह उसके पीछे चल पड़े हैं
    लगभग 20 साल बाद भी इससे बाहर न निकल पाना अब हैरान नहीं करता; पुराने UI में multi-line tabs जिस तरह स्वाभाविक रूप से काम करते थे, वह सचमुच बेहतरीन था

    • Flat या semi-flat design, shadows, outlines और contrast जैसे visual separation elements का सही इस्तेमाल करे तो बहुत अच्छा हो सकता है
      "कम ही बेहतर है" वाली philosophy बस Apple, Google और उनके imitators के over-saturated toy-clay जैसे UI से टकराती है
    • अगर page पर कोई चीज़ ढूंढने में समय ज्यादा लगे, तो कंपनियों के लिए महत्वपूर्ण page dwell time बढ़ता है; नतीजा यही होना था
    • Win9x और 3.x में button edges, window borders, tabs और text boxes पर सूक्ष्म 3D cues और gradients होते थे, लेकिन समय के साथ सब लगातार flat होता गया, और अब यह खोई हुई कला जैसा लगता है
    • पुराने UI में जो चीज़ सबसे ज्यादा नापसंद थी, वह multi-line tabs थे
      वे कीमती vertical space लेते थे, और click करने पर हर बार row की position बदल जाती थी जिससे confusion होता था; अगर कोई button state दिखाता है, तो click के बाद उसे हिलना नहीं चाहिए
    • सिर्फ flat design ही नहीं, colors का इस्तेमाल भी कम हो गया है
      लाखों रंग दिखाने वाले monitors और graphics cards होने के बावजूद उनका उपयोग नहीं किया जाता; इसे coloring book जैसा बनाने की जरूरत नहीं, लेकिन Windows 10 और 11 उदास-से लगते हैं

  • 98.css परिवार में हमेशा खटकने वाली बात यह थी कि MS Sans Serif थोड़ा-सा गलत है, और आखिरकार इसे खुद ठीक करने का फैसला किया
    https://github.com/jdan/98.css/pull/230

  • यह project पहले भी कई बार popular हो चुका है: 2024 में 471 points·93 comments https://news.ycombinator.com/item?id=42056918, 2022 में 606 points·182 comments https://news.ycombinator.com/item?id=33310554, 2020 में 838 points·211 comments https://news.ycombinator.com/item?id=22940564

  • इस style को लागू करने वाली वेबसाइट बनाना चाहता हूं, लेकिन समझ नहीं आ रहा कि यह कहां फिट बैठेगी
    Linux को Windows XP जैसा दिखाने वाला XFCE-winxp-tc भी शानदार है। Chicago95 काफी जाना-पहचाना है, लेकिन अगर 2004 वाला माहौल चाहिए तो https://github.com/rozniak/xfce-winxp-tc अच्छी तरह फिट बैठता है

    • इंटरनेट पर फिट बैठने की कोई वजह जरूरी नहीं होती, बस करने का मन होना काफी है
    • XFCE·GTK themes जब pixel-perfect होने का दावा करते हैं, तब भी असल में वैसे नहीं होते—यह बात हमेशा खलती रही
      पता नहीं ऐसा कानूनी चिंताओं की वजह से है या नहीं

  • disabled buttons को हटाकर बिल्कुल न दिखाने का तरीका आज के सबसे भ्रमित करने वाले UI trends में से एक है, और grey button देखकर उल्टा सुकून मिलता है

    • Microsoft की पुरानी guidelines disabled controls को काफी बारीकी से संभालती थीं
      किसी control को तभी बंद करना चाहिए जब user उसके लागू हो सकने की उम्मीद करता हो और disabled होने की वजह आसानी से समझ सके; अगर उसे enable करने का कोई तरीका नहीं है या user उसके लागू होने की उम्मीद नहीं करेगा, तो उसे हटा देना चाहिए। अगर वजह आसानी से समझना मुश्किल हो, तो उसे active रहने देना और गलत इस्तेमाल पर उपयोगी error message दिखाना बेहतर है
      https://learn.microsoft.com/en-us/windows/win32/uxguide/top-...
      लेकिन modern guidelines https://learn.microsoft.com/en-us/windows/apps/develop/ui/co... में ऐसी सूक्ष्म बातों तो दूर, disabled button खुद भी cover नहीं होता
    • जैसे admin rights न होना या केवल view permission होना—ऐसी features जिन्हें user शुरू से ही चला नहीं सकता, उनके buttons छिपाना सही है
      वहीं अगर चलाने की permission है लेकिन current mode या state की वजह से संभव नहीं है, तो grey button दिखाना चाहिए। forms में grey button को भी clickable रखना और बताना जरूरी है कि क्या गलत है। एक बड़ी airline में ऐसी guidance न होने के कारण check-in पूरा नहीं कर पाया
      mouse-hover help और छोटा ? indicator गायब हो गए हैं, और लगता है हर software मानकर चलता है कि user पहले दिन से ही उसका इस्तेमाल जानता है

  • https://ka.ge 98.css से बनी एक personal site है, जिसने 1MB से कम में Windows 98 desktop environment को pixel-perfect और सच में काम करने वाला रूप देकर recreate किया है

  • multi-line tabs example में tabs click करने पर असली Windows की तरह randomly अपनी position नहीं बदलते, यह थोड़ा खलता है

  • operating system के हर नए version के साथ UI designers को functionally गैर-जरूरी, ज्यादा resources खाने वाले, धीमे और unstable changes को भी improvement के रूप में package करना पड़ता था

    • less faster expression देखकर लगता है उन UI designers ने इस comment में भी हाथ लगाया है

  • Windows 98 UI user experience की peak भी नहीं है, फिर ऐसी recreation work पर इतना focus क्यों है, समझना मुश्किल है
    आज की bloated हालत technologies और abstraction layers की परतों पर परतें चढ़ने का नतीजा है, इसलिए अच्छे user experience के लिए जरूरी तत्वों को समझना और न्यूनतम technology components ढूंढना ही मुख्य बात है

    • सही कहें तो Windows 2000 UI design की peak था और उसके बाद लगातार गिरावट आई
      rounded corners और floating whitespace इसके बड़े उदाहरण हैं, और macOS व web designers के असर ने usability को नुकसान पहुंचाया