مجموعة تنسيقات 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
  // لينيكس
  "Noto Sans",
  // Sans serif الرجوع إلى 
    sans-serif,
  // خطوط الأيقونات Emoji
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !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.
عُدِّلت المربّعات النصيّة بحيثُ يمكن تعديل حجمها عموديًّا فقط، إذ أنّ تعديل الحجم أفقيًّا “يكسر” مُخطَّط الصفحة.
يُعطى للعنصرين <button>s و<input> الخاصية cursor: pointer في حال كان ‎:not(:disabled)‎.

المؤشرات والأزرار

يوفر Reboot تحسينا للسمة role="button"لتغيير المؤشر الافتراضي إلى pointer. أضف هذه السمة إلى العناصر لتبيّن أنّها تفاعلية. هذا الدور ليس حكرا على الأزرار بالضرورة، والتي لها تعديلات خاصة بها فيما يخص cursor.

عناصر متفرّقة

العنوان

حُدِّث عنصُر العنوان (<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 ويظهر بالتالي أنّه يمكن التفاعل معه بالنقر عليه.

الخاصيّة `[hidden]` في HTML5

يضيف 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 تبقى كما هي، وأنّ العنصُر يؤثّر على تدفّق المستند.

مصادر

صفحة Reboot في توثيق Bootstrap.