هل لديك فكرة عن حجم المعاناة و كثرة الأسطر في الكود البرمجي الخاص بتطوير واجهات الويب من أجل جعل تطوير ستايل صورة و ربما بعض الأزرار و Form في السابق ؟ لقد كان الأمر مزعجا حقا و مملا كذلك، خصوصا بضعف الإبداع و عجز الكثيرين في كتابة كود برمجي بإستخدام الـ CSS يفي بالغرض، و نحمد الله على نعمة التطور في هذه المجالات، فالـ CSS3 الآن أصبح يوفر لنا إستخداما أيسر و أسهل لتصميم الواجهات و القيام ببعض الـ Animations و التأثيرات الجذابة، رغم ذلك، لازال مطوري واجهات المواقع يجدون صعوبة في الحصول على " المثالية " في التصميم او التطوير، فقررت بعض الشركات إنتاج ما يسمى بـ " إطار العمل " او Framework، و هو ببساطة مخطط أزرق يمكنك الإعتماد عليه من أجل تطوير واجهات بشكل أفضل و أسهل.
لكن مشكلة إستخدام إطارات العمل هو التشابه، فإستخدام إطار عمل الـ Bootstrap على سبيل المثال الذي يوفر لك أزرارا بشكل واحد مع تغيير لخلفية الزر، سيجعل من كل المواقع التي تستخدم هذا الإطار تستخدم نفس ستايل الزر، و سنجد أنفسنا في تقليد لمواقع اخرى ... الأمر أشبه بمحاولة الهرب من صعوبة التصميم لنسقط في حفرة الإبتذال و التقليد.
لقد إستخدمت شخصيا مجموعة من إطارات العمل سواء من أجل تجربتها و صناعة واجهات بسيطة، او من أجل العمل بها في مشاريع حقيقية، و قد إندهشت بقدراتها و أفضليتها عن البوتستراب، فلعل أفضل ما في البوتستراب هو شهرته لا أكثر، و اليوم أشارك معك هذه الإطارات و خواصها و كل متعلقاتها و لما يجب عليك إستخدامها بناءََ عن تجربة شخصية.
- إطار UIKIT :
لقد حظيت بتجربة رائعة بإستخدام هذا الإطار، و قد كان له الفضل في تطوير مهاراتي كذلك و وجهة نظري نحو واجهات مواقع أفضل، يأتي إطار العمل UIKIT بالعديد من الخصائص او الـ Components التي يمكنك إستخدامها في تطوير صفحة ويب إحترافية إبتداءََ من الـ Headings مرورا بالـ Buttons و الـ Forms الى الـ Cards و الـ Modals و الـ Sliders، الإطار سهل التركيب و يدعم كذلك التضمين من خلال الـ Package Manager او مدراء الحزم مثل الـ NPM، الستايل الذي يوفره لك إطار العمل هذا قريب قليلا للـ Material Design، كما يأتي بنظام Grid جميل و سهل الإستخدام شبيه بالبوتستراب مع بعض التغييرات الأخرى، يدعم أيضا كلا من الـ Sass و الـ Less، و هما خاصيتين لم يتم إضافتهما لإطار البوتستراب الى حين النسخة الرابعة و الأخيرة من هذا الإطار، يدعم اللغة العربية كذلك و له حزمة icons مختصة تغنيك عن الـ Glyph icons الموجودة في البوتستراب او الـ Fontawesome الشهيرة كذلك، إطار اقل ما يمكنني ان اقول عنه انه جد إحترافي و سيمكنك من بناء واجهات إحترافية كذلك، يمكنك الإطلاع على الإطار أكثر من هنا .
- إطار MDBoostrap :
لا تحب التغيير كثيرا ؟ نقترح عليك أيضا إطار MDBoostrap و هو إختصار لعبارة Material Design Bootstrap، يسمح لك هذا الإطار بصناعة واجهات المواقع بالإعتماد بشكل كبير على أكواد و كلاسات البوتستراب الأساسية مع بعض الإضافات الجديدة التي إقتبسها الإطار من الـ Material Design مثل ستايل الـ Gradient و أيضا الـ Floating Action Buttons و هي خواص لا نراها الا في الإطارات المتعلقة بالـ Material Design ( سنوفر لك نموذجا في هذا المقال أيضا )، يوفر لك هذا الإطار كذلك العديد من الأشكال و الألوان و الزركشات الجديدة التي يمكنك إستخدامها، الإطار إحترافي و جيد و إستخدمته مرة واحدة و لم أجرأ على إستخدامه مرة أخرى لسبب واحد، و هو أن هذا الإطار ثقيل نسبيا مقارنة مع أقرانه من الإطارات، لذلك أن كنت تسعى للموازنة بين سرعة الموقع و الستايل الجميل فهذا الإطار ليس المناسب، هو إطار يوفر شكلا جذابا لا نقاش في هذا، لكن حجمه لا يسمح لك بصناعة موقع سريع و خفيف في التصفح. يمكنك الإطلاع على هذا الإطار من هنا .
إقرأ أيضا : إليك قائمة بأفضل مكتبات و إطارات الـ Javascript و الـ Css المختارة لك لشهر نوفمبر
- إطار العمل Bulma :
واحد من أخف إطارات العمل التي ستجربها يوما، مبني كليا على الـ Flex box و مفتوح المصدر أيضا، يوفر لك إطار Bulma واحدا من أفضل خواص الـ Grid على الإطلاق، سواء الأوتوماتيكية او المحددة ( أي Grid تقوم أنت بإختيار أبعادها و حدودها، او اوتوماتيكية يقوم بتحديد الأبعاد تلقائيا بالإعتماد على حجم الأقسام الموجودة في الـ Row )، يوفر ستايلا لا بأس به من ناحية الشكل، يوفر لك عناصر و Components عديدة أيضا و جاهزة للإستخدام المباشر مثل الـ Navbar او الـ Cards و كذا الـ Paginations و الـ Modal و العديد من العناصر، يمكن إبتكار و صناعة مواقع ويب متجاوبة كليا بإستخدام إطار Bulma أيضا، يمكن التحكم في كل عناصر الصفحة و تزيينها بكلاسات هذا الإطار، و يمكن التعديل على أي عنصر و إضافة او حذف خواص حسب الحاجة، يمكنك الإطلاع على الإطار أكثر من هنا .
نعم، لربما حزرت ان إطار Semantic UI سيكون ضمن هذا المقال، فهو واحد من أشهر إطارات العمل الخاصة بتطوير الواجهات، يتضمن إطار Semantic العديد من الخواص، دعونا نبدأ بالـ Components او العناصر، إذ يتضمن هذا الإطار تقريبا كما هائلا منها أكثر من أي إطار اخر في هذا المقال، بداية من الأزرار الى الـ Radiobuttons مرورا بالصور و الـ Forms و الـ Cards و أي عنصر ستحتاجه في الصفحة لا بد و أن تجد إطار Semantic قد حضر لك مسبقا الستايل الخاص به، الجميل في إطار Semantic كذلك إمكانية تضمينه في مشاريع جاهزة مسبقا بكل سهولة عن طريق مدير الحزم أيضا، فسواء كان مشروعك مبني على الـ Vuejs او Angular او حتى Codeigniter، فبنقرة زر واحدة يمكن تضمين هذا الإطار، و ليس تضمينه فقط بل تهيئته أيضا تتماشى مع المشروع إذ يمكن إستخدام الـ Sass بدل بالـ CSS في التعامل معه، لكن كل هذا لا يأتي بضريبة مجانية، فأيضا الإطار ليس خفيفا تلك الخفة التي تسمح لك بصناعة موقع سريع التصفح، لكن يمكن إضافة بعض الخواص في المشروع لجعله كذلك، مثل تضمين الـ Lazy Load مثلا. للإطلاع على مكونات هذا الإطار يمكنك النقر هنا .
و نختم معك بإطار Materialize، أفضل هذا الإطار لصناعة صفحات الويب الخفيفة و الظريفة، إستخدمته في أحد الأيام لصناعة صفحة ويب شبيهة بمنصة Google Keep لحفظ المواعيد و جدولتها، بالنسبة للإستخدام الكبير في المشاريع الكبرى قد تجد بعض المشاكل في إستخدامه، أولا الـ Material Design الذي توفره لك هذه المنصة لا يلائم الويب بشكل كبير، قد يلائم تطبيق أندرويد بشكل أفضل، كما انه لا توفر لك كما كبيرا من الـ Components و الخصائص، و لربما إستخدامي لها كان من أجل الـ Cards فقط ، توفر لك عددا لا بأس به من العناصر مثل Nav و الأزرار و غيرها، لكن لا يوجد الكثير، الإطار خفيف جدا و يمكن ان يتماشى مع إطار عمل آخر و هذا هو أفضل إستخدام له، بحيث يمكنك إستخدام إطار Materialize مع إطار UIKIT مثلا لتحصل على مشروع ويب متكامل من ناحية الديزاين و الهيئة، غير ذلك فإستخدمه فقط لصناعة الصفحات البسيطة، يمكنك الإطلاع على هذا الإطار من هنا .
إقرأ أيضا : إليك 7 إطارات عمل (Framworks) مخصصة لصناعة المواقع عليك معرفتها
- إطار Semantic UI :
نعم، لربما حزرت ان إطار Semantic UI سيكون ضمن هذا المقال، فهو واحد من أشهر إطارات العمل الخاصة بتطوير الواجهات، يتضمن إطار Semantic العديد من الخواص، دعونا نبدأ بالـ Components او العناصر، إذ يتضمن هذا الإطار تقريبا كما هائلا منها أكثر من أي إطار اخر في هذا المقال، بداية من الأزرار الى الـ Radiobuttons مرورا بالصور و الـ Forms و الـ Cards و أي عنصر ستحتاجه في الصفحة لا بد و أن تجد إطار Semantic قد حضر لك مسبقا الستايل الخاص به، الجميل في إطار Semantic كذلك إمكانية تضمينه في مشاريع جاهزة مسبقا بكل سهولة عن طريق مدير الحزم أيضا، فسواء كان مشروعك مبني على الـ Vuejs او Angular او حتى Codeigniter، فبنقرة زر واحدة يمكن تضمين هذا الإطار، و ليس تضمينه فقط بل تهيئته أيضا تتماشى مع المشروع إذ يمكن إستخدام الـ Sass بدل بالـ CSS في التعامل معه، لكن كل هذا لا يأتي بضريبة مجانية، فأيضا الإطار ليس خفيفا تلك الخفة التي تسمح لك بصناعة موقع سريع التصفح، لكن يمكن إضافة بعض الخواص في المشروع لجعله كذلك، مثل تضمين الـ Lazy Load مثلا. للإطلاع على مكونات هذا الإطار يمكنك النقر هنا .
إقرأ أيضا : تعرف على 5 إطارات عمل للجافاسكريبت لصناعة تطبيقات الأندرويد و iOS بإحترافية
- إطار Materialize :
و نختم معك بإطار Materialize، أفضل هذا الإطار لصناعة صفحات الويب الخفيفة و الظريفة، إستخدمته في أحد الأيام لصناعة صفحة ويب شبيهة بمنصة Google Keep لحفظ المواعيد و جدولتها، بالنسبة للإستخدام الكبير في المشاريع الكبرى قد تجد بعض المشاكل في إستخدامه، أولا الـ Material Design الذي توفره لك هذه المنصة لا يلائم الويب بشكل كبير، قد يلائم تطبيق أندرويد بشكل أفضل، كما انه لا توفر لك كما كبيرا من الـ Components و الخصائص، و لربما إستخدامي لها كان من أجل الـ Cards فقط ، توفر لك عددا لا بأس به من العناصر مثل Nav و الأزرار و غيرها، لكن لا يوجد الكثير، الإطار خفيف جدا و يمكن ان يتماشى مع إطار عمل آخر و هذا هو أفضل إستخدام له، بحيث يمكنك إستخدام إطار Materialize مع إطار UIKIT مثلا لتحصل على مشروع ويب متكامل من ناحية الديزاين و الهيئة، غير ذلك فإستخدمه فقط لصناعة الصفحات البسيطة، يمكنك الإطلاع على هذا الإطار من هنا .