أفضل أطر تصميم المواقع Frontend Frameworks
انتشر الكثير من أطر تصميم المواقع Frontend Frameworks ولكن القليل منها اثبت مكانته وقوته و أستمر بتقديم المرونة و القوة للمصممين و المبرمجين لبناء اجمل التصاميم لمشاريعهم البرمجية
لكل إطار Framework نقاط قوة و نقاط ضعف ولكن المميز في الأطر Frameworks الحديثة مرونتها بحيث ان الإطار مصمم على هيئة وحدات بحيث يسمح لك بإستخدام الإطار Framework بشكل كامل او بعض أجزائه بما يناسب مشروعك او حتى إستخدام وحدات من أطر Frameworks مختلفة وكله بما يناسب مشروعك
سوف نستعرض أفضل أطر تصميم المواقع Frontend Frameworks و بعض المزايا التي تقدم لمشاريعك البرمجية
1. Bootstrap
Bootstrap يعتبر من افضل الأطر الموجودة وخاصة ان شهرة الإطار تزيد يوم عن يوم و ذلك يعود لقوته ومرونته واستمرار تحديثاته وتطويراته للافضل مع كل تحديث
قام كل من Mark Otto و Jacob Thornton بإنشاء الإطار في 2011 وبلغت شهرته على موقع GitHub اكثر من 83,397 نجمة و اكثر من 11,461 تحديث و 33 إصدار وأكثر من 658 مطور ساهم بتطويره حتى تاريخ نشر هذا المقال
مميزات الإطار
- سنة الإصدار 2011
- النسخة الحالية 3.3.5
- عدد النجوم على GitHube أكثر من 83,397
- متجاوب مع جميع انواع الشاشات Responsive
- مطور على شكل وحدات مرنة Modular
- يستخدم Glyphicons للأيقونات
- الإضافات الغير رسمية جدا كثيرة
- المستندات جدا ممتازة
- يوفر قوالب لبدء التصميم بسهولة
- يدعم متصفحات +Firefox, Chrome, Safari, IE8
- تم تطوير الإطار تحت مبدأ RWD and mobile first
سبب تميز Bootstrap هو شهرته الواسعة وتوفر مصادر كثيرة لتساعدك لبدء تصميم مشاريعك بشكل مميز و جميل
2. Foundation
يعتبر ثاني أشهر إطار وخاصة أن شركة ZURB المسؤولة عن تطويرة ودعمه وهو مستخدم من قبل شركات كبيرة مثل Facebook و Mozila و Ebay و Yahoo وايضا National Geographic ويقوم أكثر من 708 مطور بتطويره و تم إصدار 92 إصدار حتى تاريخ هذا المقال
مميزات الإطار
- سنة الإصدار 2011
- النسخة الحالية 5.5.2
- عدد النجوم على GitHube أكثر من 20,489
- متجاوب مع جميع انواع الشاشات Responsive
- مطور على شكل وحدات مرنة Modular
- يستخدم Foundation Icon Fonts للأيقونات
- الإضافات الغير رسمية متوفرة
- المستندات جدا ممتازة ويوجد أكثر من مصدر للتعلم
- يوفر قوالب لبدء التصميم بسهولة
- يدعم متصفحات Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
- تم تطوير الإطار تحت مبدأ RWD, mobile first, semantic
- يدعم اتجاه اللغة العربيه من اليمين الى اليسار لإتجاه الصفحات بدون اضافات
تميز هذا الإطار بدعم الشركة له وتوفير خطط تدريب ودعم فني مدفوع للإطار لبناء تصاميم مواقع وتطبيقات جميلة
3. Semantic UI
قام Jack Lukic بتطوير الإطار عام 2013 وكان الهدف منه إستخدام مصطلحات واضحه ومفهومه باللغه الإنجليزية بتسمية الكلاسات و أجزاء الإطار ليكون إستخدامه سهل ومفهوم من قبل المطور و المصمم ويمكن فهم الأكواد لسهولة القراءة يقوم أكثر من 108 مطور بتطويره وتم إصدار 123 إصدار حتى الآن
- سنة الإصدار 2013
- النسخة الحالية 2.0.3
- عدد النجوم على GitHube أكثر من 18,765
- متجاوب مع جميع انواع الشاشات Responsive
- مطور على شكل وحدات مرنة Modular
- يستخدم Font Awesome للأيقونات
- الإضافات الغير رسمية لايوجد
- المستندات جدا ممتازة ويتوفر موقع متخصص لتعلم الإستخدام
- لا يوفر قوالب لبدء التصميم بسهولة
- يدعم متصفحات Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10
- تم تطوير الإطار تحت مبدأ Semantic, tag ambivalence, responsive
Semantic تميز عن البقية بشمول الإطار على جميع الخصائص وايضا مسميات الكلاسات والملفات وهيكلة الأكواد السهلة والمفهومة أحد نقاط قوته التي توفقت على البقية
4. Pure
Pure تم تطويره بواسطة Yahoo ويعتبر من أخف اطر التصميم وأكثرهم مرونه مكتوب فقط بواسطة CSS ولايحتوي على اي JavaScript تستطيع أستخدامه بشكل كامل او مفصل على شكل وحدات على حسب أحتياجاتك يقوم بتطويره أكثر من 34 مطور وتم إصدار 16 نسخة حتى تاريخ هذا المقال
- سنة الإصدار 2013
- النسخة الحالية 0.6.1
- عدد النجوم على GitHube أكثر من 11,828
- متجاوب مع جميع انواع الشاشات Responsive
- مطور على شكل وحدات مرنة Modular
- لايستخدم ايقونات تستطيع استخدام Font Awesome كبديل
- الإضافات الغير رسمية لايوجد
- المستندات ممتازة
- يوفر قوالب لبدء التصميم بسهولة
- يدعم متصفحات Latest versions of Firefox, Chrome, Safari; IE7+ iOS 6.x, 7.x; Android 4.x
- تم تطوير الإطار تحت مبدأ SMACSS, minimalism
Pure يقدم لك الأساس لبدء مشروعك وهو مناسب للأشخاص الذين لايرغبون بإطار تصميم متكامل ومعقد
5. UIkit
UIkit تم تطويره بواسطة YOOtheme وهو ليس بشهرة البقية تميز بمرونته وسهولة استخدامه وهو يوفر مايوفره بقية الأطر من إمكانيات
- سنة الإصدار 2013
- النسخة الحالية 2.21.0
- عدد النجوم على GitHube أكثر من 5,182
- متجاوب مع جميع انواع الشاشات Responsive
- مطور على شكل وحدات مرنة Modular
- يستخدم Font Awesome للأيقونات
- الإضافات الغير رسمية متوفرة
- المستندات ممتازة
- يوفر قوالب لبدء التصميم بسهولة
- يدعم متصفحات +Chrome, Firefox, Safari, IE9
- تم تطوير الإطار تحت مبدأ RWD, mobile first
أشتهر استخدام UIkit بالكثير من ثيمات الورد بريس حيث يوفر مرونة وقوة بالتعديلات التي يمكن تنفيذها بشكل يدوي او عن طريق أداة تعديل مميزات الإطار
6. Materialize
Materialize من أطر تصميم المواقع الجديدة المستوحاة من Material Design الذي قدمته Google تم تطويره من قبل كل من Alvin Wang و Alan Chang و Alex Mark و Kevin Louie وهم طلاب من جامعة Carnegie Mellon University
- سنة الإصدار 2014
- النسخة الحالية 0.97.0
- عدد النجوم على GitHube أكثر من 11,346
- متجاوب مع جميع انواع الشاشات Responsive
- مطور على شكل وحدات مرنة Modular
- يستخدم Material Design Icons للأيقونات
- الإضافات الغير رسمية متوفرة
- المستندات جيدة
- يوفر قوالب لبدء التصميم بسهولة
- يدعم متصفحات +Chrome 35+, Firefox 31+, Safari 7+, IE 10
- تم تطوير الإطار تحت مبدأ Material Design
يعتبر Materialize جديد بالساحه ولكن اشتهر بسرعة لكونه يتبع مبادئ Material Design والتي لاقت إعجاب الكثير من المستخدمين مما يسمح لك تقديم تجربه ممتعة لمستخدمي مشروعك على أسس قوية ومبنية بعناية بواسطة Google يتم إتباعها عن تطوير هذا الإطار من قبل المطورين
في النهاية ماهو أفضل إطار تصميم Frontend Framework أستخدم
هذا يعتمد عليك وعلى مشروعك ولكن ممكن تلخيص بعض النقاط كالتالي
يجب ان تطرحها على نفسك قبل اختيار اي إطار
- هل الإطار مشهور كفاية وله مصادر تعلم واسعه
- هل له إضافات تغطي احتياجات مشروعك إذا لم تتوفر بالنسخة الأساسية
- هل يتم تطويره باستمرار ولم يتوقف تطوره ودعمه
- هل تم تطويره بعناية وحرص وحل مشاكله واصبح جاهز وناضج للإستخدام بمشاريعك بدون مشاكل
- ماهو مستوى استخدام الإطار صعب - متوسط - سهل
- هل تتوفر مستندات كافيه وسهلة لشرح الإستخدام
وكحل آخر هي ان تقوم بتجربة الأطر وتختار مايناسبك حسب المشروع وإذا لم تجد مايناسبك إعلم أنه تستطيع إستخدام أي إطار على شكل وحدات مفصلة ممايسمح لك بإختيار الوحدات التي تناسب مشروعك يمكنك تجميع إطار يناسب مشروع مبني من وحدات أطر مختلفة بكل سهولة
أتمنى ان يكون المقال ذو فائدة لكم مشاريعكم المستقبلية
وبإنتظار تعليقاتكم ومداخلاتكم
التعليقات (2)
السلام عليكم ورحمة الله وبركاته ..
جميل جدا ,
جزاك الله خيرا وكتب اجرك
وعليكم السلام ورحمة الله وبركاته
يعافيك ربي وراح نضيف المزيد من الأطر الجديدة والمميزة ونحدث المقالة للجديد باذن الله
عرض المزيد.. جديد مقالاتي
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !