টুইটার বুটস্ট্র্যাপ (Twitter Bootstrap) এবং যুর্ব ফাউন্ডেশন (Zurb Foundation) বর্তমানে সব চাইতে জনপ্রিয় দুইটি সিএসএস (CSS) ফ্রেমওয়ার্ক। বুটস্ট্র্যাপ হচ্ছে সবচাইতে বেশি জনপ্রিয় অন্য দিকে ফাউন্ডেশন-কে বলা হয় সবচাইতে অ্যাডভান্সড ফ্রেমওয়ার্ক। আপনি কোনটা ব্যাবহার করবেন, সেটা নির্ভর করবে আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী। এই লেখাটিতে আমি এই দুইটি ফ্রেমওয়ার্কের মৌলিক পার্থক্যগুলো দেখাবো।
গ্রিড সিস্টেম (Grid System)
Grid System হচ্ছে ফ্রেমওয়ার্কের মূল বিষয় যার মাধ্যমে একজন ডেভেলপার বা ডিজাইনার খুব দ্রুত ডিজাইনের প্রোটোটাইপ তৈরি ও লেআউট তৈরি করতে পারে। বুটস্ট্র্যাপ ও ফাউন্ডেশন দুটোতেই প্রায় একই ধরনের গ্রিড সিস্টেম আছে, তবে ফাউন্ডেশন এক্ষেত্রে কিছুটা এগিয়ে। উপরন্তু, ফাউন্ডেশন-এ Block Grid নামে বিশেষ একধরনের Grid System আছে যা বুটস্ট্র্যাপ-এ নেই। Block Grid এর মাধ্যমে আপনি কোন Content-কে বিভিন্ন Width-এর ডিভাইসে বিভিন্ন সংখ্যক সারিতে সাজাতে পারবেন। যেমন এটি দিয়ে আপনি ফটো গ্যালারি তৈরি করতে পারেন। যেখানে ডেক্সটপে তিন সারিতে ছবি দেখাবে আর মোবাইলে দুই সারিতে।
সাইজিংয়ের একক (Sizing Unit)
প্রস্থ হিসাব করার জন্য বুটস্ট্র্যাপ পিক্সেল (Pixel) একক ব্যাবহার করে, যেটা নতুন কিংবা গ্রাফিক্স ডিজাইনারদের জন্য খুব পরিচিত। কিন্তু ফাউন্ডেশন এক্ষেত্রে রিম (Rem) একক ব্যাবহার করে। যদিও দুটো দিয়ে একই কাজ করা সম্ভব, তবে রেস্পন্সিভ (Responsive) ডিজাইনের ক্ষেত্রে Rem-কেই প্রাধান্য দেয়া হয়।
ফিচার এবং কম্পোনেন্ট (Feature and Component)
ফাউন্ডেশন ও বুটস্ট্র্যাপ দুটোতেই বেশ কিছু তৈরি করা কম্পোনেন্ট আছে। তবে এদের মধ্যে বেশ কিছু পার্থক্যও আছে।
ফাউন্ডেশন-এ Abid নামের একটি ফর্ম (Form) ভ্যালিডেশন (Validation) কম্পোনেন্ট আছে, কিন্তু বুটস্ট্র্যাপ-এ ধরনের কিছু নেই। Interchange নামে ফাউন্ডেশন-এ আরও একটি JavaScript Componant আছে যা ডিভাইসের প্রস্থের পরিবর্তনের সাথে Content পরিবর্তন করতে পারে। এটা দিয়ে আপনি ছবিকে রেস্পন্সিভ করতে পারেন। যখন বড় ডিভাইস হবে, তখন বড় ছবি লোড হবে আর ছোট ডিভাইসে ছোট ছবি। এতে একদিকে যেমন ব্যবহারকারীর ব্যান্ডউইথ সাশ্রয় হবে তেমনি পেজও লোড হবে তাড়াতাড়ি। ফাউন্ডেশন RTL (ডান থেকে বামে, যেমন আরবি) ভাষাকেও সমর্থন করে। ফাউন্ডেশন-এর আরও কয়েকটি দারুণ ফিচার হচ্ছে Pricing Table, Tours, Off-canvas navigation
বুটস্ট্র্যাপ-এ ফাউন্ডেশন এর মত এত ফিচার না থাকলেও বুটস্ট্র্যাপ-এর Component গুলো খুবই দরকারি এবং ব্যাবহার করাও খুব সহজ। এখন বুটস্ট্র্যাপ রেস্পন্সিভ Embed সাপোর্ট করে যেমন