Bootstrap/theming

خصِّص إطار العمل Bootstrap بمتغيّرات Sass الجديدة - المعدَّة مسبقا - الخاصّة بتفضيلات التنسيق العامّ من أجل تهيئة القوالب Theming والتعديل على العناصر بسهولة.

مقدّمة

كانت تهيئة القوالب في الإصدار الثالث من إطار العمل Bootstrap تعتمد كثيرا على تعديل متغيّرات LESS، صفحات أنماط مخصَّصة و قالب CSS يُضمَّن في ملفات المُجلَّد dist. يمكن ببذل جهد يسير إعادة تصميم مظهر في الإصدار الثالث من Bootstrap بدون المساس بالملفات الأصلية لإطار العمل. يوفّر الإصدار الرابع من إطار العمل Bootstrap مقاربة اعتيادية للمطورين، ولكنّها مختلفة قليلا عن الإصدار الذي يسبقه.

أصبحت القوالب تهيَّأ الآن بمتغيّرات Sass، خرائط Sass وبصفحات CSS مخصَّصة. لم يعد يوجد قالب CSS مخصَّص؛ يمكنك بدلا من ذلك تفعيل القالب المُعدّ مسبقا لإضافة التدرّجات، الظلال وغيرها.

استخدم ملفات Sass المصدرية للاستفادة من المتغيّرات، المخاليط Mixins، الجداول Maps وغيرها.

بنية الملفات

تجنّب تغيير ملفات Bootstrap الداخليّة كلّ ما أمكنك ذلك. يعني هذا - على مستوى Sass - إنشاء صفحات أنماط خاصّة تستورد تنسيقات Bootstrap لكي تعدّل عليها وتمدّدها. ستكون لديك، على اعتبار أنك تستخدم مدير حزم مثل npm، بنية ملفات تشبه التالي:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

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

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

الاستيراد

يستورد الملف custom.scss ملفات Sass المصدرية من إطار العمل Bootstrap. لديك خياران: تضمين جميع الملفات المصدرية من Bootstrap أو اختيار الأجزاء التي تحتاجها. يشجّع مطوّرو Bootstrap الخيار الثاني، لكن انتبه إلى أنه توجد متطلّبات واعتماديّات بين عناصر إطار العمل. تحتاج أيضا لتضمين بعض ملفات JavaScript لتعمل الملحقات.

// Custom.scss
// الخيار الأول: تضمين إطار العمل كاملا 
@import "node_modules/bootstrap/scss/bootstrap";
```
```css
// Custom.scss
// الخيار الثاني: تضمين أجزاء من إطار العمل 

// مطلوب
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// اختياري
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

يمكن بعد إعدادات الضّبط أعلاه البدء في التعديل على متغيّرات Sass وجداوله ضمن الملف custom.scss. يمكنك إضافة أجزاء من إطار العمل Bootstrap ضمن المقطع الاختياري حسب الحاجة. نقترح إضافة القائمة الكاملة للاستيرادات من ملف bootstrap.scss لتكون نقطة بداية لك.

القيم المبدئية للمتغيّرات

يحوي كلّ متغيّر Sass في إطار العمل Bootstrap العلامة !default ليعطيك إمكانية إبطال القيمة المبدئية للمتغيّر في ملفات Sass الخاصّة بك دون الحاجة للتعديل على الملفات المصدرية لإطار العمل. انسخ المتغيّرات وألصقها حسب الحاجة، غيّر قيمها واحذف العلامة !default. إن أسندت قيمة إلى متغيّر فلن يعيد Bootstrap إسنادها بالقيم المبدئية.

يمكن أن يُبطَل متغيّر في ملفّ Sass قبل المتغيّرات المبدئية أو بعدها؛ إلا أن القيم العابرة للملفات يجب أن تأتي قبل استيراد ملفات Sass الخاصّة بإطار العمل Bootstrap.

في ما يلي مثال على تغيير لون الخلفية ولون النّص بالنسبة للعنصر <body> عند استيراد Bootstrap وتجميعه بواسطة npm:

// إبطال القيم المبدئية
$body-bg: #000;
$body-color: #111;

// Bootstrap ومتغيّراته المبدئية
@import "node_modules/bootstrap/scss/bootstrap";

كرّر العمليّة حسب الحاجة على أي متغيّر في إطار العمل Bootstrap، بما في ذلك الخيارات العامة أدناه.

الجداول والحلقات

يحوي إطار العمل Bootstrap مجموعة من جداول Sass، وهي أزواج من المفاتيح والقيم المصاحبة لها تسهّل توليد مجموعات من صفحات CSS المترابطة. يستخدم Bootstrap الجداول للألوان، حدود الشبكة Grid Breakpoints، وغيرها. تتضمّن جدوال Sass جميعا - كما في المتغيّرات - العلامة !default ويمكن إبطال مفعولها وتمديدها.

تغيير جدول

أضف التالي إلى ملفّ Sass المخصَّص الخاصّ بك لتغيير اللون في جدول ألوان القالب $theme-colors:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

الإضافة إلى جدول

أضف مفتاحا وقيمة جديديْن إلى $theme-colors لإضافة لون جديد:

$theme-colors: (
  "custom-color": #900
);

الحذف من جدول

استخدم map-remove لحذف الألوان من $theme-colors، أو أي جدول آخر. انتبه إلى أنه يتوجّب إدراج العنصُر بين متطلّبات إطار العمل وخياراته:

// مطلوب
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// اختياري
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
...

المفاتيح المطلوبة

يفترض إطار العمل Bootstrap تواجد بعض المفاتيح المحدَّدة في جداول Sass؛ يستخدم Bootstrap هذه المفاتيح ويمدّدها. عند تخصيص الجداول المُضمَّنة، قد تلاقي أخطاء في أماكن يُستخدَم فيها مفتاح Sass مُحدَّد.

على سبيل المثال، يستخدم Bootstrap المفاتيح success، primary وdanger من الجدول $theme-colors في تنسيق الروابط، الأزرار وحالات الاستمارات Forms. لا يمثّل إبدال قيم هذه المفاتيح أي مشكل؛ إلا أن حذفها قد يتسبّب في أخطاء عند تجميع Sass. يتوجّب في هذه الحالات تعديل شفرة Sass التي تستخدم هذه القيم.

الدوالّ

يستخدم Bootstrap دوالّ Sass عدّة، إلا أنه لا يمكن تطبيق سوى جزء منها لتهيئة القوالب بصفة عامة. توجد ثلاث دوالّ للحصول على قيم من جداول الألوان:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

تستطيع استخدام هذه الدوالّ لاختيار لون من جدول Sass بنفس الطريقة التي كنت تستخدم بها متغيّر لون في الإصدار 3 من Bootstrap.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

توجد دالّة أخرى تمكّن من الحصول على مستوى معيَّن من لون في جدول $theme-colors. تخفّف القيم السالبة من كثافة اللون، في ما تزيد القيم الموجبة هذه الكثافة.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

يعني هذا عمليا أن تستدعي الدالة وتمرّر لها معامليْن: اسم اللون في $theme-colors (مثلا primary أو danger) ومستوى عدديا.

.custom-element {
  color: theme-color-level(primary, -10);
}

تمكن إضافة دوالّ في المستقبل أو عن طريق Sass مخصَّص لإنشاء دوالّ مستوى لجداول Sass أخرى، أو ربما دوالّ عمومية إن كنت تريد الإسهاب.

تباين الألوان

يتضمّن Bootstrap دالة إضافية لتباين الألوان: color-yiq.تستخدم هذه الدالة فضاء الألوان YIQ للحصول تلقائيا على تباين لوني مضيء (#fff) أو مظلم (#111) بالاعتماد على اللون القاعدي المحدَّد. هذه الدالة مفيدة، خصوصا في المخاليط Mixins والحلقات Loops عندما تولّد أصنافا Classes عدّة.

يوضّح المثال التالي توليد عيّنات ألوان من الجدول $theme-colors:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

يمكن كذلك أن تستخدَم للحصول على تباين وحيد عند الحاجة:

.custom-element {
  color: color-yiq(#000); // ترجع `color: #fff`
}

كما يمكن أن تستخدم لتحديد لون قاعدي بالتزامن مع دوال جدول الألوان:

.custom-element {
  color: color-yiq(theme-color("dark")); // ترجع `color: #fff`
}

خيارات Sass

استخدم ملف المتغيّرات المخصَّصة المُضمّن لتخصيص Bootstrap وبدّل تفضيلات CSS العامّة بمتغيّرات Sass الجديدة $enable-*. أبطل قيمة المتغيّرات وأعد تجميع الشفرة المصدرية حسب الحاجة بالأمر npm run test.

يمكن أن تعثُر على هذه المتغيّرات وتخصّص عبرها الخيارات الأساسية العامّة في الملف scss/_variables.scss ضمن إطار العمل Bootstrap.

المتغيّر	القيم	الوصف
`$spacer`	`1rem` (مبدئيا)، أو أي قيمة > 0	يحدّد قيمة التباعد Spacer المبدئية لتوليد أدوات التباعد برمجيا.
`$enable-rounded`	`true` (مبدئيا) أو `false`	يفعّل تنسيقات `border-radius` المعرَّفة مسبقا على عناصر مختلفة.
`$enable-shadows`	`true` أو `false` (مبدئيا)	يفعّل تنسيقات `box-shadow` المعرَّفة مسبقا على عناصر مختلفة.
`$enable-gradients`	`true` أو `false` (مبدئيا)	يفعّل التدرّجات المعرَّفة مسبقا عبر تنسيقات `background-image`.
`$enable-transitions`	`true` (مبدئيا) أو `false`	يفعّل الانتقالات Transitions المُعرَّفة مسبقا على عناصر مختلفة.
`$enable-hover-media-query`	`true` or `false` (مبدئيا)	لم يعد منصوحا به
`$enable-grid-classes`	`true` (مبدئيا) أو `false`	يفعّل أصناف CSS لنظام الشبكة (مثلا `.container`، `.row`و `.col-md-1` ).
`$enable-caret`	`true` (مبدئيا) أو `false`	يفعّل العنصر المزيَّف `caret` على `.dropdown-toggle`.
`$enable-print-styles`	`true` (مبدئيا) أو `false`	يفعّل تنسيقات لتحسين الطباعة.

الألوان

تنشئ سلسلة من الألوان المُعرَّفة مسبقا في جدول Sass عناصر وأدوات متعدّدة في Bootstrap. يمكن تنفيذ حلقات تكرارية في Sass على هذا الجدول لتوليد سلسلة من مجموعات القواعد بسرعة.

جميع الألوان

تتوفّر الألوان التالية في Bootstrap 4 عبر متغيّرات Sass وجدول Sass ضمن الملف scss/_variables.scss. تمدّد الإصداراتُ الفرعية المقبلة هذا الملف لإضافة درجات ألوان جديدة، على شاكلة لوحة تدرّجات البنّي أدناه.

الأزرق Blue
النيلي Indigo
الأرجواني Purple
الوردي Pink
الأحمر Red
البرتقالي Orange
الأصفر Yellow
الأخضر Green
الأزرق المخضرّ Teal
الأزرق السماوي Cyan

في ما يلي كيفية استخدام هذه الألوان في شفرة Sass الخاصّة بك:

// باستخدام المتغيّر
.alpha { color: $purple; }

// بالاختيار من جدول Sass عبر الدالة color()
.beta { color: color("purple"); }

تتوفّر كذلك أصناف أدوات الألوان لتعيين لونيْ النص color والخلفية background-color.

ملحوظة: يهدف مطوّرو Bootstrap في المستقبل إلى توفير جداول ومتغيّرات Sass لدرجات كلّ لون، كما هي حال لوحة تدرّجات اللون البني أدناه.

ألوان القوالب

يستخدم Bootstrap مجموعة مُصغَّرة من الألوان السابقة لإنشاء لوحة ألوان لتوليد تخطيطات لونية تتوفّر بصيغة متغيّرات وجدول Sass ضمن الملف scss/_variables.scss.

اللون الأولي Primary
الثانوي Secondary
لون النجاح Success
لون الخطر Danger
لون التحذير Warning
لون المعلومات Info
اللون الخفيف Light
اللون الغامق Dark

تدرجات البني Gray scale

توجد مجموعة واسعة من متغيّرات اللون البني وجدول Sass في الملف scss/_variables.scss للحصول على درجات متناغمة من اللون البنّي عبر مشروعك.

gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900

تجد في الملف scss/_variables.scss المتغيّرات وجدول Sass الخاصّين بالألوان. في ما يلي مثال على الجدول $colors:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

أضف قيما جديدة، غيّر أو احذف قيما موجودة في الجدول لتحديث كيف تستخدم هذه الألوان في العناصر الأخرى من إطار العمل. للأسف، لا تعتمد جميع العناصر على هذا الجدول. ستسعى التحديثات المقبلة لإطار العمل من أجل تحسين هذا الأمر. خطّط في انتظار ذلك لاستخدام متغيّرات ${color} والجدول $colors.

العناصر

تُنشَأ عناصر وأدوات كثيرة في Bootstrap بحلقة @each تمرّ على جدول Sass. يساعد هذا الأمر كثيرًا في توليد تنويعات على عنصُر بتمديد الجدول $theme-colors وإنشاء تنويعات متجاوبة لكلّ نقطة حدية. سترى انعكاس التغييرات مباشرة في الحلقات بعد تخصيص جداول Sass وتجميع الشفرة.

المعدّلات Modifiers

تُنشَأ الكثير من عناصر Bootstrap حسب مقاربة تعتمد على صنف معدِّل قاعدي. يعني هذا أن التنسيق المُجمَل للعنصُر محتوًى في صنف قاعدي (مثل .btn) بينما تُضمَّن تنويعات التنسيق ضمن أصناف معدِّلة (مثل .btn-danger). تُنشَأ الأصناف المعدِّلة من الجدول $theme-colors من أجل تخصيص عدد الأصناف المعدِّلة وأسمائها.

في ما يلي مثالان لكيفية المرور على الجدول $theme-colors لتوليد أصناف معدِّلة على العنصُر .alert (تنبيه) وجميع أدوات الخلفية .bg-*.

// توليد الأصناف المعدِّلة للعنصُر alert
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// توليد ألوان أدوات `.bg-*`
 Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

التجاوب

لا تقتصر حلقات Sass على جداول الألوان، بل يمكنك كذلك توليد تنويعات متجاوبة من عناصر إطار العمل وأدواته. خذ على سبيل المثال الأدوات المتجاوبة لمحاذاة النصّ حيث نجمع بين تطبيق الحلقة @each على الجدول $grid-breakpoints مع تضمين استعلام وسيط Media query.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

إن احتجت للتعديل على الجدول $grid-breakpoints الخاصّ بك فستُطبَّق جميع تغييراتك على الحلقات المارّة على هذا الجدول.

متغيّرات CSS

يحوي Bootstrap 4 ضمن شفرته المُجمَّعة حوالي دزينتيْن من خاصيّات CSS المُخصَّصة (متغيّرات). توفّر هذه المتغيّرات وصولا سهلا إلى القيم التي يكثُر استخدامها مثل ألوان القالب، النقاط الحديّة وحزمة الخطوط الأساسية للعمل عليها في مفتّش المتصفّح Browser’s inspector، آلية تحديد الوصول إلى شفرة برمجية Sandbox أو النمذجة Prototyping العامة.

المتغيّرات المتوفّرة

في ما يلي متغيّرات CSS المُضمَّنة في Bootstrap 4 (لاحظ أن :root مطلوب). توجد هذه المتغيّرات في الملف _root.scss.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

أمثلة

توفّر متغيّرات CSS مرونة مشابهة لمتغيّرات Sass، لكن بدون الحاجة لتجميعها قبل التقديم إلى المتصفّح. على سبيل المثال، نعيد أدناه إعداد تنسيق خطوط الصفحة وروابطها بمتغيّرات CSS.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

يمكن كذلك استخدام متغيّرات النقاط الحدّيّة Breakpoints في استعلامات الوسائط:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}

المصادر

صفحة Theming Bootstrap ضمن توثيق Bootstrap.