Skeletonic Stylus

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 المُرسل دون التخلي عن الراحة التي توفرها مكتبة مكوّنات حقيقية. بعد ثماني سنوات، الهدف لم يتغير.

ما الذي تقدّمه لك

صاعقة

سريعة كالبرق

صمّم وخصّص واجهات متجاوبة في دقائق. متغيرات CSS أصلية، فئات معرّفة مسبقًا، شبكة من 12 عمودًا تغطي كل عنصر HTML دلالي.

ريشة

خفيفة الوزن

بحجم ~7.5 كيلوبايت مضغوط. الصفحات تُحمّل أسرع. جميع لبنات البناء الأساسية متوفرة.

أجهزة متجاوبة

تصميم متجاوب

مصمّمة لسطح المكتب والهاتف. التخطيطات تتكيّف مع أي جهاز. محسّنة للمس، مع HTML دلالي في كل مكان.

إمكانية الوصول

إمكانية الوصول

WCAG 2.2 مدمج: حلقات focus-visible، تباين AA، مساعدات رابط التخطي، مكوّنات صديقة للوحة المفاتيح، دعم تقليل الحركة — بدون ورقة أنماط إضافية، وبدون نمطية aria-*.

كتل مكوّنات

مكتبة مكوّنات

مكوّنات CSS معيارية وخلطات Stylus. أزرار، نماذج، بطاقات، تنبيهات، شارات، لوحات ألوان وحركات — نظيفة، معيارية، جاهزة للإضافة.

شعار GitHub

مجانية ومفتوحة المصدر

صمّمها وبناها وصانها Sebastien Rousseau. مرخّصة بشكل مزدوج تحت MIT أو Apache 2.0. بدون رسوم، بدون تكاليف ترخيص، حتى للاستخدام التجاري.

كيف تُقارَن

ورقة أنماط واحدة مستضافة ذاتيًا تغطي الطباعة والأزرار والنماذج والبطاقات والجداول ولوحات الألوان والحركات وفئات الأدوات المساعدة. بدون JavaScript. بدون خطوة بناء مطلوبة. بدون تبعيات نظيرة على Bootstrap أو Tailwind أو Bulma.

Data table table
الميزة 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

المبادئ

  1. إمكانية الوصول هي الأساس، وليست السقف. توافق WCAG 2.2 مدمج في كل مكوّن، ولا يُضاف لاحقًا كـ "مظهر".
  2. البايتات مهمة. ورقة أنماط واحدة مُرسلة لا ينبغي أن تستنفد ميزانية وزن صفحتك. الحد الأقصى 8 كيلوبايت مضغوط يُفرض في CI.
  3. طبقات التسلسل تتغلب على حروب الخصوصية. تجاوز أي شيء بثقة — بدون !important، بدون حيل ترتيب DOM.
  4. Stylus لا يزال جيدًا. موجز، معبّر، ويتيح للمكتبة البقاء في ~3,000 سطر قابل للقراءة.
  5. البساطة ميزة. بدون تبعيات JS. بدون سحر وقت البناء. بدون إعادة تسمية مُعطّلة. فئات CSS تفعل بالضبط ما يقوله اسمها.
  6. قابلة للتخصيص في ثوانٍ. خصائص CSS مخصصة أصلية للألوان والمسافات والخط والحواف المستديرة.
  7. مُحصّنة ضد هجمات سلسلة التوريد. مصدر npm موقّع. تحديثات Dependabot مثبّتة. ثغرة CVE-2023-44270 مرقّعة عبر overrides.

الإصدارات وsemver

يتبع Skeletonic Stylus الإصدار الدلالي 2.0.

Data table table
نوع الترقية متى مثال
رئيسي إزالة أو إعادة تسمية فئة أو خلطة أو رمز عام 1.x ← 2.0
ثانوي إضافة مكوّن أو خلطة أو رمز جديد 1.1 ← 1.2
ترقيعي إصلاحات أخطاء، تحسينات إمكانية الوصول، الأداء، الأمان 1.1.6 ← 2.0.0

جميع أسماء الفئات العامة وجميع خصائص CSS المخصصة وجميع خلطات Stylus المُصدّرة هي جزء من واجهة البرمجة العامة. التغيير المُعطّل يستحق ترقية رئيسية ودليل ترحيل.

الإشراف

Skeletonic Stylus مصمّمة ومبنية وتتم صيانتها بواسطة Sebastien Rousseau. مرخّصة بشكل مزدوج تحت MIT و Apache 2.0.

نرحب بالمشكلات والأفكار والمساهمات — انظر دليل المساهمة.