Cerne v0.1

शुरुआत से बना एक पूरा डिज़ाइन सिस्टम, बिना किसी बाहरी निर्भरता के

Cerne एक स्व-निहित CSS + JS फ्रेमवर्क है — कोई CDN नहीं, कोई jQuery नहीं, प्रोडक्शन में कोई अनिवार्य बिल्ड नहीं। इसे कई डोमेन को एक ही टोकन और कंपोनेंट सिस्टम से सर्व करने के लिए डिज़ाइन किया गया है: एडमिन डैशबोर्ड, लर्निंग एनवायरनमेंट, प्रबंधन सिस्टम, कमरा बुकिंग और ब्लॉग।

ITCSS + CUBE CSS यूटिलिटी-फ़र्स्ट + कंपोनेंट्स नेटिव डार्क मोड डिफ़ॉल्ट रूप से एक्सेसिबल शून्य निर्भरता

Cerne क्यों बनाया गया

आधुनिक वेब डेवलपमेंट के दौर के लिए एक शक्तिशाली टूल

Cerne अभी वर्शन 0.1 में है — शुरुआत से बनाया गया एक पूरा डिज़ाइन सिस्टम, एक सीधे मक़सद के साथ: किसी को भी सिस्टम को कागज़ से इंटरनेट पर लाने के लिए एक तेज़, मज़बूत और मुफ़्त आधार देना, बिना CDN पर निर्भर हुए, बिना लाइसेंस के, बिना वेंडर लॉक-इन और बिना पेवॉल के। ओपन सोर्स, सबके लिए उपलब्ध, हमेशा के लिए।

v0.1 में पहले से क्या तैयार है

40+ प्रोडक्शन-रेडी कंपोनेंट्स — ऐप शेल, डेटाटेबल, कैलेंडर, चार्ट्स, चैट, वीडियो प्लेयर, मोडल, एडवांस्ड फ़ॉर्म और भी बहुत कुछ।
कॉपी करने के लिए तैयार 43 पूरे उदाहरण: डैशबोर्ड, ई-कॉमर्स, स्ट्रीमिंग, वेबमेल, सोशल नेटवर्क, न्यूज़ पोर्टल, LLM चैट, स्मार्ट TV...
शून्य बाहरी निर्भरता — कोई jQuery नहीं, कोई CDN नहीं, प्रोडक्शन में कोई अनिवार्य बिल्ड नहीं। HTML पर डबल-क्लिक करते ही खुल जाता है।
नेटिव डार्क मोड, और prefers-reduced-motion/prefers-color-scheme अपने आप माने जाते हैं।

लॉजिकल प्रॉपर्टीज़ के ज़रिए असली RTL — यह कोई मिरर-हैक नहीं है।
हर इंटरैक्टिव कंपोनेंट में डिफ़ॉल्ट रूप से WCAG 2.1 AA एक्सेसिबिलिटी।
असली इंटरनेशनलाइज़ेशन — सिर्फ़ इंटरफ़ेस नहीं, बल्कि 168 उदाहरण पेज CJK, अरबी, हिंदी और रूसी में अनुवादित।
असली आधुनिक CSS — कंटेनर क्वेरीज़, कैस्केड लेयर्स, color-mix(), clamp(), data-density से कॉन्फ़िगर होने वाली डेंसिटी।

यह v0.1 एक चुनाव है, सीमा नहीं: कोर पहले से मज़बूत है और ऊपर दिए 43 उदाहरणों में असल इस्तेमाल में है, लेकिन प्रोजेक्ट सार्वजनिक रूप से आगे बढ़ता रहता है — हर नए वर्शन में मौजूदा चीज़ों को तोड़े बिना और प्रिमिटिव्स, और भाषाएं, और कंपोनेंट्स जुड़ते हैं।

RV

Ricardo Cezar Volert कुरितिबा, पराना, ब्राज़ील

Cerne के निर्माता और मेंटेनर। पूरा फ्रेमवर्क — टोकन, कंपोनेंट्स, 43 उदाहरण और क्षेत्रीय वेरिएंट्स — Ricardo ने डिज़ाइन किया और AI (Anthropic के Claude) के सहयोग से बनाया, इस मक़सद के साथ कि वेब की अगली पीढ़ी के सिस्टम बनाने वालों के लिए एक अच्छा, ओपन और मुफ़्त टूल छोड़ा जाए।

वेबसाइट Instagram GitHub Codeberg Lattes ORCID LinkedIn

इंस्टॉलेशन

dist/ से कंपाइल हुई फ़ाइलों को अपने प्रोजेक्ट में कॉपी करें और सीधे रेफ़र करें। फ्रेमवर्क इस्तेमाल करने के लिए किसी बिल्ड स्टेप की ज़रूरत नहीं है।

<link rel="stylesheet" href="dist/css/cerne.css">

<!-- body के अंत में: window.Cerne को एक्सपोज़ करने के लिए क्लासिक स्क्रिप्ट (type="module" नहीं) -->
<script src="dist/js/cerne.js"></script>

JS लोड होने से पहले ग़लत थीम के "फ़्लैश" से बचने के लिए, इस कोड को <head> में, CSS से पहले शामिल करें:

<script>
  var t = localStorage.getItem('cerne-theme');
  if (t) document.documentElement.setAttribute('data-theme', t);
</script>

रंग

11 शेड्स के प्रिमिटिव पैलेट + सिमैंटिक लेयर (--cerne-color-primary, -hover, -active, -subtle...), जो लाइट और डार्क थीम के बीच अपने आप वैल्यू बदल देती है। नीचे दी गई वैल्यूज़ कंपाइल हुए CSS से लाइव पढ़ी जाती हैं — यह डॉक्यूमेंटेशन कभी आउट-ऑफ़-सिंक नहीं होती।

स्पेसिंग

4px की स्केल, जो --cerne-space-* और p-*, m-*, gap-* यूटिलिटीज़ के रूप में उपलब्ध है।

टाइपोग्राफ़ी

मॉड्यूलर स्केल (~1.25), डिफ़ॉल्ट फ़ॉन्ट = सिस्टम फ़ॉन्ट स्टैक (ज़ीरो नेटवर्क रिक्वेस्ट)। अपना सेल्फ़-होस्टेड फ़ॉन्ट इस्तेमाल करने के लिए --cerne-font-sans बदलें।

रेडियस और शैडो

लाइट/डार्क के लिए अलग-अलग रेसिपी वाली एलिवेशन — डार्क बैकग्राउंड पर डार्क शैडो गायब नहीं होते।

Radius

शैडो

ग्रिड

CSS Grid पर बनी क्लासिक .row/.col-* API, साथ ही रिस्पॉन्सिव प्रीफ़िक्स md:, lg: वाली .grid-cols-* / .col-span-* यूटिलिटीज़।

<div class="row">
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
</div>

ऐप शेल

डैशबोर्ड के लिए केंद्रीय प्रिमिटिव: grid-template-areas के ज़रिए साइडबार + टॉपबार + मेन, lg से नीचे ऑफ़कैनवस में कोलैप्स होता है। यह पेज खुद .app-shell इस्तेमाल करता है।

<div class="app-shell" id="app-shell">
  <div class="app-shell__backdrop"></div>
  <aside class="app-shell__sidebar">...</aside>
  <header class="app-shell__topbar">...</header>
  <main class="app-shell__main">...</main>
</div>

बटन

हर सिमैंटिक रंग के लिए सॉलिड, आउटलाइन और घोस्ट वेरिएंट्स, साथ ही साइज़ और लोडिंग स्टेट।

<button class="btn btn-primary">प्राइमरी</button>
<button class="btn btn-outline-primary">आउटलाइन</button>
<button class="btn btn-ghost-primary">घोस्ट</button>

फ़ॉर्म

स्टाइल किए गए नेटिव कंट्रोल्स, data-cerne-validate (Constraint Validation API) से वैलिडेशन, और अट्रीब्यूट से कस्टमाइज़ होने वाले एरर मैसेज।

<form data-cerne-validate novalidate>
  <div class="form-group">
    <label class="form-label" for="email">ईमेल</label>
    <input class="form-control" type="email" id="email" required
      data-error-required="अपना ईमेल दर्ज करें।">
    <span class="form-error"></span>
  </div>
</form>

और फ़ॉर्म

फ़्लोटिंग लेबल, स्ट्रेंथ और विज़िबिलिटी वाला पासवर्ड, OTP कोड, क्लियर वाली सर्च, स्लाइडर, टैग्स, कॉम्बोबॉक्स, चुनने योग्य कार्ड्स, सेगमेंटेड सेलेक्टर, ड्रैग अपलोड और कैरेक्टर काउंटर — लॉगिन से चेकआउट तक, हर फ़्लो को कवर करने के लिए।

पूरा नाम

पासवर्ड

स्ट्रेंथ: —

वेरिफ़िकेशन कोड

खोज

कीमत की रेंज

कार्ड्स

आज की बुकिंग 24 कल की तुलना में +12%

कार्ड टाइटल

उदाहरण टेक्स्ट वाला कार्ड कंटेंट।

मीडिया

.carousel (एक बार में एक स्लाइड, डॉट्स और वैकल्पिक ऑटोप्ले के साथ) और .shelf (हॉरिज़ॉन्टल स्क्रॉल वाली, RTL-अवेयर पंक्ति) — क्रमशः संस्थागत पोर्टल के हीरो सेक्शन और स्ट्रीमिंग स्टाइल कैटलॉग के लिए।

कैरोसेल (data-cerne-carousel-autoplay)

स्लाइड 1

स्लाइड 2

स्लाइड 3

शेल्फ़ (एरो देखने के लिए माउस घुमाएं)

शाम के समय पहाड़ों का चित्रण, ब्लैक एंड व्हाइट में

<div class="carousel" data-cerne-carousel data-cerne-carousel-autoplay="5000">
  <div class="carousel-track">
    <div class="carousel-slide">...</div>
  </div>
  <button data-cerne-carousel-prev>‹</button>
  <button data-cerne-carousel-next>›</button>
  <div class="carousel-dots"></div>
</div>

<div class="shelf" data-cerne-shelf>
  <button data-cerne-shelf-prev>‹</button>
  <div class="shelf-track">
    <div class="shelf-item"><img src="poster.jpg" alt="..." /></div>
  </div>
  <button data-cerne-shelf-next>›</button>
</div>

वीडियो

Cerne.VideoPlayer — मौजूदा वीडियो मार्कअप पर प्रोग्रेसिव एन्हांसमेंट (अपना खुद का HTML थोपता नहीं): प्ले/पॉज़, क्लिक से सीक, वॉल्यूम, स्पीड कंट्रोल। जब कोई असली <video> नहीं होता (जैसे नीचे), तो यह "सिम्युलेटेड घड़ी" पर चलता है, या जब आप [data-video-element] पास करते हैं तो एक नेटिव <video> (MP4, hls.js के ज़रिए HLS...) को मिरर करता है — असली एडैप्टिव स्ट्रीमिंग डिलीवरी लागू करने वाले की ज़िम्मेदारी है, यह CSS/JS फ्रेमवर्क के दायरे से बाहर है।

<div class="player" id="player" data-duration="196">
  <button data-video-toggle>▶</button>
  <div class="player-controls">
    <div class="progress" data-video-seek><div class="progress-bar" data-video-fill></div></div>
    <button data-video-mute-toggle>🔊</button>
    <input type="range" data-video-volume min="0" max="1" step="0.05" value="1">
    <span data-video-time>0:00 / 0:00</span>
    <button data-video-speed="1.5">1.5x</button>
  </div>
</div>

<script>
  new Cerne.VideoPlayer(document.getElementById("player"), { duration: 196 });
</script>

पूरे उदाहरण: WebVTT सबटाइटल्स वाला वीडियो, "अगला एपिसोड" वाली स्ट्रीमिंग, live: true ब्रॉडकास्ट, और D-पैड नेविगेशन वाला स्मार्ट TV।

टेबल्स और डेटाटेबल

स्टैटिक टेबल्स के लिए .table; [data-cerne-datatable] बिना किसी निर्भरता के क्लाइंट-साइड सॉर्टिंग, सर्च और पेजिनेशन जोड़ता है।

नाम	कोर्स	प्रोग्रेस
Marina Silva	कंप्यूटर नेटवर्क	92%
Diego Souza	डेटाबेस	78%
Ana Beatriz	एल्गोरिदम	65%
Lucas Pereira	कंप्यूटर नेटवर्क	40%
Juliana Melo	ऑपरेटिंग सिस्टम	88%
Rafael Costa	डेटाबेस	55%

एडिटोरियल कंटेंट

कॉलम्स, हाइलाइट बॉक्स, व्याख्यात्मक नोट वाला टेक्स्ट मार्कर, और रीडिंग प्रोग्रेस बार — ब्लॉग, न्यूज़ पोर्टल या .prose के अंदर किसी भी लंबे टेक्स्ट के लिए। वैसे, स्क्रीन के ऊपर देखें: मेनू के ऊपर की पतली रंगीन पट्टी .reading-progress है, जो इस डॉक्यूमेंटेशन पेज के स्क्रॉल को ही ट्रैक कर रही है।

बॉक्स (.callout)

यह भी पढ़ें

किसी और संबंधित आर्टिकल का लिंक।

टेक्स्ट के बीच में हाइलाइट किया गया नोटिस या सुधार।

ऊपर के पैराग्राफ में <mark> से मार्क किए गए टर्म का व्याख्यात्मक नोट — न्यूज़ पोर्टल्स के "शब्दावली"/"AI समझाता है" स्टाइल में।

टेक्स्ट मार्कर (<mark data-cerne-reveal="mark">) + शब्दावली बॉक्स — जब टर्म स्क्रीन पर आता है, तो हाइलाइट रंग तुरंत पूरी तरह दिखने के बजाय बाएं से दाएं (या dir="rtl" में उल्टा) "रंगता" है।

रिपोर्टर ने बताया कि नया नियामक ढांचा पूर्ण सत्र में मंज़ूरी की प्रक्रिया बदल देता है।

नियामक ढांचा उन नियमों का समूह है जो किसी विशेष क्षेत्र को नियंत्रित करता है, जिसे कानून या डिक्री से बनाया या बदला जाता है।

टेक्स्ट कॉलम्स (.columns-2 / .columns-3, .prose के अंदर)

पहला कॉलम: टेक्स्ट वर्टिकली फ़्लो होता है और अगले कॉलम में जाता है।

दूसरा कॉलम: छोटी हाइलाइट लिस्ट, शब्दावली या कोट्स के लिए उपयोगी — md से नीचे 1 कॉलम में कोलैप्स होता है।

<p>नया <mark data-cerne-reveal="mark">नियामक ढांचा</mark> मंज़ूरी की प्रक्रिया बदल देता है।</p>
<div class="callout callout-glossary">
  <svg class="callout-icon"><use href="sprite.svg#icon-search"></use></svg>
  <div class="callout-body"><strong>नियामक ढांचा</strong> है...</div>
</div>

<div class="columns-2"><p>...</p><p>...</p></div>

<div class="reading-progress"><div class="reading-progress-bar"></div></div>

पूरा उदाहरण संदर्भ में ब्लॉग पोस्ट या न्यूज़ पोर्टल आर्टिकल में देखें।

मोडल और ऑफ़कैनवस

पेज छोड़े बिना फ़िल्टर, कार्ट या क्विक डिटेल्स के लिए इस्तेमाल होता है।

अलर्ट और टोस्ट

सफल

आपकी बुकिंग कन्फ़र्म हो गई है।

ध्यान दें

यह टाइम स्लॉट लगभग भर चुका है।

नेविगेशन

टैब्स, अकॉर्डियन, ब्रेडक्रम्ब, पेजिनेशन और कमांड पैलेट (⌘K)।

पहले टैब का कंटेंट।

Cerne क्या है?

कई प्रोडक्ट डोमेन के लिए एक स्व-निहित डिज़ाइन सिस्टम।

क्या इस्तेमाल करने के लिए बिल्ड चाहिए?

नहीं — dist/ की फ़ाइलें पहले से ही फ़ाइनल प्रोडक्ट हैं।

कमांड पैलेट — क्लिक करें या Ctrl/⌘ + K दबाएं

<button data-cerne-command-palette-open>खोजें...</button>

<div class="command-palette" data-cerne-command-palette hidden>
  <div class="command-palette-dialog" role="dialog" aria-modal="true">
    <div class="command-palette-search">
      <input type="text" placeholder="कमांड टाइप करें...">
    </div>
    <div class="command-palette-results">
      <div class="command-palette-group">
        <button class="command-palette-item" data-href="pagina.html">...</button>
      </div>
    </div>
  </div>
</div>

कैलेंडर और बुकिंग

कमरा बुकिंग के लिए साप्ताहिक शेड्यूल ग्रिड — पूरा उदाहरण बुकिंग में देखें।

कन्फ़र्म्ड पेंडिंग मेरी बुकिंग

चार्ट्स

बिना किसी निर्भरता के मिनी SVG चार्ट्स (Cerne.Chart.bar/line/donut)।

और कंपोनेंट्स

लिस्ट ग्रुप, स्पिनर, रेटिंग, हीरो और प्राइसिंग — स्टोर्स, संस्थागत पोर्टल्स, मार्केटिंग पेजेस और कैटलॉग के लिए।

ओवरव्यू सेटिंग्स नोटिफ़िकेशन

4.2 (128)

लोकप्रिय

Pro

₹499/माह

असीमित यूज़र्स
प्रायोरिटी सपोर्ट

<div class="rating">
  <svg class="is-filled"><use href="sprite.svg#icon-star"></use></svg>
  <!-- ... -->
  <span class="rating-count">4.2 (128)</span>
</div>

इमेजेस

क्रॉपिंग (object-fit/aspect-ratio), CSS फ़िल्टर (grayscale, blur-*, brightness-*...), और ट्रीटमेंट रेसिपी (होवर पर ज़ूम, कैप्शन के लिए स्क्रिम, ड्युओटोन, ऑर्गेनिक क्रॉप) — बिना किसी इमेज-प्रोसेसिंग लाइब्रेरी के, पूरी तरह शुद्ध CSS। इस पेज की फ़ोटोज़ खुद बनाई गई SVG इलस्ट्रेशन हैं, ताकि डॉक 100% स्व-निहित बनी रहे।

क्रॉपिंग और अनुपात

.aspect-video/.aspect-square/.aspect-portrait कंटेनर के अनुपात को फ़िक्स करते हैं; .object-cover बिना डिस्टॉर्शन के भरता है।

aspect-video

aspect-square

aspect-portrait

<img class="aspect-video object-cover rounded-md" src="foto.jpg" alt="..." />

फ़िल्टर

एटॉमिक, कॉम्बिनेबल क्लासेज़ (class="grayscale contrast-125") — हर एक सिर्फ़ एक filter प्रॉपर्टी को कंट्रोल करती है।

बिना फ़िल्टर

grayscale

sepia

blur-sm

brightness-50

brightness-150

contrast-150

saturate-0

saturate-200

hue-rotate-90

invert

ग्रेस्केल और contrast-125 के मिले-जुले फ़िल्टर

grayscale contrast-125

<img class="grayscale" src="foto.jpg" alt="..." />
<img class="sepia" src="foto.jpg" alt="..." />
<img class="blur-sm" src="foto.jpg" alt="..." />
<img class="brightness-150 contrast-125" src="foto.jpg" alt="..." />

ट्रीटमेंट्स

फ़ोटो वाले कार्ड्स के आम पैटर्न के लिए रेसिपी क्लासेज़ (हर एक में कई प्रॉपर्टीज़, जैसे .bg-aurora)।

<div class="img-hover-zoom rounded-lg aspect-video">
  <img src="foto.jpg" alt="..." />
</div>

<div class="img-scrim rounded-lg aspect-video">
  <img src="foto.jpg" alt="..." />
  <div class="img-scrim-caption"><strong>वैली ट्रेल</strong></div>
</div>

<div class="img-duotone aspect-square"><img src="foto.jpg" alt="..." /></div>
<div class="img-blob aspect-square"><img src="foto.jpg" alt="..." /></div>

आधुनिक ट्रेंड्स

बेंटो ग्रिड, स्पॉटलाइट कार्ड, ग्रेडिएंट बॉर्डर, ग्लो, ग्रेन/नॉइज़, ऑरोरा, मार्की, FAB और रीडिंग प्रोग्रेस बार — आज की विज़ुअल तकनीकें, किसी भी ऐप्लिकेशन के लिए तैयार।

बेंटो ग्रिड Apple स्टाइल असममित ग्रिड, होवर पर स्पॉटलाइट के साथ।

सिंपल आइटम

ग्रेडिएंट बॉर्डर

ग्रेडिएंट बॉर्डर वाला कार्ड

मार्की (होवर पर रुक जाता है)

Design System एक्सेसिबिलिटी Dark mode RTL Design System एक्सेसिबिलिटी Dark mode RTL

यह ब्लॉक data-cerne-reveal इस्तेमाल करता है — एनिमेशन देखने के लिए पेज स्क्रॉल करें।

<div class="bento-grid">
  <div class="bento-item bento-span-2 card-spotlight">...</div>
  <div class="bento-item">...</div>
</div>

<div data-cerne-reveal="up">पेज स्क्रॉल करने पर दिखता है</div>
<span data-cerne-count-up="1284" data-cerne-count-up-format>0</span>

यूटिलिटी वेरिएंट्स और क्षेत्रीय अनुकूलन

किसी भी रंग/शैडो/ओपैसिटी यूटिलिटी के आगे hover:, focus:, focus-visible:, active:, disabled:, focus-within:, और dark:, साथ ही शुद्ध CSS में group-hover:/peer-checked: (बिना JS के — .group/.peer सिर्फ़ मार्कर हैं), कंटेनर क्वेरीज़ (.cq + cq-md:), और वे प्रिमिटिव्स जो फ्रेमवर्क को किसी भी क्षेत्र के UI पैटर्न के अनुकूल बनाते हैं — सिर्फ़ पश्चिमी नहीं।

इस कार्ड पर माउस घुमाएं

बगल वाला बटन group-hover:opacity-100 इस्तेमाल करता है — यह तभी दिखता है जब पैरेंट (.group) होवर में हो।

<html> पर data-density="compact" पूरे स्पेसिंग स्केल को एक साथ कई गुना बदल देता है — यह पूर्व एशिया के पोर्टल/ई-कॉमर्स में आम उच्च सूचना घनत्व के करीब पहुंचता है। .break-keep और .write-vertical CJK में टेक्स्ट रैपिंग और वर्टिकल राइटिंग को कवर करते हैं; --cerne-line-height-base :lang(ar|he|hi|bn|ta|te|th) में अपने आप ज़्यादा उदार हो जाता है। 9 उदाहरण पेज (स्टोर/न्यूज़/डैशबोर्ड × CJK/RTL/दक्षिण एशिया) उदाहरण देखें में देखें।

<div class="group card">
  <button class="opacity-25 group-hover:opacity-100 hover:bg-primary">...</button>
</div>

<div class="cq">
  <div class="flex-col cq-md:flex-row">...</div> <!-- reage ao espaço do .cq, não do viewport -->
</div>

<html data-density="compact"> <!-- ou "spacious" -->

आइकॉन

एक ही SVG स्प्राइट में 87 आइकॉन (dist/icons/sprite.svg), खुद बनाए गए, <use> से रेफ़र किए गए।

एक्सेसिबिलिटी

लक्ष्य है WCAG 2.1 लेवल AA — इंटरनेशनल स्टैंडर्ड, देश या भाषा से अलग — न कि किसी एक जगह से जुड़ा कोई टूल या बैज।

हर इंटरैक्टिव कंपोनेंट में विज़िबल :focus-visible स्टेट और कीबोर्ड नेविगेशन है (टैब्स/मेनू में एरो, बंद करने के लिए Esc, मोडल में फ़ोकस-ट्रैप, टैब्स में roving tabindex)।
prefers-reduced-motion और prefers-color-scheme बिना किसी एक्स्ट्रा सेटिंग के अपने आप माने जाते हैं।
सॉलिड बैकग्राउंड पर टेक्स्ट के रंग AA के लिए चुने गए हैं — warning/info पर खास ध्यान दिया गया है, जो पर्याप्त कॉन्ट्रास्ट न मिलने के कारण सफ़ेद की जगह डार्क टेक्स्ट इस्तेमाल करते हैं।
फ़ॉर्म लेबल (for/id), एरर और aria-invalid को जोड़ते हैं; एरर स्टेट कभी सिर्फ़ रंग पर निर्भर नहीं करता।
एक्टिव नेविगेशन लिंक्स को aria-current="page" मिलता है; लैंडमार्क्स (main, nav, aside) और हर पेज पर एक ही <h1> स्क्रीन रीडर्स के लिए डॉक्यूमेंट को स्ट्रक्चर देते हैं।
इमेजेस/ग्राफ़िक्स के लिए वर्णनात्मक अल्ट टेक्स्ट फ्रेमवर्क इस्तेमाल करने वाले की ज़िम्मेदारी है — Cerne आपके लिए यह अपने आप नहीं बना सकता। ब्राज़ीलियन कन्वेंशन #PraCegoVer (इमेज को उसके अपने कैप्शन/alt में बताना) एक अच्छी आदत है, लेकिन असली मायने रखने वाली प्रैक्टिस है — ऐसा alt लिखना जो इमेज को बताए, जो साफ़ दिख रहा है उसे न दोहराए — यह किसी भी भाषा में सही है।
VLibras और साइन लैंग्वेज ट्रांसलेशन टूल्स के बारे में: ये जानबूझकर शामिल नहीं किए गए हैं, क्योंकि ये एक बाहरी स्क्रिप्ट (थर्ड-पार्टी CDN) पर निर्भर करते हैं और किसी एक भाषा/देश के लिए ख़ास होते हैं — जो "शून्य बाहरी निर्भरता" और "इंटरनेशनल फ्रेमवर्क" दोनों के ख़िलाफ़ जाता है। सही और यूनिवर्सल आधार है अच्छी तरह बनाया गया सिमैंटिक HTML + ARIA, जिसे दुनिया की कोई भी असिस्टिव टेक्नोलॉजी पहले से समझ सकती है; कोई ख़ास ट्रांसलेशन विजेट ज़रूरत पड़ने पर, हर प्रोजेक्ट में अलग से ऊपर जोड़ा जा सकता है।
असली RTL: कंपोनेंट्स फ़िक्स्ड left/right के बजाय लॉजिकल प्रॉपर्टीज़ (inset-inline-start, margin-inline-end, text-align: start...) इस्तेमाल करते हैं, इसलिए साइडबार, ड्रॉपडाउन, टैब्स, फ़ॉर्म और नेविगेशन को मिरर करने के लिए बस <html> पर dir="rtl" काफ़ी है — बिना किसी एक्स्ट्रा CSS के। खुद देखें:

साइड एक्सेंट वाला कार्ड

बॉर्डर टेक्स्ट की शुरुआत के साथ चलता है, किसी फ़िक्स साइड के साथ नहीं।

ईमेल नोटिफ़िकेशन

<html lang="ar" dir="rtl">
  <!-- साइडबार, ड्रॉपडाउन, टैब्स, फ़ॉर्म... सब अपने आप मिरर होता है -->

प्राइवेसी और सहमति

जनरल कुकी/कंसेंट बैनर — वही "आवश्यक / एनालिटिक्स / मार्केटिंग" पैटर्न जो GDPR (EU), LGPD (ब्राज़ील) और CCPA (कैलिफ़ोर्निया) में इस्तेमाल होता है, बिना किसी थर्ड-पार्टी कंसेंट मैनेजमेंट प्लेटफ़ॉर्म पर निर्भर हुए।

<div class="consent-banner" data-cerne-consent hidden role="region" aria-label="कुकी नोटिस">
  <p class="consent-banner-text">हम आवश्यक कुकीज़ इस्तेमाल करते हैं...</p>
  <div class="consent-banner-actions">
    <button data-cerne-consent-customize
      data-cerne-toggle="modal" data-cerne-target="#consent-preferences">कस्टमाइज़ करें</button>
    <button data-cerne-consent-reject>ग़ैर-ज़रूरी अस्वीकार करें</button>
    <button data-cerne-consent-accept>सब स्वीकार करें</button>
  </div>
</div>

<!-- Cerne.Consent.get() / .set({analytics, marketing}) / .reset() -->

यह चुनाव localStorage में रहता है (की cerne-consent), कभी किसी थर्ड-पार्टी कुकी में नहीं, और कभी कहीं नहीं भेजा जाता — आपका बैकएंड Cerne.Consent.get() के साथ क्या करता है, यह आपका फ़ैसला है। बैनर तभी अपने आप दिखता है जब पेज में [data-cerne-consent] एलिमेंट हो; इस डॉक्यूमेंटेशन में इसे जानबूझकर हटाया गया है ताकि यह परेशान न करे — पूरा उदाहरण ब्लॉग, स्टोर या संस्थागत पोर्टल में देखें।

पूरे उदाहरण

पूरी तरह Cerne से बने 42 पेज, जो एडमिन डैशबोर्ड, शिक्षा, प्रबंधन, बुकिंग, कंटेंट, न्यूज़ पोर्टल, ई-कॉमर्स, संस्थागत साइट्स, वीडियो, सोशल नेटवर्क, स्ट्रीमिंग, संवादात्मक सहायक और पोर्टफ़ोलियो को कवर करते हैं — हर एक का अपना CJK, RTL, दक्षिण एशिया और रूस वेरिएंट है, पूरे UI अनुवाद के साथ (168 रीजनल पेज, कुल मिलाकर लगभग 210), जिन्हें किसी भी उदाहरण के ऊपर मौजूद "रीजनल वेरिएंट" बार से एक्सेस किया जा सकता है।

ऑथेंटिकेशन (लॉगिन/रजिस्ट्रेशन)

वीडियो प्लेटफ़ॉर्म

सोशल नेटवर्क (फ़ीड)

सोशल नेटवर्क (प्रोफ़ाइल)

वीडियो स्ट्रीमिंग

संवादात्मक सहायक (LLM)

पोर्टफ़ोलियो (बेंटो ग्रिड)

एनालिटिक्स डैशबोर्ड

वेबमेल (Gmail स्टाइल)

वेबमेल (Outlook स्टाइल)

सर्च इंजन (मिनिमलिस्ट स्टाइल)

सर्च इंजन (डेंस पोर्टल स्टाइल)

स्मार्ट TV इंटरफ़ेस

अनुकूल अंतरराष्ट्रीय रजिस्ट्रेशन

रीजनल वेरिएंट्स (CJK, RTL, दक्षिण एशिया, रूस)

ऊपर दिए हर उदाहरण के हर पेज का एक CJK, RTL, दक्षिण एशिया और रूस वेरिएंट है — कुल मिलाकर 168 रीजनल पेज — कोई भी खोलें और उनके बीच नेविगेट करने के लिए ऊपर की "रीजनल वेरिएंट" बार इस्तेमाल करें। CJK, RTL और दक्षिण एशिया वेरिएंट्स और क्षेत्रीय में बताए गए प्रिमिटिव्स इस्तेमाल करते हैं — data-density, .break-keep/.write-vertical, dir="rtl", और हर भाषा के लिए --cerne-line-height-base; रूस वेरिएंट मूल उदाहरण की उसी LTR संरचना पर lang="ru" के साथ रूसी टेक्स्ट इस्तेमाल करता है (कोई अतिरिक्त लॉजिकल प्रॉपर्टी नहीं, क्योंकि रूसी भाषा इस मामले में पुर्तगाली की तरह ही व्यवहार करती है)। इन 168 पेजों में पूरा अनुवाद है — सिर्फ़ UI (नेविगेशन, बटन, फ़ॉर्म, लेबल, एम्प्टी स्टेट) ही नहीं, बल्कि डायनामिक कंटेंट भी: प्रोडक्ट के नाम और डिस्क्रिप्शन, उदाहरण ईमेल (विषय और मुख्य भाग), सर्च रिज़ल्ट्स, वीडियो/सीरीज़ के टाइटल और सिनॉप्सिस, सहायक की उदाहरण बातचीत, और लंबे आर्टिकल्स/पोस्ट्स का मुख्य भाग, हर डोमेन के पास हर भाषा के लिए अपने उदाहरण डेटा की अलग कॉपी है (जैसे store-data.cjk.browser.js / store-data.ru.browser.js)। कुकी बैनर का भी अनुवाद किया गया है; सिर्फ़ छोटे फ़ुटर नोट जो वेरिएंट के बारे में बताते हैं (और लोगों के असली नाम) पुर्तगाली में ही रहते हैं, क्योंकि ये सोर्स कोड पढ़ने वालों के लिए डॉक्यूमेंटेशन टेक्स्ट हैं, ऐप का कंटेंट नहीं।

उदाहरण	CJK	RTL	दक्षिण एशिया	रूस
एडमिन डैशबोर्ड	खोलें	खोलें	खोलें	खोलें
लर्निंग एनवायरनमेंट	खोलें	खोलें	खोलें	खोलें
टीचर पेज	खोलें	खोलें	खोलें	खोलें
मैनेजमेंट / CRUD	खोलें	खोलें	खोलें	खोलें
कमरा बुकिंग	खोलें	खोलें	खोलें	खोलें
ब्लॉग	खोलें	खोलें	खोलें	खोलें
ब्लॉग — पोस्ट	खोलें	खोलें	खोलें	खोलें
न्यूज़ पोर्टल	खोलें	खोलें	खोलें	खोलें
न्यूज़ पोर्टल — आर्टिकल	खोलें	खोलें	खोलें	खोलें
ई-कॉमर्स स्टोर	खोलें	खोलें	खोलें	खोलें
ई-कॉमर्स स्टोर — प्रोडक्ट	खोलें	खोलें	खोलें	खोलें
लैब वेबसाइट	खोलें	खोलें	खोलें	खोलें
संस्थागत पोर्टल	खोलें	खोलें	खोलें	खोलें
रिसर्च ग्रुप वेबसाइट	खोलें	खोलें	खोलें	खोलें
ऑथेंटिकेशन — लॉगिन	खोलें	खोलें	खोलें	खोलें
ऑथेंटिकेशन — रजिस्ट्रेशन	खोलें	खोलें	खोलें	खोलें
ऑथेंटिकेशन — OTP वेरिफ़िकेशन	खोलें	खोलें	खोलें	खोलें
एरर 404	खोलें	खोलें	खोलें	खोलें
एरर 500	खोलें	खोलें	खोलें	खोलें
वीडियो प्लेटफ़ॉर्म	खोलें	खोलें	खोलें	खोलें
वीडियो — देखें	खोलें	खोलें	खोलें	खोलें
वीडियो — प्लेलिस्ट	खोलें	खोलें	खोलें	खोलें
सोशल नेटवर्क (फ़ीड)	खोलें	खोलें	खोलें	खोलें
सोशल नेटवर्क (प्रोफ़ाइल)	खोलें	खोलें	खोलें	खोलें
स्ट्रीमिंग — लॉगिन	खोलें	खोलें	खोलें	खोलें
स्ट्रीमिंग — प्रोफ़ाइल्स	खोलें	खोलें	खोलें	खोलें
वीडियो स्ट्रीमिंग	खोलें	खोलें	खोलें	खोलें
स्ट्रीमिंग — टाइटल पेज	खोलें	खोलें	खोलें	खोलें
स्ट्रीमिंग — देखें	खोलें	खोलें	खोलें	खोलें
स्ट्रीमिंग — एक्सप्लोर	खोलें	खोलें	खोलें	खोलें
स्ट्रीमिंग — लाइव	खोलें	खोलें	खोलें	खोलें
संवादात्मक सहायक (LLM)	खोलें	खोलें	खोलें	खोलें
पोर्टफ़ोलियो (बेंटो ग्रिड)	खोलें	खोलें	खोलें	खोलें
एनालिटिक्स डैशबोर्ड	खोलें	खोलें	खोलें	खोलें
वेबमेल (Gmail स्टाइल)	खोलें	खोलें	खोलें	खोलें
वेबमेल (Outlook स्टाइल)	खोलें	खोलें	खोलें	खोलें
सर्च इंजन (मिनिमलिस्ट)	खोलें	खोलें	खोलें	खोलें
सर्च इंजन (मिनिमलिस्ट) — रिज़ल्ट्स	खोलें	खोलें	खोलें	खोलें
सर्च इंजन (डेंस पोर्टल)	खोलें	खोलें	खोलें	खोलें
सर्च इंजन (डेंस पोर्टल) — रिज़ल्ट्स	खोलें	खोलें	खोलें	खोलें
स्मार्ट TV इंटरफ़ेस	खोलें	खोलें	खोलें	खोलें
स्मार्ट TV — प्लेयर	खोलें	खोलें	खोलें	खोलें
अनुकूल अंतरराष्ट्रीय रजिस्ट्रेशन (पहले से JS के ज़रिए देश के हिसाब से अनुकूल — कोई स्टैटिक वेरिएंट नहीं)	—	—	—	—

शुरुआत से बना एक पूरा डिज़ाइन सिस्टम, बिना किसी बाहरी निर्भरता के

आधुनिक वेब डेवलपमेंट के दौर के लिए एक शक्तिशाली टूल

v0.1 में पहले से क्या तैयार है

इंस्टॉलेशन

रंग

स्पेसिंग

टाइपोग्राफ़ी

रेडियस और शैडो

Radius

शैडो

ग्रिड

ऐप शेल

बटन

फ़ॉर्म

और फ़ॉर्म

कार्ड्स

मीडिया

वीडियो

टेबल्स और डेटाटेबल

एडिटोरियल कंटेंट

मोडल और ऑफ़कैनवस

साइड पैनल

अलर्ट और टोस्ट

नेविगेशन

कैलेंडर और बुकिंग

चार्ट्स

और कंपोनेंट्स

इमेजेस

क्रॉपिंग और अनुपात

फ़िल्टर

ट्रीटमेंट्स

आधुनिक ट्रेंड्स

यूटिलिटी वेरिएंट्स और क्षेत्रीय अनुकूलन

आइकॉन

एक्सेसिबिलिटी

प्राइवेसी और सहमति

पूरे उदाहरण

रीजनल वेरिएंट्स (CJK, RTL, दक्षिण एशिया, रूस)