Foundation ফ্রেমওয়ার্কে Block Grid এবং Equalizer দুটি জনপ্রিয় এবং শক্তিশালী ফিচার যা রেসপনসিভ ওয়েব ডিজাইন তৈরি করতে ব্যবহৃত হয়। এগুলোকে ব্যবহার করে ওয়েবসাইটের উপাদানগুলোকে সুন্দরভাবে সাজানো এবং তাদের আকার সমান করা যায়।
Block Grid এর ব্যবহার
Block Grid ফিচারটি Foundation এর একটি গুরুত্বপূর্ণ অংশ, যা ওয়েবসাইটে গ্রিড লেআউট তৈরি করতে সহায়তা করে। এটি সাধারণত কন্টেন্ট ব্লক বা কার্ড উপাদানগুলির জন্য ব্যবহৃত হয়, যেখানে একাধিক এলিমেন্ট একে অপরের পাশে সাজানো হয়। Block Grid ব্যবহারের মাধ্যমে গ্রিডের ব্লকগুলো সম্পূর্ণরূপে স্বয়ংক্রিয়ভাবে সমান আকারে সাজানো যায়।
Block Grid কিভাবে কাজ করে
Block Grid ব্যবহার করার জন্য .block-grid ক্লাস এবং একটি নির্দিষ্ট সংখ্যক কলামের ক্লাস ব্যবহার করা হয়। নিচে এর ব্যবহার এবং উদাহরণ দেখানো হল:
উদাহরণ:
<div class="row">
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li>
<div class="panel">Block 1</div>
</li>
<li>
<div class="panel">Block 2</div>
</li>
<li>
<div class="panel">Block 3</div>
</li>
<li>
<div class="panel">Block 4</div>
</li>
</ul>
</div>
এখানে:
- small-block-grid-2: মোবাইল ডিভাইসে ২টি ব্লক দেখাবে।
- medium-block-grid-3: ট্যাবলেট ডিভাইসে ৩টি ব্লক দেখাবে।
- large-block-grid-4: ডেস্কটপে ৪টি ব্লক দেখাবে।
এটি একটি responsive grid তৈরি করবে, যেখানে ব্লকগুলো বিভিন্ন স্ক্রীন সাইজ অনুযায়ী সজ্জিত হবে।
Block Grid এর সুবিধা:
- রেসপনসিভ লেআউট: Foundation Block Grid সহজেই বিভিন্ন স্ক্রীন সাইজে কন্টেন্টের সজ্জা সমন্বয় করে।
- সহজ কনফিগারেশন: শুধুমাত্র CSS ক্লাস ব্যবহার করেই গ্রিড সিস্টেম তৈরি করা যায়।
- ব্লক আকার সমান রাখা: সমস্ত ব্লকগুলোর আকার একই রাখা হয়।
Equalizer এর ব্যবহার
Equalizer ফিচারটি Foundation এর একটি শক্তিশালী বৈশিষ্ট্য, যা কনটেন্ট ব্লকগুলোর উচ্চতা স্বয়ংক্রিয়ভাবে সমান করে। এটি বিশেষত তখন ব্যবহৃত হয় যখন আপনি কয়েকটি উপাদান একে অপরের পাশে রাখতে চান এবং তাদের উচ্চতা সমান করতে চান। উদাহরণস্বরূপ, আপনি যদি ৩টি কলাম ব্যবহার করেন এবং এগুলোর মধ্যে একটির উচ্চতা অন্যটির চেয়ে বেশি হয়, তাহলে Equalizer স্বয়ংক্রিয়ভাবে সকল কলামের উচ্চতা সমান করে।
Equalizer কিভাবে কাজ করে
Equalizer কার্যকর করার জন্য .equalizer ক্লাস ব্যবহার করা হয়। নিচে এর ব্যবহার দেখানো হল:
উদাহরণ:
<div class="row" data-equalizer>
<div class="small-4 columns" data-equalizer-watch>
<div class="panel">Block 1</div>
</div>
<div class="small-4 columns" data-equalizer-watch>
<div class="panel">Block 2</div>
</div>
<div class="small-4 columns" data-equalizer-watch>
<div class="panel">Block 3</div>
</div>
</div>
এখানে:
- data-equalizer: পুরো রো বা কলামের জন্য Equalizer অ্যাপ্লাই করে।
- data-equalizer-watch: প্রতিটি কলামের উপর Equalizer অ্যাপ্লাই করার নির্দেশ দেয়, যাতে সেগুলোর উচ্চতা সমান হয়।
Equalizer এর সুবিধা:
- আকৃতির সামঞ্জস্য: যেকোনো অনিয়মিত উচ্চতা বিশিষ্ট এলিমেন্টের উচ্চতা স্বয়ংক্রিয়ভাবে সমান হয়।
- রেসপনসিভ: এটি গ্রিডের মধ্যে উপাদানগুলোর উচ্চতা সমান করে দেয়, এমনকি বিভিন্ন স্ক্রীনে।
- সহজ বাস্তবায়ন: সহজ CSS ক্লাস ব্যবহার করে এটি ইমপ্লিমেন্ট করা যায়, যা কোডিংকে আরও সহজ করে তোলে।
Block Grid এবং Equalizer এর মধ্যে পার্থক্য
| বৈশিষ্ট্য | Block Grid | Equalizer |
|---|---|---|
| ফাংশন | উপাদানগুলিকে গ্রিডের মধ্যে সাজানো এবং আকার সমান করা | উপাদানগুলির উচ্চতা সমান করা |
| ব্যবহার | সাধারণত একাধিক কন্টেন্ট ব্লক বা কার্ডের জন্য ব্যবহৃত হয় | একাধিক উপাদানের উচ্চতা সমান করতে ব্যবহৃত হয় |
| কম্পোনেন্টের সংখ্যা | উপাদানগুলোর সংখ্যা বা কলাম সংখ্যা নির্ধারণ করা হয় | সমস্ত কলামের উচ্চতা সমান করা হয় |
| রেসপনসিভ লেআউট | রেসপনসিভ লেআউট তৈরি করতে ব্যবহৃত হয় | রেসপনসিভ গ্রিডে ব্যবহৃত হয় উচ্চতা সমান করতে |
| উদাহরণ | ফটোগ্রাফি গ্যালারি, প্রোডাক্ট কার্ড | ইন্ট্রো সেকশন, ব্লগ পোস্ট শিরোনাম |
Block Grid এবং Equalizer ফিচার দুটি Foundation ফ্রেমওয়ার্কের খুবই কার্যকরী উপাদান, যা ওয়েবসাইটের কন্টেন্টকে সুন্দরভাবে সাজাতে এবং তাদের আকার ও উচ্চতা সমান রাখতে সাহায্য করে। Block Grid উপাদানগুলিকে রেসপনসিভ গ্রিডে সাজানোর জন্য ব্যবহৃত হয়, এবং Equalizer একে অপরের পাশে রাখা উপাদানগুলোর উচ্চতা সমান করে। Foundation এর এই ফিচারগুলো ওয়েব ডেভেলপমেন্টে সময় বাঁচাতে এবং কাস্টমাইজেশন সহজ করতে সহায়ক।
Read more
