আসুন জানি পাঁচটি মডার্ন সিএসএস ফ্রেমওয়ার্ক সম্পর্কে

বাংলা ব্লগওয়েব ডেভেলপমেন্ট২৪ জুন, ২০২১

আসুন জানি পাঁচটি মডার্ন সিএসএস ফ্রেমওয়ার্ক সম্পর্কে

ফ্রন্ট-এন্ড ডেভেলপমেন্টকে গতিশীল করতে সিএসএস ফ্রেমওয়ার্কগুলো অনেক গুরুত্বপুর্ন ভূমিকা পালন করে। হাজার হাজার লাইন কোড লেখা থেকে বাচা যায় সিএসএস ফ্রেমওয়ার্ক ইউজ করার মাধ্যমে। কিছু ফ্রেমওয়ার্ক তো এমন রিচফুল যে, নিজে থেকে এক লাইন সিএসএস কোডও লিখতে হয় না।

ওয়ার্ল্ড ওয়াইড ওয়েব প্রতিদিন পরিবর্তনের মধ্য দিয়ে যাচ্ছে। প্রায় প্রতিদিনই নতুন কোন না কোন ওয়েব টেকনোলজি আসছে। যদি আমরা ১০ বছর পিছনে ফিরে যাই, তখনকার ওয়েব টেকনোলজির আর এখনকার ওয়েবের মধ্যে আকাশপাতাল পার্থক্য হয়েছে। প্রটোকল, টেকনোলজি, কোডিং স্ট্যান্ডার্ড, ডিজাইন ট্রেন্ড, প্রায় সবকিছুই পরিবর্তিত হয়েছে। সিএসএস ফ্রেমওয়ার্কগুলোও মডার্ন ওয়েবের সাথে তাল মিলাতে নিজেদের আপডেট করে নিয়েছে। তারসাথে এসেছে নতুন নতুন অনেকগুলো ফ্রেমওয়ার্ক। আজকে এমনই পাঁচটি মডার্ন সিএসএস ফ্রেমওয়ার্ক নিয়ে আলোচনা করবো।

বুটস্ট্র্যাপ

সিএসএস ফ্রেমওয়ার্ক নিয়ে আলাপ করতে বসলে সবার আগে আসে বুটস্ট্র্যাপ এর নাম। বিশ্বে সবচেয়ে জনপ্রিয় এবং সবচেয়ে ব্যবহৃত সিএসএস ফ্রেমওয়ার্ক এটা। আমি নিজেই কম পক্ষে ২০০ ওয়েবসাইট বানিয়েছি বুটস্ট্র্যাপ দিয়ে।

বুটস্ট্র্যাপ ৫
বুটস্ট্র্যাপ ৫

২০১১ সালে টুইটার এটি রিলিজ করে। টুইটার বুটস্ট্র্যাপ মূলত জনপ্রিয়তা পেয়েছিলো রিস্পন্সিভ ওয়েব ডিজাইনকে সহজ করে দেয়ার জন্য। তখন সবেমাত্র ওয়েব ডিজাইনে মোবাইল রিস্পন্সিভ টার্মটা জনপ্রিয় হতে শুরু করেছে। মোবাইল রিস্পন্সিভ সিএসএস ফ্রেমওয়ার্ক হিসেবে বুটস্ট্র্যাপ তুমুল জনপ্রিয়তা পায় এবং ডেভেলপাররা ফ্রেমওয়ার্কটিকে লুফে নেয়।

বুটস্ট্র্যাপ থেমে থাকে নি, ওয়েব টেকনোলজির সাথে প্রতিনিয়ত আপডেট হয়েছে। মডার্ন ওয়েব ডিজাইনে যা কিছু লাগে সবকিছু এক প্যাকেজে পাওয়া যায় বুটস্ট্র্যাপ ফ্রেমওয়ার্ক থেকে। মডার্ন স্টাইলশীট SASS সাপোর্ট এসেছে, রিয়েক্ট লাইব্রেরী এসেছে, সম্পুর্ন কাস্টোমাইজেবল, একটা ওয়েবসাইটের যা কিছু লাগে সবই আছে বুটস্ট্র্যাপে। তাছাড়া সবচেয়ে বড় কথা টুইটার এটা ইন্ট্রিডিউস করলেও এখন এটা একটা কমিউনিটি প্রজেক্ট। আর উই লাভ কমিউনিটি প্রজেক্ট।

তবে বুটস্ট্র্যাপের কিছু বিষয় আমার ভালো লাগে না। যার ফলে বিগ বাজেটের প্রজেক্টে আমি বুটস্ট্র্যাপ এড়িয়ে যাওয়ার চেষ্টা করি। বুটস্ট্র্যাপের প্রধান ড্রব্যাক হলো, বুটস্ট্র্যাপের প্যাকেজ সাইজ। বুটস্ট্র্যাপ নিজেকে লোড করতেই প্রচুর ব্যান্ডউইথ খেয়ে ফেলে। তাছাড়া বুটস্ট্র্যাপ ৪ পর্যন্ত বেশকিছু কম্পোনেন্ট জেকুয়েরি লাইব্রেরীর উপর ডিপেন্ডেড ছিলো। ফলে জেকুয়েরিও লোড করতে হতো। বুটস্ট্র্যাপ ৫ এ অবশ্য জেকুয়েরি বাদ দেয়া হয়েছে। আরেকটা সমস্যা হলো, কিছু স্টাইল ওভাররাইড করা অনেক ঝামেলার। “!important” রুল লেখতে লেখতে বিরক্ত হতে হয়।

সব ফ্রেমওয়ার্কেই কিছু ড্রব্যাক থাকে। এখন পর্যন্ত বুটস্ট্র্যাপ সবচেয়ে জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক। যেকোন প্রজেক্টে নিশ্চিন্তে ব্যবহার করার মতো সিএসএস ফ্রেমওয়ার্ক যদি থাকে, সেটা বুটস্ট্র্যাপ ই হবে।

বুটস্ট্র্যাপ ডাউনলোড করতে পারবেন এখান থেকে।

টেইলওয়াইন্ড সিএসএস

আপনি যদি পোস্টটি পাবলিশ হওয়ার বছরে দেখে থাকেন, তাহলে আপনি টেইলওয়াইন্ড সিএসএস এ ডিজাইন করা ব্লগে পোস্টটি পড়ছেন। আমার ব্লগের নতুন ডিজাইনটি পুরোটি টেইলওয়াইন্ড সিএসএস ফ্রেমওয়ার্ক দিয়ে করা। আমার দেখা সবচেয়ে ফাস্ট, কাস্টোমাইজেবল, আর ফিচারফুল একটা ফ্রেমওয়ার্ক এটি।

টেইলওয়াইন্ড সিএসএস
টেইলওয়াইন্ড সিএসএস

আমি মজা করে টেইলওয়াইন্ড সিএসএস ব্যাপারে বলি, “এটাতে সবই আছে, আবার কিছুই নাই”। যতো ধরনের স্টাইল প্রোপার্টি আছে, সবই ইউটিলিটি ক্লাসের মাধ্যমে পাওয়া সম্ভব টেইলওয়াইন্ড থেকে। মার্জিন, প্যাডিং, হোভার প্রোপার্টিস, কোনকিছুর জন্যই সিএসএস লেখতে হয় না, সবই ইউটিলিটি ক্লাসের মাধ্যমে করে ফেলা যায়। আমার এই ব্লগে শুধু মাত্র কন্টেন্ট এর স্টাইলিং এর জন্য ২০-৩০ লাইন সিএসএস কোড লেখতে হয়েছে। তাছাড়া পুরো সাইট শুধু টেইলোয়াইন্ডের ক্লাসগুলো ব্যবহার করেই ডিজাইন করে ফেলেছি।

টেইলওয়াইন্ডের সবচেয়ে বড় প্লাস পয়েন্ট হলো এটার প্যাকেজ সাইজ। অস্বাভাবিক আকারের ছোট সাইজের ফ্রেমওয়ার্ক এটা। তাছাড়া এটাতে কোন কম্পোনেন্ট প্রি-ডিজাইন করে অযথা ফাইল সাইজ বড় করা হয় নি। বুটস্ট্র্যাপে যেমনা দেখা যায়, হাজার হাজার কম্পোনেন্ট ডিজাইন করা আছে, যা আপনি কখনোই ইউজ করেন না। বাট সাইটে সেগুলির স্টাইল লোড হয়ে ব্যান্ডউইথ খেয়ে বসে থাকে।

টেইলওয়াইন্ডের খারাপ দিক খুব একটা নেই। একটা খারাপ ব্যাপার বলা যায়, বাট সেটা ড্রব্যাক কিনা বুঝতে পারছি না, এটার লাইটওয়েটের মজা নিতে চাইলে আপনাকে কোন ফ্রন্ট-এন্ড বিল্ড টুল (যেমনঃ ওয়েবপ্যাক, গাল্প, ব্রাউজারফাই, ইত্যাদি) ব্যবহার করতে হবে।

অভারল আমার ব্যক্তিগত মতামত টেইলওয়াইন্ড রাইট নাউ বেস্ট মডার্ন সিএসএস ফ্রেমওয়ার্ক।

টেইলওয়াইন্ড সিএসএস ডাউনলোড করুন এখান থেকে।

ফাউন্ডেশন

আরেকটা লাইটওয়েট কিন্তু ফিচার-ফুল ফ্রেমওয়ার্ক হলো ফাউন্ডেশন। সিএসএস ফ্রেমওয়ার্ক ছাড়াও অনেকগুলি ফ্রন্ট-এন্ড ডেভেলপমেন্ট টুল এবং এনিমেশন লাইব্রেরী রয়েছে এটাতে।

ফাউন্ডেশন
ফাউন্ডেশন

প্রচুর রেডিমেড কম্পোনেন্ট এইচটিএমএল টেম্পলেট পাবেন ফাউন্ডেশন ফ্রেমওয়ার্কের জন্য। রেডিমেড কম্পোনেন্ট দিয়ে সাইট বিল্ড করতে চাইলে ফাউন্ডেশন ইউজ করা জিতি পারে। তাছাড়া এনিমেশন লাইব্রেরী আর ইমেল টেম্পলেট ফ্রেমওয়ার্কও আরেকটা কারন হতে পারে ফাউন্ডেশন ব্যবহারের।

ফাউন্ডেশনও বুটস্ট্র্যাপের মতো জেকুয়েরির (একচুলি ZEPTO) উপর নির্ভরশীল। অনেক প্রজেক্টেই জেকুয়েরি ইনক্লুড করাটা ব্যান্ডউইথের অপচয় হতে পারে।

ফাউন্ডেশন ডাউনলোড করতে পারবেন এখান থেকে।

বালমা

আরেকটি ফুল-ফিচার্ড সিএসএস ফ্রেমওয়ার্ক হলো বালমা। বুটস্ট্র্যাপের ট্রুলি অল্টারনেটিভ যদি কেউ খুঁজে থাকেন, তাহলে তার জন্য বালমা ফ্রেমওয়ার্ক ই একমাত্র ডেসটিনেশন হতে পারে।

বালমা
বালমা ফ্রেমওয়ার্ক

বুটস্ট্র্যাপের সাথে তুলনা করলে বালমা’র ডিজাইন/স্টাইল বুটস্ট্র্যাপের চেয়ে অনেক বেশী মডার্ন এবং ক্লিন। কম্পোনেন্টগুলি এমনভাবে ডিজাইন করা হয়েছে, ডিফল্ট স্টাইলে রেখেও কম্পোনেন্টগুলি ওয়েবসাইটে অনেক সুন্দর দেখায়। তাছাড়া ডিফল্ট স্টাইলগুলো SASS বেজড হওয়ায় খুব সহজেই অভাররাইড করা সম্ভব। বালমা’র সবচেয়ে আকর্ষনীয় ব্যাপার হলো, এটা কমপ্লিটলি সিএসএস বেজড, এটাতে কোন জাভাস্ক্রিপ্ট ডিপেন্ডেন্সি নেই। ফলে এই লাইটওয়েট ফ্রেমওয়ার্কটি যেকোন প্রজেক্টে নিশ্চিন্তে ব্যবহার করা যাবে।

বালমা ডাউন করুন এখান থেকে।

ইউআইকিট

ইউআইকিট দিয়ে আমি যদিও শুধুমাত্র একটি প্রজেক্ট করেছি। কিন্তু এই ফ্রেমওয়ার্কটী অনেক ভালো লেগেছে আমার কাছে এটি’র ইম্পোর্ট ফিচারের কারনে। আপনার যেই কম্পোনেন্টটি দরকার শুধু শ্বেই কম্পোনেন্টটিই ইম্পোর্ট করে নিতে পারবেন।

ইউআইকিট

ন্যাভিগেশন, সাইডবার, প্যারালাক্স, অভারলে, প্লেসহোল্ডার, ইত্যাদি সহ ইউআইকিটে প্রচুর এডভান্সড কম্পোনেন্ট বিল্ট-ইন রয়েছে। সিমপ্লি কপি-পেস্ট করেই বিভিন্ন কমপ্লেস লেআউট ডিজাইন করে ফেলা সম্ভব। ইউআইকিট LESS অথবা SASS দিয়ে ইজিলি এক্সটেন্ড কিংবা কাস্টমাইজড করা সম্ভব। তাছাড়া ইউআইকিটের রয়েছে ওয়েব বেসড কাস্টোমাইজার। কাস্টোমাইজার দিয়ে ডিফল্ট স্টাইল প্রোপার্টিসগুলো কাস্টোমাইজ করে নেয়া যায়।

ইউআইকিট ডাউনলোড করতে পারবেন এখান থেকে।

একেক প্রজেক্টে আসলে একেকধরনের সিএসএস ফ্রেমওয়ার্ক দরকার পরে। তাই কোন একটা ফ্রেমওয়ার্কে সীমাবদ্ধ না থেকে সব ধরনের ফ্রেমওয়ার্কগুলোতেই অভিজ্ঞতা থাকা উচিৎ। এটোলিস্ট উপরের পাঁচটি ফ্রেমওয়ার্ক সম্পর্কে যদি আপনার আইডিয়া থাকে, তাহলে যেকোন প্রজেক্টের চাহিদা’ই পূরণ করতে পারবেন ইনশাহাল্লাহ।

এই টপিকের আরও কিছু পোস্টঃ

© সোলায়মান হায়দার