৫ টি বেস্ট সিএসএস ফ্রেমওয়ার্ক (২০২১)

যারা বেশ কয়েক বছর বা ইভেন কয়েক মাস ধরে ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্টের সাথে যুক্ত আছেন, তারা সবাই জানেন যে সিএসএস কতটা মজার, কতটা পাওয়ারফুল এবং একইসাথে কতটা কঠিন। অবশ্যই সিএসএস খুবই বিগিনার ফ্রেন্ডলি একটি টেকনোলজি, তবে জাভাস্ক্রিপ্টের মতোই সিএসএস এর বেসিক জানা খুব সহজ হলেও সিএসএসে সম্পূর্ণ দক্ষ হওয়াটা খুবই কঠিন এবং সময়সাপেক্ষ। এছাড়া এক্সপেরিয়েন্সড ওয়েব ডেভেলপাররা জানবেন যে, সিএসএস মেইন্টেইন করা খুবই ঝামেলাপূর্ণ কাজ, যদি আপনার প্রোজেক্টটি অনেক বড় হয়

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


এই আর্টিকেলের বিষয়বস্তু সমূহ

Bootstrap

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

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

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

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

Shoelace

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

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

Materialize

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

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

UIKit

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

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

TailwindCSS

সবশেষে সবথেকে আলাদা ধরনের একটি ইনোভেটিভ সিএসএস ফ্রেমওয়ার্কের কথা বলি, আমি এই লিস্টের সবগুলো সিএসএস ফ্রেমওয়ার্কই কমবেশি ব্যাবহার করেছি। আর সত্যি কথা বলতে, এগুলোর মধ্যে TailwindCSS আমার কাছে সবথেকে ভালো লেগেছে এবং এটাই আমার সবথেকে পছন্দের সিএসএস ফ্রেমওয়ার্ক। Bootstrap, UIkit, Materialize ইত্যাদি ফ্রেমওয়ার্ক ব্যাবহার করলে আপনাকে যে সমস্যার মুখে পড়তে হয় তা হচ্ছে, Bootstrap দিয়ে তৈরি করা সব ওয়েবসাইটই প্রায় একইরকম দেখতে, আবার Materialize দিয়ে তৈরি করা সব ওয়েবসাইটই একইরকম দেখতে। কিন্তু TailwindCSS দিয়ে তৈরি করা ওয়েবসাইটগুলো একইরকম কখনোই হবে না, যদি আপনি না করেন। TailwindCSS এ আগে থেকে কোন কম্পোনেন্টই তৈরি করা থাকেনা।

এটি একটি ইউটিলিটি ফার্স্ট লো-লেভেল সিএসএস ফ্রেমওয়ার্ক। এখানে সকল কম্পোনেন্টসই আপনাকে নিজেই তৈরি করে নিতে হবে। তবে ফ্রেমওয়ার্কটি আপনাকে এই তৈরির কাজটি অনেকটা সহজ করে দেবে। এইচটিএমএলে ট্রেডিশনাল সিএসএস ক্লাসনেম লিখে এরপরে সিএসএস ফাইলে গিয়ে ওই ক্লাসনেমগুলোকে ডিজাইন না করে আপনাকে সরাসরি এইচটিএমএল ক্লাসে আপনার সিএসএস ডিজাইন ডিফাইন করে দিতে হবে, অনেকটা ইনলাইন সিএসএসের মতো। তবে এটি ইনলাইন সিএসএসের থেকে অনেক ইনোভেটিভ। যেমন-যেকোনো এইচটিএমল এলিমেন্টের ক্লাসনেমের সাথে p যোগ করে আপনি এলিমেন্টটিতে প্যাডিং দিতে পারবেন, m যোগ করে মার্জিন দিতে পারবেন, hidden যোগ করে এলিমেন্টটিকে হাইড করে দিতে পারবেন, animate যোগ করে এনিমেশন দিতে পারবেন, text-center যোগ করে টেক্সট সেন্টার অ্যালাইন করতে পারবেন ইত্যাদি।

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

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

Images:Shutterstock.com

About the author

সিয়াম

Add comment

Categories