مجموعة تنسيقات Reboot في إطار العمل Bootstrap
يوفّر Reboot - وهو مجموعة من تعديلات CSS خاصّة ببعض العناصر وتوجد في ملفّ واحد - أساس عمل بسيط، ومتناسق وأنيق يُبنى عليه إطار العمل Bootstrap.
المقاربة المستخدَمة في Reboot
يعتمد Reboot على مشروع Normalize ويوفّر عناصر HTML عدّة بتنسيقات مُختارة تقتصر على استخدام محدّدات CSS فقط. تُطبَّق التنسيقات الإضافيّة باستخدام الأصناف فقط. على سبيل المثال، يستخدم إطار العمل Bootstrap تنسيقات Reboot لإعداد أساس عمل قاعدي لتنسيق الجداول <table> ثم يوفّر لاحقًا الصّنفيْن .tableو .table-bordered وغيرهما لعمل تنسيقات إضافيّة على الجداول.
نذكر في ما يلي قواعد عامّة وأسبابًا لاختيّار التنسيقات الموجودة في Reboot وتطبيق مفعولها:
- تحديث القيم المبدئيّة في بعضٍ من المتصفّحات من أجل استخدام وحدة القياس
remبدلًا منemللحصول على تباعد قابل للتمديد (scalable) بين المكوّنات. - تجنّب الخاصيّة
margin-top. تتميّز الحاشيّات العموديّة بأنّها تتقلّص (collapse)، ممّا ينتُج عنه نتائج غير متوقَّعة؛ والأمر الأهمّ أنّ اتّخاذ اتّجاه واحد للحاشيّات يعدّ نموذجًا ذهنيًّا أسهل. - يجب أن تستخدم العناصر الكتليّة (block elements) وحدة القياس
remفي الحاشيّات وذلك بهدف تمدّد أسهل عبر مختلف قياسات الأجهزة. - عدم تعريف الخاصيّات المرتبطة بالخاصيّة
fontإلا عند الضّرورة، واستخدام الكلمة المحجوزةinheritكلّ ما أمكن ذلك.
الخيارات المبدئيّة للصفحات
يُحدَّث العنصران <html> و <body> لتوفير قيم مبدئيّة أفضل للتطبيق على الصّفحة كاملة. خصوصًا:
- تأخذ الخاصيّة
box-sizingالقيمةborder-boxعلى جميع العناصر؛ بما في ذلك*::beforeو*::after. تضمن هذه الطريقة ألّا يُتجاوز العرض المُعرَّف بسبب الحاشية (padding) أو إطار العنصُر (border). - لا تُعرَّف قيمة أساسيّة للخاصيّة
font-sizeضمن العنصُر<html>؛ إلّا أنّه يُفتَرَض أنّ القيمة تساوي16px(القيمة المبدئيّة في المتصفّح). تُطبَّق الخاصيّةfont-size: 1remعلى العنصُر<body>للحصول على تمدّد متجاوب باستخدام استعلامات الوسائط مع احترام تفضيلات المستخدم وضمان مقاربة يسهُل التعاطي معها. -يعيّن العنصُر كذلك قيمًا عامةً لكلّ من الخاصيّاتfont-familyوline-heightوtext-align. ترِث بعضٌ من عناصر الاستمارات Forms هذه القيم للحيلولة دون عدم تناسق الخطوط. - يُعرّف العنصُر
<body>- احتيّاطًا - القيمة المبدئيّة#fffللخاصيّةbackground-color.
كومة الخطوط الأصيلة Native في نظام التشغيل
توقّف الإصدار 4 من إطار العمل Bootstrap عن استخدام خطوط الويب المبدئية (Helvetica Neue، و Helvetica، و Arial) واستعاض عنها «بمجموعة الخطوط الأصيلة» (native font stack) للحصول على عرض أفضل على جميع الأجهزة وأنظمة التشغيل.
$font-family-sans-serif:
// متصفّح Safari على OS X و iOS (خطّ San Francisco)
-apple-system,
// Chrome < 56 على نظام OS X (خطّ San Francisco)
BlinkMacSystemFont,
// وندوز
"Segoe UI",
// أندرويد
"Roboto",
// خطوط الويب الأساسيّة
"Helvetica Neue", Arial, sans-serif,
// خطوط الأيقونات Emoji
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
تُطبَّق قيمة الخاصيّة font-family على العنصُر <body> وترثها جميع العناصر تلقائيًّا عن طريق إطار العمل Bootstrap. حدّث المتغيّر $font-family-base ثم أعد تجميع الملفات المصدريّة لإطار العمل Bootstrap من أجل تغيير قيمة الخاصيّة font-family.
الترويسات والفقرات
يُعاد تعيين جميع عناصر الترويسات - مثل <h1> - والفقرات (<p>) من أجل حذف قيم الخاصيّة margin-top. تُضاف القيمة margin-bottom: .5rem إلى جميع الترويسات والقيمة margin-bottom: 1rem إلى الفقرات من أجل تباعد أسهل.
القوائم
يُحذَف الهامش العلويّ - الخاصيّة margin-top - من جميع القوائم - <ul>، و <ol>، و <dl> - وتُعيَّن الهوامش السفليّة بالقيمة margin-bottom: 1rem. لا تحوي القوائم الفرعيّة هامشًا سفليّا.
تُحدَّث قيمة الهوامش في قوائم الوصف (<dl>) من أجل الحصول على تنسيق أبسط، وهرميّة أوضح وتباعد أفضل. يعيد العنصُر <dd> (وصف عنصُر في قائمة الوصف) تعيين قيمة الهامش الأيسر margin-left إلى 0 ويضيف هامشا سفليًّا margin-bottom: .5rem. يظهر الخطّ في عناصر قائمة الأوصاف (<dt>) بخط عريض Bold.
النصوص المُهيَّأة مسبقًا (Preformatted text)
يُعاد تعيين العنصُر <pre> لحذف الهامش العلويّ margin-top واستخدام وحدات القياس rem للهامش السفليّ margin-bottom.
الجداول (Tables)
عُدِّلت الجداول قليلًا لتنسيق عنوان الجدول (<caption>)، وتقليص الإطار وضمان محاذاة نصّ (text-align) متناسقة عبر الجدول. يتضمّن الصّنف .table تعديلات إضافيّة على أُطُر الجداول والحاشيّات وعناصر أخرى.
الاستمارات (Forms)
أعيد تعيين عناصر متعدّدة في الاستمارات لإنشاء تنسيقات قاعديّة أبسط. في ما يلي بعضٌ من أكثر التعديلات أهميّة:
- لا يوجد إطار ولا هامش ولا حاشيّة على مجموعة حقول (
<fieldset>)؛ بحيث يسهُل استخدامه لتغليف المُدخلات الفرديّة أو مجموعات المُدخلات. - أعيد تنسيق العناصر
<legend>، كما هي حال<fieldset>، لتُعرَض على هيئة ترويسة. - عُدِّلت طريقة عرض اللافتات (
<label>) لتصبحdisplay: inline-blockلكي يمكن تطبيق الهامش (margin) عليها. - صحّحت تنسيقات Normalize كثيرًا من مظهر الحقول (
<input>)، وقوائم الاختيار (<select>)، والمربّعات النصيّة (<textarea>) والأزرار (<button>)؛ إلا أنّ تنسيقات Reboot تحذف الهوامش (margin) عنها وتعيّن القيمةinheritلارتفاع السّطرline-height: inherit. - عُدِّلت المربّعات النصيّة بحيثُ يمكن تعديل حجمها عموديًّا فقط، إذ أنّ تعديل الحجم أفقيًّا “يكسر” مُخطَّط الصفحة.
عناصر متفرّقة
العنوان
حُدِّث عنصُر العنوان (<address>) ليعيد تعيين القيمة المبدئيّة للخاصيّة font-style من italic إلى normal. كما أصبح يرِث قيمة الخاصيّة line-height وأضيفت إليه حاشيّة سفليّة بقيمة 1rem. يوفرّ العنصُر <address> معلومات التواصل للمحتوى الموجود في أقرب عنصر أب (أو لكامل المستنَد). حافظ على تهيئة الحقول باستخدام عناصر الانتقال إلى سطرٍ جديد <br>.
الاقتباس
أعيد تعيين القيمة المبدئية للهامش (margin) في الاقتباسات (blockquote) من 1em 40px إلى 0 0 1rem لتكون أكثر تناسقًا مع بقيّة العناصر.
العناصر السطريّة Inline elements
تلقّى عنصُر الاختصار <abbr> تنسيقات قاعديّة لجعله يبرُز في نصّ الفقرة.
العنصُر <summary>
تأخذ الخاصيّة cursor في العنصُر <summary> مبدئيًّا القيمة text، لذا أعيد تعيينها لتكون pointer ويظهر بالتالي أنّه يمكن التفاعل معه بالنقر عليه.
يضيف HTML5 خاصيّة عامّة جديدة تُسمَّى [hidden] تُنسَّق مبدئيًّا حسب طريقة العرض display: none. استعار Reboot فكرة من PureCSS تقضي بتحسين طريقة العرض المبدئيّة لتصبح [hidden] { display: none !important; } ممّا يحول دون إبطال قيمة الخاصيّة display عن غير قصد. لا يدعم الإصدار 10 من Internet Explorer الخاصيّة [hidden] إلّا أنّ تعريفها بصراحة ضمن شفرة CSS الخاصّة بإطار العمل يتلافى هذه المشكلة.
<input type="text" hidden>
تحذير: غياب التوافق مع jQuery
لا تتوافق الخاصيّة [hidden] مع التابعيْن $(...).hide() و $(...).show() في jQuery. لهذا السّبب لا يُفضّل إطار العمل Bootstrap استخدام الخاصيّة [hidden] بدلًا من الطرائق الأخرى للتحكّم في الخاصيّة display.
استخدم الصّنف .invisible إنْ كان كلّ ما تريده هو تبديل قابليّة رؤية عنصُر؛ بمعنى أنّ قيمة الخاصيّة display تبقى كما هي، وأنّ العنصُر يؤثّر على تدفّق المستند.