हर UI फ्रेमवर्क अंततः एक जैसे वादे करता है: कंसिस्टेंसी, डेवलपमेंट स्पीड और एक जैसा दिखने वाला डिज़ाइन। फ़र्क इस बात में है कि हर फ्रेमवर्क फ्लेक्सिबिलिटी (यूटिलिटीज़) और सिमेंटिक्स (रेडीमेड कंपोनेंट्स) के बीच के तनाव को कैसे सुलझाता है। Cerne दोनों को साथ रखने की कोशिश करता है।
टोकन: सच्चाई का एकमात्र स्रोत
रंग, स्पेसिंग, टाइपोग्राफी, रेडियस और शैडो — सब कुछ CSS वेरिएबल्स (--cerne-color-primary, --cerne-space-4...) के रूप में मौजूद है, जो Sass मैप्स से जेनरेट होते हैं। इसका मतलब है कि कंपोनेंट्स और यूटिलिटीज़ — यहां तक कि यह डॉक्यूमेंटेशन भी — एक ही वैल्यू पढ़ते हैं। लाइट थीम से डार्क थीम में बदलना बस :root में वेरिएबल्स का सेट बदलने जितना आसान है।
अगर डॉक्यूमेंटेशन और CSS अलग हो सकते हैं, तो देर-सवेर वे अलग हो ही जाएंगे। इसीलिए टोकन पेज लाइव कंप्यूटेड वैल्यू पढ़ता है, न कि हाथ से कॉपी किए गए नंबर।
स्पेसिफिसिटी के क्रम में लेयर्स
हम ITCSS के एक वेरिएशन को फॉलो करते हैं: पहले Sass सेटिंग्स और टूल्स (बिना CSS जेनरेट किए), फिर:
!important की लड़ाई से बचा जा सके।
- रीसेट और बेस एलिमेंट्स
- लेआउट ऑब्जेक्ट्स (ग्रिड, ऐप-शेल, stack/cluster)
- सिमेंटिक कंपोनेंट्स (बटन, कार्ड, मॉडल...)
- यूटिलिटीज़, सबसे आख़िर में — ताकि वे हमेशा ओवरराइड कर सकें
| लेयर | स्पेसिफिसिटी | उदाहरण |
|---|---|---|
| एलिमेंट्स | कम | a, table |
| कंपोनेंट्स | मध्यम | .btn-primary |
| यूटिलिटीज़ | ज़्यादा (जानबूझकर) | .mt-4 |
जो कंपोनेंट गायब था: बुकिंग
किसी भी लोकप्रिय फ्रेमवर्क में रेडीमेड टाइमटेबल नहीं आता। कक्ष बुकिंग सिस्टम के लिए यह मुख्य कंपोनेंट है — इसलिए हमने शुद्ध CSS Grid और बिना डिपेंडेंसी वाले JavaScript से एक बनाया, जो DOM में सेल की असली ऊंचाई मापकर इवेंट्स को पोज़िशन करता है।
संक्षेप में
रनटाइम पर कोई डिपेंडेंसी नहीं: न jQuery, न Popper, न Chart.js — सिर्फ़ शुद्ध CSS और JavaScript, हर एक एक ही फ़ाइल में कंपाइल किया गया।
नेटिव ऐप-शेल, बुकिंग और डेटाटेबल उन बुनियादी चीज़ों को कवर करते हैं जो असली डैशबोर्ड बनाने के लिए Bootstrap और शुद्ध Tailwind दोनों में गायब हैं।
डार्क मोड, RTL और AA एक्सेसिबिलिटी कोई अलग पैकेज नहीं हैं — ये हर कंपोनेंट का डिफ़ॉल्ट व्यवहार हैं, पहले कमिट से ही।
डॉक्यूमेंटेशन सीधे कंपाइल्ड CSS से टोकन पढ़ता है, इसलिए कभी भी पुरानी कलर टेबल नहीं होती।
नतीजा एक ऐसा फ्रेमवर्क है जो एडमिन डैशबोर्ड, लर्निंग एनवायरनमेंट, या — जैसे यह पोस्ट — ब्लॉग के लिए समान रूप से अच्छा काम करता है।