توثيق قُرْطُبَة
دليل مرجعي كامل لمكوّنات الإطار. استخدم صندوق البحث أعلاه للوصول السريع، وجرّب تبديل الثيمات والوضع الليلي لترى تأثيرها الفوري على كل الأمثلة.
نظرة سريعة
قُرْطُبَة إطار عمل CSS يعتمد الاتجاه من اليمين لليسار افتراضياً، ويستخدم بادئة q- على كل الصفوف العامة لتفادي التعارض. كل الألوان والمقاييس متغيّرات CSS قابلة للتبديل وقت التشغيل.
var(--q-*) دائماً، ليعمل الوضع الليلي والثيمات تلقائياً.<!-- الحد الأدنى للبدء -->
<link rel="stylesheet" href="dist/qrtoba.min.css">
<script src="dist/js/qrtoba.js"></script>رموز التصميم
الإطار مبني على طبقتين: لوحة ألوان بدائية في Sass، ومتغيّرات دلالية في :root تُستخدم فعلياً داخل المكوّنات.
| المتغيّر | القيمة الافتراضية | الاستخدام |
|---|---|---|
--q-primary | زمرّدي عميق | اللون الأساسي للعلامة، الأزرار الأساسية |
--q-secondary | كهرماني محروق | اللون الثانوي والتمييز |
--q-gold | ذهبي | الزخارف، علامات الآيات، الشارات |
--q-bg | أبيض دافئ | خلفية الصفحة |
--q-surface | أبيض | خلفية البطاقات والأسطح |
--q-radius | 0.5rem | نصف القطر الافتراضي |
النظام اللوني والثيمات
الثيمات في قُرْطُبَة عبارة عن إعادة تعريف لمتغيّرات --q-*. النظام مستقل على محورين: الوضع (نهاري/ليلي) عبر data-theme، والثيم الجاهز عبر data-q-theme.
<html dir="rtl" data-theme="dark" data-q-theme="ramadan">توفّر الإطار 6 ثيمات جاهزة. شاهدها كلها وأجرِبها في معرض الثيمات.
الطباعة
يستخدم الإطار ثلاث عائلات خطوط: Tajawal للعناوين، Alexandria للنصوص، وAmiri لنص القرآن.
عنوان رئيسي H1
عنوان فرعي H2
عنوان H3
هذا نص عادي بمسافات سطر مريحة للقراءة العربية.
نص ثانوي باهت — .q-text-muted
الأزرار
الصنف الأساسي .q-btn مع المتغيّرات: primary، secondary، gold، outline-primary، ghost. ومقاسات: sm، lg.
<button class="q-btn q-btn-primary">أساسي</button>
<button class="q-btn q-btn-outline-primary q-btn-lg">محدّد كبير</button>الشارات
<span class="q-badge q-badge-gold q-badge-pill">مميّز</span>التنبيهات
<div class="q-alert q-alert-success">تم الحفظ بنجاح.</div>البطاقات
عنوان البطاقة
نص توضيحي قصير يصف محتوى البطاقة بأسلوب موجز.
<div class="q-card">
<div class="q-card-body">
<h3 class="q-card-title">عنوان البطاقة</h3>
<p class="q-text-muted">نص توضيحي.</p>
</div>
</div>النماذج
الجداول
| المادة | المحاضر | الحالة |
|---|---|---|
| الفقه الميسّر | د. أحمد | مكتمل |
| أصول التفسير | د. سارة | جارٍ |
شريط التنقل
الأكورديون
تفاعلي عبر Data-API — يفتح ويغلق بالضغط، ويعمل ب JavaScript المضمّن.
التقدّم والانتظار
نص القرآن
طباعة متخصّصة للمصحف مع علامات الآيات باستخدام .q-quran.
بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ
أوقات الصلاة
بطاقة جاهزة لعرض الصلوات الخمس بتنسيق أنيق.
- الفجر٤:٤٢
- الظهر١٢:٠٥
- العصر٣:٢٨
- المغرب٦:١٨
- العشاء٧:٤٨
التقويم الهجري
أداة JavaScript لتحويل التواريخ وتقويم شهري كامل.
data-q-hijri