अत्यंत तेज़
मिनटों में रिस्पॉन्सिव इंटरफ़ेस डिज़ाइन और अनुकूलित करें। नेटिव CSS वेरिएबल, पूर्वनिर्धारित क्लास, हर सिमैंटिक HTML तत्व को कवर करने वाला 12-कॉलम ग्रिड।
Translation note (2026-04-30). v2.0.0 adds RTL support and a refreshed 2026 framework comparison. The English source is the canonical reference while these translations catch up. See https://skeletonic.io/about/ · https://skeletonic.io/components/ · https://skeletonic.io/benchmarks/.
- Version
- 2.0.0
- Gzip
- 7.7 KB
- Brotli
- 6.7 KB
- License
- MIT or Apache-2.0
- Standard
- WCAG 2.2 AA
संक्षिप्त परिचय
Skeletonic Stylus एक ओपन-सोर्स Stylus CSS लाइब्रेरी है — सुलभ, तेज़ और मॉड्यूलर UI स्टाइलिंग के लिए।
2018 में कम CSS भेजने के एक व्यक्तिगत प्रयोग के रूप में शुरू हुई, बिना किसी वास्तविक कंपोनेंट लाइब्रेरी की सुविधाओं को छोड़े। आठ साल बाद भी, लक्ष्य वही है।
यह आपको क्या देती है
हल्की
7.7 KB gzipped। पेज तेज़ी से लोड होते हैं। हर ज़रूरी बिल्डिंग ब्लॉक शामिल है।
रिस्पॉन्सिव डिज़ाइन
डेस्कटॉप और मोबाइल के लिए तैयार। लेआउट किसी भी डिवाइस के अनुकूल। टच-ऑप्टिमाइज़्ड, पूरे में सिमैंटिक HTML।
सुलभता
WCAG 2.2 अंतर्निहित: focus-visible रिंग, AA कंट्रास्ट, skip-link हेल्पर, कीबोर्ड-अनुकूल घटक, reduced-motion सपोर्ट — कोई अतिरिक्त स्टाइलशीट नहीं, कोई aria-* बॉयलरप्लेट नहीं।
कंपोनेंट लाइब्रेरी
मॉड्यूलर CSS कंपोनेंट और Stylus मिक्सिन। बटन, फ़ॉर्म, कार्ड, अलर्ट, बैज, पैलेट और एनिमेशन — साफ़, मॉड्यूलर, तुरंत उपयोग के लिए तैयार।
निःशुल्क और ओपन सोर्स
Sebastien Rousseau द्वारा डिज़ाइन, निर्मित और अनुरक्षित। MIT या Apache 2.0 के तहत दोहरा लाइसेंस। कोई शुल्क नहीं, व्यावसायिक उपयोग के लिए भी।
तुलना
एक स्व-होस्टेड स्टाइलशीट टाइपोग्राफ़ी, बटन, फ़ॉर्म, कार्ड, टेबल, पैलेट, एनिमेशन और यूटिलिटी क्लास को कवर करती है। कोई JavaScript नहीं। कोई बिल्ड स्टेप ज़रूरी नहीं। Bootstrap, Tailwind या Bulma पर कोई निर्भरता नहीं।
| सुविधा | Skeletonic Stylus | Bootstrap 5 | Tailwind CSS | Bulma |
|---|---|---|---|---|
| Gzipped आकार | 7.7 KB | ~30 KB | ~10 KB (varies) | ~30 KB |
| WCAG 2.2 अनुरूपता | अंतर्निहित | आंशिक | मैनुअल | आंशिक |
| Cascade layers | हाँ (@layer) |
नहीं | नहीं | नहीं |
| डार्क मोड | prefers-color-scheme |
ऑप्ट-इन | Class-based | ऑप्ट-इन |
| JavaScript आवश्यक | नहीं | हाँ (Popper) | नहीं | नहीं |
| CycloneDX SBOM | हाँ | नहीं | नहीं | नहीं |
| Reduced-motion | सम्मानित | आंशिक | मैनुअल | आंशिक |
| लाइसेंस | MIT या Apache 2.0 | MIT | MIT | MIT |
सिद्धांत
- सुलभता न्यूनतम है, अधिकतम नहीं। WCAG 2.2 अनुरूपता हर घटक में अंतर्निहित है, कभी "थीम" के रूप में बाद में नहीं जोड़ी जाती।
- बाइट्स मायने रखते हैं। एक शिप की गई स्टाइलशीट को आपके पेज-वेट बजट को पार नहीं करना चाहिए। 8 KB gzipped की सीमा CI में लागू है।
- Cascade layers specificity युद्ध जीतती हैं। विश्वास के साथ
कुछ भी ओवरराइड करें — कोई
!importantनहीं, कोई DOM-order ट्रिक नहीं। - Stylus अभी भी अच्छा है। संक्षिप्त, अभिव्यंजक, और लाइब्रेरी को ~3,000 पठनीय पंक्तियों में रखता है।
- सादगी एक सुविधा है। कोई JS निर्भरता नहीं। कोई बिल्ड-टाइम जादू नहीं। कोई ब्रेकिंग रीनेम नहीं। CSS क्लास जो ठीक वही करती हैं जो कहती हैं।
- सेकंडों में थीम बदलें। रंगों, स्पेसिंग, टाइप और रेडी के लिए नेटिव CSS कस्टम प्रॉपर्टीज़।
- आपूर्ति-श्रृंखला सुदृढ़। हस्ताक्षरित npm provenance। पिन किए
गए Dependabot अपडेट।
pnpm.overridesके माध्यम से CVE-2023-44270 पैच।
वर्शनिंग और semver
Skeletonic Stylus Semantic Versioning 2.0 का पालन करती है।
| बम्प | कब | उदाहरण |
|---|---|---|
| Major | किसी पब्लिक क्लास, मिक्सिन, या टोकन को हटाने या नाम बदलने पर | 1.x → 2.0 |
| Minor | नया कंपोनेंट, मिक्सिन, या टोकन जोड़ने पर | 1.1 → 1.2 |
| Patch | बग फ़िक्स, a11y पॉलिश, प्रदर्शन, सुरक्षा | 1.1.6 → 2.0.0 |
सभी पब्लिक क्लास नाम, सभी CSS कस्टम प्रॉपर्टीज़, और सभी एक्सपोर्ट किए गए Stylus मिक्सिन पब्लिक API का हिस्सा हैं। ब्रेकिंग बदलाव पर major बम्प और माइग्रेशन गाइड मिलती है।
प्रबंधन
Skeletonic Stylus को Sebastien Rousseau द्वारा डिज़ाइन, निर्मित और अनुरक्षित किया जाता है। MIT और Apache 2.0 के तहत दोहरा लाइसेंस।
मुद्दे, विचार और योगदान स्वागत है — योगदान गाइड देखें।