المكوّنات

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/.

كل مثال أدناه معروض بورقة الأنماط نفسها التي يتم عرضها. بدون معالج أولي. بدون JavaScript. بدون تبعيات إضافية. انسخ أي مقتطف في ملف HTML جديد وسيعمل.

المدخلات

العناصر التفاعلية التي ينقر عليها الزائر أو يلمسها أو يركّز عليها لتوجيه الصفحة.

الأزرار

مُشغّل إجراء دلالي وقابل للتخصيص. المتغيرات المصمتة والمحدّدة تشحن ستة ألوان علامة تجارية لكل منها.

<a href="#" class="button primary">Primary</a>
<a href="#" class="button secondary">Secondary</a>
<a href="#" class="button tertiary">Tertiary</a>

أساسي ثانوي ثالثي

المتغيرات المحدّدة:

<a href="#" class="button primary-outline">Outline</a>
<a href="#" class="button secondary-outline">Outline</a>

محدّد محدّد

ملاحظة إمكانية الوصول. كل متغير .button يأتي مع حلقة :focus-visible ومساحة نقر لا تقل عن 24×24 بكسل CSS (WCAG 2.2 SC 2.5.8). استخدم <button type="button"> للإجراءات داخل الصفحة و<a href> فقط للتنقل.

الشارات

تسمية مضغوطة للحالة أو العدد أو الفئة. حجم النص ثابت حتى تتوافق الشارات مع النص المحيط.

<span class="badge">Default</span>
<span class="badge primary">Primary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

افتراضي أساسي نجاح تحذير خطر

ملاحظة إمكانية الوصول. الشارات زخرفية بشكل افتراضي. عندما تحمل الشارة الإشارة الوحيدة (مثل عدد الرسائل غير المقروءة)، غلّفها في مساعد مخفي بصريًا: <span class="visually-hidden">3 رسائل غير مقروءة</span>.

التغذية الراجعة

أسطح تخبر الزائر أن شيئًا حدث — أو على وشك الحدوث.

التنبيهات

رسائل حالة ذات قصد دلالي. في الإصدار 2.0.0 كل متغير مُسمّى بشكل صريح تحت .alert-{primary,secondary,info,success,warning,error} لكي لا تتعارض فئة المتغير مع فئات الحالة في أماكن أخرى من الصفحة.

<div class="alert alert-primary" role="alert">
  <strong>Heads up.</strong> This is a primary alert.
</div>
<div class="alert alert-success" role="status">
  <strong>Saved.</strong> Your changes are persisted.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Careful.</strong> This action affects shared state.
</div>
<div class="alert alert-error" role="alert">
  <strong>Error.</strong> Could not save the form.
</div>

تنبيه. هذا تنبيه أساسي.

تم الحفظ. تم حفظ تغييراتك.

انتبه. هذا الإجراء يؤثر على حالة مشتركة.

خطأ. تعذّر حفظ النموذج.

ملاحظة إمكانية الوصول. استخدم role="alert" للرسائل التي تتطلب اهتمامًا فوريًا (الأخطاء، التحذيرات) وrole="status" للتأكيدات غير العاجلة. كلاهما يكشف الرسالة للتقنيات المساعدة فور ظهورها.

الأسطح

حاويات تؤطّر وتجمّع المحتوى المتعلّق.

البطاقات

حاوية بحدود وحشو لوحدة متماسكة واحدة. ادمجها مع شبكة flex-N لجدران بطاقات متجاوبة.

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Lightweight</h3>
      <p>38.8 KB minified, 7.7 KB gzipped.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Accessible</h3>
      <p>WCAG 2.2 conformant out of the box.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Modular</h3>
      <p>Cascade-layered for easy overrides.</p>
    </div>
  </article>
</section>

خفيفة

39.9 كيلوبايت مصغّر، 7.5 كيلوبايت مضغوط.

سهلة الوصول

متوافقة مع WCAG 2.2 مباشرة.

معيارية

طبقات التسلسل لتجاوزات سهلة.

ملاحظة إمكانية الوصول. غلّف كل بطاقة في معلم دلالي (<article>، <section>) وابدأ محتواها بعنوان (<h3>). مستخدمو قارئات الشاشة يمكنهم بعد ذلك التنقل عبر قائمة البطاقات كمناطق قابلة للتنقل من الدرجة الأولى.

النماذج

المدخلات والتسميات والتجميعات لجمع بيانات المستخدم.

حقول النموذج

التسميات، مدخلات النص، مناطق النص، مجموعات الحقول والعناوين التوضيحية — جميعها بحجم متسق مع بقية نظام التصميم.

<form>
  <label for="name">Name</label>
  <input id="name" type="text" required>

  <label for="email">Email</label>
  <input id="email" type="email" required class="input-primary">

  <label for="msg">Message</label>
  <textarea id="msg" rows="4"></textarea>

  <button type="submit" class="button primary">Send</button>
</form>

الاسم

البريد الإلكتروني

الرسالة

ملاحظة إمكانية الوصول. يجب أن يكون لكل مدخل <label for="…"> مرتبط برمجيًا. اجمع عناصر التحكم ذات الصلة داخل <fieldset> مع <legend>. حدّد الحقول المطلوبة بـ required (ونجمة مرئية في نص التسمية).

التخطيط

البنى الأساسية — الشبكة، الحاوية، الترويسة — التي تؤطّر الصفحة بأكملها.

الشبكة

شبكة flex-N متجاوبة (1 ← 12 عمودًا) مبنية على flexbox. الحاوية الأب .row تضبط الفجوات والالتفاف تلقائيًا.

<div class="row">
  <div class="flex-6">Half</div>
  <div class="flex-6">Half</div>
</div>
<div class="row">
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
</div>

نصف

ثلث

ملاحظة إمكانية الوصول. يجب أن يتطابق الترتيب المرئي مع ترتيب DOM. تجنّب إعادة ترتيب الصفوف بـ flex-direction: row-reverse أو order: — قارئات الشاشة ومستخدمو لوحة المفاتيح يتبعون المصدر، وليس العرض.

ترويسة كاملة بـ CSS فقط مع زر hamburger متجاوب. بدون JavaScript. انسخ المقتطف أدناه في صفحة HTML جديدة تحمّل بالفعل skeletonic.min.css وستنطوي القائمة وتنفتح وتحبس التركيز بشكل صحيح من تلقاء نفسها.

<style>
  .sk-header{position:relative;display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border:1px solid #e4e4e7;border-radius:.5rem;background:#fff;}
  .sk-header .sk-brand{font-weight:600;color:#0a0a0a;text-decoration:none;}
  .sk-header .sk-toggle{position:absolute;left:-9999px;}
  .sk-header .sk-burger{display:none;margin-left:auto;cursor:pointer;padding:.625rem .75rem;border:1px solid #e4e4e7;border-radius:.375rem;font-size:1.125rem;line-height:1;min-width:2.75rem;min-height:2.75rem;}
  .sk-header .sk-burger:focus-within,.sk-header .sk-toggle:focus-visible+.sk-burger{outline:2px solid hsl(210,100%,42%);outline-offset:2px;}
  .sk-header .sk-menu{list-style:none;display:flex;gap:.25rem;margin:0 0 0 auto;padding:0;}
  .sk-header .sk-menu a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem .875rem;border-radius:.375rem;color:#1a1a1a;text-decoration:none;}
  .sk-header .sk-menu a:hover{background:#f4f4f5;}
  @media (max-width:640px){
    .sk-header .sk-burger{display:inline-flex;align-items:center;justify-content:center;}
    .sk-header .sk-menu{display:none;flex-direction:column;gap:0;position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid #e4e4e7;border-radius:.5rem;padding:.375rem;box-shadow:0 4px 24px rgba(0,0,0,.08);z-index:10;}
    .sk-header .sk-menu a{padding:.75rem 1rem;border-bottom:1px solid #f4f4f5;}
    .sk-header .sk-menu li:last-child a{border-bottom:0;}
    .sk-header .sk-toggle:checked ~ .sk-menu{display:flex;}
  }
</style>
<header class="sk-header">
  <a class="sk-brand" href="#">Brand</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Toggle navigation">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">About</a></li>
  </ul>
</header>

العلامة التجارية

ملاحظة إمكانية الوصول. يبقى مربع الاختيار المخفي في ترتيب التبويب حتى يتمكن مستخدمو لوحة المفاتيح من فتح القائمة بـ Space أو Enter. يحمل <label> السمة aria-hidden لأن مربع الاختيار نفسه هو مصدر الاسم المتاح. غيّر حجم النافذة إلى أقل من 640 بكسل لرؤية زر hamburger يتولى المهمة.

انظر ملاحظات إمكانية الوصول الكاملة → · تصفّح لوحات الألوان →

Skeletonic Stylus