أفضل البدائل لـ Bootstrap

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

منذ إنشائها في عام 2011 ، كانت Bootstrap تحظى بشعبية كبيرة بين مطوري الواجهة الأمامية. من السهل التعلم والاستخدام – ومع ذلك ، هذا لا يعني أنه يحتوي على كل شيء. علاوة على ذلك ، فإن التصميم القائم على Bootstrap الذي يمكن التعرف عليه بسهولة يجعل جزءًا كبيرًا من الويب يبدو كما هو. في هذا البرنامج التعليمي ، سوف نقدم لك مجموعة من بدائل Bootstrap التي قد تتناسب مع احتياجاتك بشكل أفضل.

Foundation: للمواقع ورسائل البريد الإلكتروني

أحد البدائل الأكثر شهرة في Bootstrap هو Foundation ، الذي نشرته ZURB في عام 2011. يمكنك استخدامه في الواجهة الأمامية للمواقع والتطبيقات سريعة الاستجابة. يدعي المطورون في ZURB أيضًا أن Foundation متوافق مع أي تقنية خلفية وأي خادم.

تمامًا مثل Bootstrap ، فإن Foundation مفتوح المصدر: يمكنك العثور على جميع الملفات على GitHub. يتم إنشاء بنية الإطار باستخدام HTML و CSS و JavaScript ، ويعمل الإطار نفسه في المستعرض دون الحاجة إلى أي برامج إضافية.

يكمن أصل المؤسسة في قواعد دليل أسلوب ZURB الذي اتبعته الشركة منذ عام 2008. في الوقت المناسب ، نمت لتصبح إطارًا استخدمه الفريق داخليًا في البداية وتم طرحه للجمهور لاحقًا. تستخدم ZURB Foundation لعملائها الآن أيضًا: تحتوي القائمة على أسماء شائعة مثل Coca Cola و Pixar و Barclays و Ford ومجموعة كاملة من الآخرين.

منذ البداية ، عمل الفريق مع نهج المحمول أولاً. يُنصح المستخدم بالبدء في إنشاء أصغر إصدار من تصميمه أولاً ، ثم توسيعه. يتيح التصميم من الأسفل لأعلى للمطور تجنب التحميل الزائد للشاشات الصغيرة بميزات غير ضرورية تؤدي إلى إبطاء التحميل.

باستخدام Foundation for Emails ، يمكنك أيضًا إنشاء رسائل بريد إلكتروني سريعة الاستجابة. هذه ميزة مفيدة للغاية في الوقت الحاضر: تشير التقديرات إلى أن أكثر من نصف رسائل البريد الإلكتروني مفتوحة على الأجهزة المحمولة. هذه هي أيضًا الطريقة التي يصل بها 75 في المائة من مستخدمي Gmail (مما يجعل 675 مليون شخص ضخمًا) إلى حساباتهم.

مقارنة بين Bootstrap و Foundation ، يمكننا أن نرى بعض الاختلافات الواضحة على الفور. بينما من الواضح أن Bootstrap أكثر شيوعًا ، إلا أن هذا يمنح أيضًا موقع الويب المستند إلى Foundation ميزة بسيطة من وجود تصميم أكثر تميزًا. ميزة أخرى لديها هو المدمج في الحاجيات الإضافية. يمكنك استخدام Abide للتحقق من صحة النموذج ، وإضافة قوائم قماشية وجداول تسعير تلقائية عند الاقتضاء. مدونة مكتوبة هي أيضا مؤسسة عموما أكثر خفيفة الوزن.

Bulma: اختيار CSS النقي

آخر واحد من بدائل Bootstrap للنظر هو بولما. بالمقارنة مع الأطر الأمامية الشائعة الأخرى ، فهو جديد إلى حد ما (متاح فقط للمبرمجين منذ عام 2016). ومع ذلك ، فإن لديها تمييزًا واضحًا جدًا: استخدام Bulma لا يتضمن جافا سكريبت – فقط CSS خالص.

في جوهرها ، بولما هي مكتبة من فصول CSS. نموذج الصندوق الذي يستخدمه يعتمد بالكامل على Flexbox. بشكل أساسي ، يتكون Bulma من أقل من أربعين ملفًا من ملفات SASS (صفائح الأنماط الرائعة التركيبية). يمكنك استيرادها بشكل فردي إذا كنت لا ترغب في استخدام جميع الميزات.

تمامًا مثل Foundation ، تتبنى Bulma نهجًا أوليًا للهاتف المحمول وتعطي الأولوية لتحسين القراءة الرأسية. هذا يعني أن التخطيط الافتراضي سوف يكدس الأعمدة رأسياً ويخفي قائمة التنقل عند نقطة توقف الهاتف المحمول. وقبل أن تسأل – نعم ، تشتمل نقاط التوقف الأخرى المتاحة على أسماء بديهية إلى حد ما: إنه الجهاز اللوحي ، سطح المكتب ، الشاشة العريضة ، و fullhd. بشكل عام ، يعد بناء الجملة المقروء وسهل الفهم قوة أخرى من Bulma.

ليست هناك حاجة لجافا سكريبت وبناء جملة سهل المبتدئين ليست هي المزايا الوحيدة التي يمكنك تسميتها عند مقارنة Bulma مقابل Bootstrap. كما أنه مزود بأكثر من مائة فصول مساعدة CSS ودعم Font Font ممتاز. ومع ذلك ، فإن Bootstrap لديه ميزة بسيطة تتمثل في وجود مجتمع مستخدم أوسع. كما أنه يعمل بشكل أفضل قليلاً في Internet Explorer.

بدائل Bootstrap على أساس تصميم المواد

طورت Google لغة تصميم تسمى Material Design في عام 2014 وقدمت تحديثات مهمة إلى عام 2018. جاءت الفكرة من ميزة البطاقة التي قدمتها Google Now. عندما أصبحت لغة تصميم متسقة ، بدأت في دعم تخطيطات الشبكة وتأثيرات العمق والرسوم المتحركة سريعة الاستجابة. وفقا للمطورين ، أخذوا الإلهام من الورق والحبر. كان من المفترض استخدام تصميم المواد لتطبيقات Google الخاصة في البداية. إنه يعمل بسلاسة في جميع إصدارات Android ، أيضًا. ومع ذلك ، في الوقت المناسب ، أصبحت مجموعة الأدوات متاحة للجمهور.

هناك إطاران يعتمدان على لغة تصميم المواد. أول واحد يسمى المواد تصميم لايت (MDL). تمثل الكلمة الأخيرة في العنوان بساطة الاستخدام والحجم الصغير وهدف واحد (تصميم موقع الويب فقط). ليس فقط أنه يحتوي على مجموعة كبيرة من المكونات ، ولكن يمكنك أيضًا دمجه مع لغة ترميز Elm. بسبب القوالب المختلفة ، قد يكون MDL أحد أبسط بدائل Bootstrap للمبتدئين. ومع ذلك ، فهذا يعني أيضًا وجود خطر في أن موقع الويب الخاص بك قد يفتقر إلى اللمسة الفريدة.

بعد ذلك ، لدينا إطار أمامي سريع الاستجابة يسمى Materialize. ببساطة ، إنها مكتبة خفيفة الوزن تم إنشاؤها باستخدام CSS و JavaScript و HTML. يمكنك إما استخدام إصدار قياسي أو إصدار يستند إلى SASS – ومع ذلك ، ضع في اعتبارك أن كلا منهما يستهلك قدرًا كبيرًا من الذاكرة ، مقارنة ببدائل Bootstrap الأخرى.

Materialize محايد للنظام الأساسي ، مما يعني أن التصميم الذي تقوم بإنشائه سيبدو رائعًا بنفس القدر على شاشة من أي حجم. لسوء الحظ ، لا يمكن قول الشيء نفسه عن توافق المتصفح نظرًا لأنه لا يستخدم Flexbox. قد يتسبب هذا في حدوث مشكلات عند التشغيل في Internet Explorer الآن ويزيد من خطر التوافق في المستقبل.

عندما تقوم بمقارنة الأطر القائمة على Bootstrap مقابل أطر التصميم المادي ، فإن الفرق الأول والأهم هو قاعدة المستخدمين. كان Bootstrap موجودًا منذ بضع سنوات ، مما أدى إلى زيادة عدد المستخدمين. اعتبارا من الآن ، لديها 137000 نجم على GitHub ، في حين أن Materialize لديها 37000 و MDL 31000. من الأسهل على مبتدء Bootstrap الحصول على المساعدة في منتديات المجتمع ومجموعات المستخدمين ، وبالتالي ، لا يبدو منحنى التعلم مخيفًا.

Semantic UI

أول ما يلاحظه المطور عادة حول هذا الإطار التالي هو حجمه. عند المقارنة بين Semantic UI و Bootstrap ، ضع في اعتبارك ما يلي: الشكل الأكثر أساسية لـ Semantic UI يأتي مع أكثر من عشرين سمة ، بينما يحتوي Bootstrap على واحد فقط. هذا الشيء بالتأكيد ضخم. ليس من السهل التثبيت أيضًا.

ومع ذلك ، هناك سبب للثقل. لا شيء يطابق واجهة المستخدم الدلالية إذا كنت تبحث عن التخصيص. يوفر أكثر من ثلاثة آلاف من متغيرات theming ومكونات واجهة المستخدم للمستخدم العديد من الخيارات والعناصر أكثر من Bootstrap على الإطلاق. كان المبدأ الرئيسي الذي وضعه المطورون في الاعتبار عند إنشاء الإطار هو الصدق التدريجي. تتمثل الفكرة في أنه ينبغي لمستخدمي واجهة المستخدم الدلالية أن يهدفوا إلى اختيار المتغيرات المتاحة وتخصيصها ، بدلاً من البدء بصفحة فارغة.

كما يوحي الاسم نفسه ، تكمن الميزة التالية لواجهة المستخدم الدلالية في الدلالات. إن استخدام أسماء الفئات البسيطة للقراءة والفهم يجعل الأمر بسيطًا وبسيطًا حتى يبدأ مبتدئ العمل في إطار العمل. علاوة على ذلك ، تعمل واجهة Semantic على تبسيط عملية التصحيح وتدعم الكثير من التطبيقات الخارجية ، بما في ذلك على سبيل المثال لا الحصر Meteor و React و Angular.

تم إصدار واجهة المستخدم الدلالية لأول مرة في عام 2013. وأحدث إصدار متاح هو 2.4 ، والذي قدم قوائم منسدلة قابلة للتطبيق ، وعناصر نائبة ، وشرائح نائبة ، بالإضافة إلى تحسينات في أشكال flexbox المرنة.

قد تأتي أيضًا على إطار يسمى Unsemantic. لا تختلط: على الرغم من الأسماء المماثلة ، فإن Semantic UI و Unsemantic هما مشروعان مختلفان تمامًا. أنشأ ناثان سميث برنامج Unsemantic كخليفة لمشروعه السابق ، والذي أطلق عليه اسم 960 Grid System. ومع ذلك ، فإن واحدة جديدة لم تصبح منافس حقيقي. بحلول نهاية عام 2019 ، أصبح لديها ما يزيد قليلاً عن ألف نجم على جيثب ، وكان تاريخ الالتزام الأخير قبل عامين تقريبًا. من المحتمل أن نقول إنه بالكاد يكون منافسًا عند اختيار أحد بدائل Bootstrap.

Bootstrap أم البدائل؟

Bootstrap رائع. ومع ذلك ، قد تعمل أطر مختلفة بشكل أفضل لمشاريع مختلفة. نأمل أن يساعدك تقديمنا الشامل لبدائل Bootstrap الأكثر شيوعًا في فهم أوجه التمييز بينها وجعل اختيارك.