سريعة كالبرق
صمّم وخصّص واجهات متجاوبة في دقائق. متغيرات CSS أصلية، فئات معرّفة مسبقًا، شبكة من 12 عمودًا تغطي كل عنصر HTML دلالي.
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 هي مكتبة CSS مفتوحة المصدر مبنية بـ Stylus صُمّمت لتنسيق واجهات مستخدم يسهل الوصول إليها، سريعة ومعيارية.
وُلدت عام 2018 كتجربة شخصية في تقليل حجم CSS المُرسل دون التخلي عن الراحة التي توفرها مكتبة مكوّنات حقيقية. بعد ثماني سنوات، الهدف لم يتغير.
ما الذي تقدّمه لك
خفيفة الوزن
بحجم ~7.5 كيلوبايت مضغوط. الصفحات تُحمّل أسرع. جميع لبنات البناء الأساسية متوفرة.
تصميم متجاوب
مصمّمة لسطح المكتب والهاتف. التخطيطات تتكيّف مع أي جهاز. محسّنة للمس، مع HTML دلالي في كل مكان.
إمكانية الوصول
WCAG 2.2 مدمج: حلقات focus-visible، تباين AA، مساعدات رابط التخطي، مكوّنات صديقة للوحة المفاتيح، دعم تقليل الحركة — بدون ورقة أنماط إضافية، وبدون نمطية aria-*.
مكتبة مكوّنات
مكوّنات CSS معيارية وخلطات Stylus. أزرار، نماذج، بطاقات، تنبيهات، شارات، لوحات ألوان وحركات — نظيفة، معيارية، جاهزة للإضافة.
مجانية ومفتوحة المصدر
صمّمها وبناها وصانها Sebastien Rousseau. مرخّصة بشكل مزدوج تحت MIT أو Apache 2.0. بدون رسوم، بدون تكاليف ترخيص، حتى للاستخدام التجاري.
كيف تُقارَن
ورقة أنماط واحدة مستضافة ذاتيًا تغطي الطباعة والأزرار والنماذج والبطاقات والجداول ولوحات الألوان والحركات وفئات الأدوات المساعدة. بدون JavaScript. بدون خطوة بناء مطلوبة. بدون تبعيات نظيرة على Bootstrap أو Tailwind أو Bulma.
| الميزة | Skeletonic Stylus | Bootstrap 5 | Tailwind CSS | Bulma |
|---|---|---|---|---|
| الحجم المضغوط | ~7.5 كيلوبايت | ~30 كيلوبايت | ~10 كيلوبايت JIT | ~30 كيلوبايت |
| توافق WCAG 2.2 | مدمج | جزئي | يدوي | جزئي |
| طبقات التسلسل | نعم (@layer) |
لا | لا | لا |
| الوضع الداكن | prefers-color-scheme |
اختياري | يعتمد على الفئات | اختياري |
| يتطلب JavaScript | لا | نعم (Popper) | لا | لا |
| قائمة مواد CycloneDX | نعم | لا | لا | لا |
| تقليل الحركة | محترم | جزئي | يدوي | جزئي |
| الترخيص | MIT أو Apache 2.0 | MIT | MIT | MIT |
المبادئ
- إمكانية الوصول هي الأساس، وليست السقف. توافق WCAG 2.2 مدمج في كل مكوّن، ولا يُضاف لاحقًا كـ "مظهر".
- البايتات مهمة. ورقة أنماط واحدة مُرسلة لا ينبغي أن تستنفد ميزانية وزن صفحتك. الحد الأقصى 8 كيلوبايت مضغوط يُفرض في CI.
- طبقات التسلسل تتغلب على حروب الخصوصية. تجاوز أي شيء
بثقة — بدون
!important، بدون حيل ترتيب DOM. - Stylus لا يزال جيدًا. موجز، معبّر، ويتيح للمكتبة البقاء في ~3,000 سطر قابل للقراءة.
- البساطة ميزة. بدون تبعيات JS. بدون سحر وقت البناء. بدون إعادة تسمية مُعطّلة. فئات CSS تفعل بالضبط ما يقوله اسمها.
- قابلة للتخصيص في ثوانٍ. خصائص CSS مخصصة أصلية للألوان والمسافات والخط والحواف المستديرة.
- مُحصّنة ضد هجمات سلسلة التوريد. مصدر npm موقّع. تحديثات Dependabot مثبّتة. ثغرة CVE-2023-44270 مرقّعة عبر overrides.
الإصدارات وsemver
يتبع Skeletonic Stylus الإصدار الدلالي 2.0.
| نوع الترقية | متى | مثال |
|---|---|---|
| رئيسي | إزالة أو إعادة تسمية فئة أو خلطة أو رمز عام | 1.x ← 2.0 |
| ثانوي | إضافة مكوّن أو خلطة أو رمز جديد | 1.1 ← 1.2 |
| ترقيعي | إصلاحات أخطاء، تحسينات إمكانية الوصول، الأداء، الأمان | 1.1.6 ← 2.0.0 |
جميع أسماء الفئات العامة وجميع خصائص CSS المخصصة وجميع خلطات Stylus المُصدّرة هي جزء من واجهة البرمجة العامة. التغيير المُعطّل يستحق ترقية رئيسية ودليل ترحيل.
الإشراف
Skeletonic Stylus مصمّمة ومبنية وتتم صيانتها بواسطة Sebastien Rousseau. مرخّصة بشكل مزدوج تحت MIT و Apache 2.0.
نرحب بالمشكلات والأفكار والمساهمات — انظر دليل المساهمة.