22

إطار عمل CSS خاص أو عام لتصميم واجهات المواقع؟

بالنسبة للتصميم باستخدام CSS

فإن هناك مجموعة من الأكواد تتكرر دوما من مشروع لآخر، إعادة كتابتها دوما لهو أمر مزعج

لذا يوجد هناك أطر العمل مثل

foundation

bootstrap

مثل هذه الأطر توفر لك الكثير من العناء مثل ضبظ خصائص المتصفحات (reset)

جعل التصاميم شبه متجاوبة (Almost responsive) وتوفر لك الكثير من الخصائص الجاهزة

فهذه الأطر تغطي كل شيء، انطلاقا من حذف الحشو الإضافي في الصفحة إلى تزيين الأزرار واستعمال قائمة مزينة،

لذا الرائع فيهم أنهم يغطون كل شيء،

لكن هذا عيبهم القاتل أيضا، بكونهم يغطون كل شيء فإن حجمهم كبير وهناك الكثير من الأشياء التي لا حاجة لك بها إطلاقا

مما يرجعنا إلى الأطر الخاصة (Personal framework)

حيث أنك تصنعها بنفسك وتخصصها لك، وتحتوي على ما تحتاجه أنت تماما، وتضيفها إلى مشاريع مع التعديل فيها كما تشاء لأنك تعرف كيف هي مصنوعة

مما يطرح السؤال،

ماذا ستستعمل أنت،

إطار عام مثل bootstrap

أو إطارا خاصا بك،

مع الأخذ بالحسبان، أن صنع إطار خاص يأخذ وقت، أما الإطار العام فهو سهل جدا

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

20

لماذا تخترع العجلة؟ أطر العمل كثيرة و تلبي الطلب. لا أنصحك بالاعتماد على مكتبة خاصة بك إلا إذا :

  • كانت لديك العزيمة لتطويرها بشكل مستمر،

  • اختبارها على كافة المنصات، أو الأكثر شهرة، قبل الإطلاق و الإعتماد الكلي.

  • التعلّم على بناء اطار عمل خاص بك.

في الآونة الأخيرة، كثرت الحاجة لمنصات و أُطر عمل تساعد في بناء prototypes، أو عيّنات أولية للمنتج بشكل سريع و جيّد. لذلك تم التركيز، من قبل مجتمعات كثيرة، على بناء المتطلبات للمساعدة في بناء prototypes بالشكل السريع المطلوب.

استعمل المنصات المشهورة

الـ frontend و تصميمها كان لها حيّز و نصيب. و من ضمن الحلول كانت Bootstrap و foundation. المنصتين، و غيرها، كانت حصيلة العمل الدؤوب و المشاركة. فلا تتوقع أبدا كشخص واحد أن لديك فرصة لمنافستهم. توجد أطر عمل عربية مثل واجهة:

(آخر تحديث لها كان قبل 11 شهر). أما مثلا bootstrap (htt:

(آخر تحديث لها كان من 10 ساعات). أتوقع واضحة أيهم أحدث و أيهم لديها الفرصة للصمود أمام تغيرات الويب.

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

السرعة

طرحت مشكلة الحجم. لا أعلم مقدار الحجم الذي تراه كبير! bootstrap كاملة حجمها أقل من 150 كيلوبايت. إذا سرعة تحميلك تصل إلى 256 كيلوبت، ستستطيع تحميل (256 كيلوبت)/(8) = 32 كيلوبايت في الثانية. و لتحميل اطار Bootstrap كامل ستحتاج إلى تقريبا 5 ثواني. بعد تحميلك، كزائر، لها من أول مرة، سيقوم المتصفح بعمل نسخة محلية من الإطار في جهاز الزائر. وقتها، الزائر لن يقوم بتحميل الإطار من موقعك في كل مرة يتوه فيها في موقعك. لكن إذا انت كمدير للموقع فشلت في ضبط الإعدادات الكاش، فأنصحك بالتريث و القراءة أكثر عن HTTP.

الحجم

لاحظ، ذكرت كلمة كاملة أكثر من مرة في القسم السابق. لماذا؟ لأنه ما تعانيه عانوا منه الكثير غيرك. و لأن الأطر opensource، وجدوا حل. ادخل

هذه صفحة تسهّل لك تحميل نسخة من bootstrap مجهّزة بما انت تريد. تستطيع تحديد الكل أو تحديد جزء واحد فقط. كل ما قللت اختياراتك، قلّ حجم الملف.

لا تريد استضافة الملفات؟

المجتمع الحر مساند للمشاريع الحرة. توجد نسخة موجودة في CDNs حول العالم. اقرأ عنها في:

قد تسأل، ما الهدف؟ إذا زائر دخل موقع آخر يستخدم نسخة bootstrap من CDN. و دخل موقعك بعدها، وقتها الزائر سيستخدم نسخة محفوظة لديه في الكاش لأن النسخة واحدة.

و كإثبات على الكاش، هذا طلب لملف js لإطار bootstrap من الـ CDN يستضيف الإطار:

. في يسار الصورة، يوجد Expires، حتى ذاك الوقت، جهازي سيسخدم نسخة في الكاش لأي موقع يستخدم الإطار المُقدم من هذا الـ CDN.

جواب لسؤالك

إذا خُيّرت، سأقوم باستعمال إطار جاهز. الوقت الذي سأحتاجه لفهم المتطلبات اللازمة لبناء إطار CSS، سأستغله في شئ آخر مفيد، أو المساهمة في تطوير الإطار العام ليناسب لغتي.

12

شكرا لك على ردك الوافي أخي،

أنا أبني في إطاري الخاص، ووضعت هذا الاستفسار حتى أتأكد،

الإطار الذي أصنعه أنا سيكون لي فحسب، لذا أنا أعرف كيف سيكون

لقد وجدت أنه أثناء التصميم، أنا أعيد الكثير من المراحل،

مثلا الأزرار، أنا أطبق عليها كدى كود في كل مرة، الـ inputs

وغيرها من الأشياء، فقلت لم لا أصنع إطار يقوم بهذا العمل البسيط

بدلا عني، وأنا أغير الألوان فحسب، وفي نفس الوقت أجرب

OOCSS (object oriented css)

لذا الإطار سهل وسريع، بنيت نصفه للآن، حجمه أظن 30 كيلو بالكثير

أنا لا أبحث عن صنع إطار كبير ومنافس لbootstrap

طبعا لا، كل ما أريده هو إطار بسيط ليختصر علي المراحل في

العمل، هناك بعض أطر العمل مبنية على bootstrap أيضا،

منها Flat UI

لذا شكرا لك أخي على الشرح اللي قدمته لي،

قد أستعمل bootstrap في المشاريع الكبير

وما أبنيه أنا للصغيرة فحسب، أو للتعلم

13

إن كنت مبرمج حر , وتعمل لصالح نفسك , فبالطبع أستخدم إطارك الخاص

بينما إن كنت تعمل في شركة معى فريق فأستخدم إطار معروف ومتعارف عليه

بالتوفيق

لكن حسب ما أرى، أصحاب العمل الحر يستخدمون إطار عام،

بل حتى أنه هناك تصنيف في themeforest لتلك المبنية على bootstrap

مما يجعلني محتار، ماهي النقاط الجوهرية المختلفة بين إطار خاص وعام

أنا أعتمد علي إطار عام bootstrap, و انطلاقا منه أبدء ببناء إكاري الخاص, حيث أقوم بأخد الخصائص الجاهزة من bootstrap , و أضيفها إلي الإطار الخاص بي, و في نفس الوقت أغير من تلك الخصائص حسب الحاجة, و بذلك أكون قد اختصرت الوقت في بناء إطار بنفس جودة bootstrap و بحجم أصغر.

بالنسبة لما ذكرت من الأطر فيمكن استخدامها وتخصيصها بالتفصيل كما تشاء باستخدام LESS أو SASS، فتعود كما لو أنك تبني منصة خاصة بك وتقوم بالتعديل عليها.

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